[JavaScript知识库]webAPIDOM获取页面元素

获取页面中元素的方法有：根据ID获取，根据标签名称获取，通过HTML5新增的方法获取，通过特殊元素获取等

getElementById获取元素

用ID获取的元素返回的是一个元素对象（object);

语法：

// var element = document.getElementById('id名');
var timer = document.getElementById('time');

参数：

• element（元素）是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.

• id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.

console.dir()

我们可以使用console.dir() 打印我们返回的元素对象，更好的查看里面的属性和方法

getElementsByTagName获取某类标签元素

直接用标签名称获取元素，返回带有指定标签名的对象集合，获取的元素以伪数组的形式存在；

语法

//document.getElementsByTagName('标签名')
var lis = document.getElementsByTagName('li');

访问获取的的元素

因为用标签名获取的元素是以伪数组的形式存在，我们想要获取其中的某一个元素，我们可以用for循环遍历伪数组按照索引值的方式获取，遍历得到的元素是动态的；

如果页面中没有该元素返回的是一个空的伪数组；如果页面中只有一个该元素返回的也是一个值的伪数组；

 ? ?<script>
 ? ? ? ?var lis = document.getElementsByTagName('li');
 ? ? ? ?console.log(lis);
 ? ? ? ?for (var i = 0; i < lis.length; i++) {
 ? ? ? ? ? ?console.log(lis[i]);
 ? ? ?  }
 ? ?</script>

指定父元素获取自己元素

在实际开发中我们只需要获取一个盒子中的元素，而不是将整个页面所有的元素都获取，那么我们就可以通过先获取父级盒子元素，然后在从父级盒子元素下选区子元素；

语法

01 先用id获取父级盒子

02 获取的父级盒子元素.getElementByTagName('标签名称')；

 ? ?<script>
 ? ? ? ?var oBox = document.getElementById('box');
 ? ? ? ?var lis = oBox.getElementsByTagName('li');
 ? ? ? ?console.log(lis);
 ? ?</script>

H5新增的获取元素的方法

如果开发中不考虑兼容性问题我们可以使用下面的方法，我们推荐大家使用querySelector()方法；

根据类名称获取元素getElementsByClassName

getElementsByClassName('类名称')

使用该方法获取元素的时候小括号中的类名称前面不需要加任何符号（#和.);

 ? ?<script>
 ? ? ? ?var lis = document.getElementsByClassName('lis');
 ? ? ? ?console.log(lis);
 ? ?</script>

根据选择器获取页面中第一个元素对象querySelector

querySelector('选择器') 返回指定选择器的第一个元素对象；

使用该方法的时候小括号里面的选择器必须要加符号（#和.)，也可以是标签选择器；

 ? ?<script>
 ? ? ? ?var lis = document.querySelector('.lis');
 ? ? ? ?console.log(lis);
 ? ?</script>

根据选择器获取页面中所有的该选择器元素querySelectorAll

querySelectorAll('选择器') 返回指定选择器的素有元素对象集合；

使用该方法的时候小括号里面的选择器必须要加符号（#和.)，也可以是标签选择器；

 ? ?<script>
 ? ? ? ?var lis = document.querySelectorAll('.lis');
 ? ? ? ?console.log(lis);
 ? ?</script>

特殊标签元素的获取

获取body元素 document.body

var bodyEle = document.body;

获取html元素 document.documentElement

var htmlEle = document.documentElement;

事件