详解！!如何获取页面元素-Javascript-Dom

           DOM在我们实际开发中主要用来操作元素。要想操作元素首先我们需要对页面元素进行获取。而获取页面中的元素可以使用以下几种方式：

1. 根据ID获取
2. 根据标签名获取
3. 通过HTML5新增的方法获取
4. 特殊元素获取

 1.根据ID获取

使用getElementById()方法可以获取带有ID的元素对象：

Document的方法getElementById()返回一个匹配特定ID的元素，由于元素的ID在大部分情况下要求是是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

var element = document.getElementById(id);

参数：

1. element是一个Element对象。如果当前文档中拥有特定ID的元素不存在则返回null。
2. id是大小写敏感的字符串，代表了所要查找的元素的唯一ID。

 返回值：

返回一个匹配到ID的DOM Element 对象。若在当前Document下没有找到，则返回null。

2.根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合，或是可以通过获取某个元素（父元素）内部所有指定标签名的子元素：

document.getElementsByTagName('标签名');

var ol = document.getElementsByTagName('ol');
ol.getElementsByTagName('li');//举例：ol与li是父子关系

注意：

1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。

2.得到元素对象是动态的。

3.父元素必须是单个对象（必须指明是哪一个元素对象）获取时不包括父元素自己。

介绍：

1.返回的是获取过来元素对象的集合，以伪数组的形式存储的

var lis = document.getElementsByTagName('li');
console.log(lis);//整个伪数组
console.log(lis[0]);//伪数组里面对应顺序的元素

2.我们想要依次打印里面的元素对象我们可以采取遍历的方式

for(var i = 0;i<lis.length;i++){
console.log(lis[i]);
}

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

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

3.通过HTML新增的方法获取

1.document.getElementsByClassName()方法根据类名返回元素对象集合

var element = document.getElementsByClassName('类名');//根据类名返回元素对象集合

2.document.querySelector()方法根据指定选择器返回第一个元素对象

var element = document.querySelector('选择器');//根据指定选择器返回第一个元素对象

注意：该方法里面的选择器需要加符号，例如  .box #nav等

3.document.querySelectorAll()方法根据指定选择器返回，该方法可以得到对应的所有选择器

var allBox = document.querySelectorAll('.box');

4.获取特殊元素（body，html）

获取body元素

直接document.body即可

var bodyEle = document.body;//返回body元素对象

获取html元素

直接document.html即可

var htmlEle = document.html;//返回html元素对象

以上便是Dom学习中如何获取元素的几种方法。如果觉得本博客帮助到了你不妨点个赞或是收藏起来，你的支持是对我的莫大的鼓励，谢谢观看！