当前位置 : 主页 > 网页制作 > html >

DOM中常见的元素获取方式

来源:互联网 收集:自由互联 发布时间:2021-06-12
1.getElementById获取元素 返回的是一个元素对象 var timer = document.getElementById(‘time‘); console.dir 打印返回元素对象,更好的查看里面的属性和方法 console.dir( timer ); 2.getElementsByTagName 获取某

1.getElementById获取元素    返回的是一个元素对象

 var  timer = document.getElementById(‘time‘);

 console.dir   打印返回元素对象,更好的查看里面的属性和方法

 console.dir( timer );

2.getElementsByTagName 获取某类标签元素    返回的是 获取过来元素对象的集合  以伪数组的形式存储的

 var  lis = document.getElementsTagName( ‘li‘ );  

 console.log( lis[0] );

 1.如果页面中只有一个 li 返回的还是伪数组的形式

 2.如果页面中没有这个元素  返回的是空的伪数组的形式

 3.可以获取某个元素(父元素)内部所有指定标签名的子元素    父元素必须是单个对象(必须指明是哪一个元素对象)

  element.getElementsByTagName(‘标签名‘);

  var  ol =document.getElementsByTagName(‘ol‘);  //[ol]

  var  lis = ol[0].getElementByTagName(‘li‘);

3.H5新增获取元素方式

 1.getElementsByClassName( ‘类名’ );   根据类名获取某些元素集合 

  var  box = document.getElementByClassName(‘box‘);

 2.querySelector(‘选择器‘);   返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav

  var nav = document.querySelector(‘#nav‘);

 3.querySelectorAll(‘选择器‘);   返回指定选择器的所有元素对象集合

  var  lis = document.querySelectorAll( li );

4.获取 body 元素

  document.body  返回 body 元素对象

5.获取 html  元素

  document.documentElement   返回 html 元素对象

网友评论