javascript中DOM元素节点查的操作方法。

1.通过document对象的方法获取。

注意一下都是document的方法。

1.1.获取html节点的两种方法。

const html=document.documentElement
const html=document.getElementsByTagName("html")[0]

1.2.获取body元素的两种方法。

const body=document.body
const body=document.getElementsByTagName（"body"）[0]

1.3.获取页面中的所有元素的两种方法。

const all=document.all
const all=document.getElementsByTagName("*")

1.4.通过id名获取。

<div id="myDiv"></div>

const myDiv=document.getElementById("myDiv")

1.5.通过class名获取。

注意：

返回的是一个类数组对象，所有查询到的对象都会封装到数组中，即使查询到只有一个也会封装到这个数组中返回。调用的时候直接加数组索引调用如collapseDiv[0]，注意不要越界。

<div class="collapse"></div>

const collapseDiv=document.getElementsByClassName("collapse")

1.6.通过name属性来获取。

注意：跟上面通过class名获取方式一样，返回的也是一个类数组类型，同时调用方式也是一样的。

<div name="header"></div>

const header=document.getElementsByName("header")

1.7.通过标签名（也就是元素名）来获取。

返回所有div元素对象，封装到一个伪数组中（该方法与其他的八个方法有一个不同点在于，其可以是document对象的方法，也可以是其他对象的方法，可以返回当前节点指定标签名的后代节点，这是与其他方法不同的地方）。

//获取页面下所有为div的标签的元素
const allDivs=document.getElementsByTagName("div")
//下面2中通过元素的亲属关系获取中的例子
//首先获取ul这个元素
const ul=document.getElementsByTagName("ul")[0]
//获取ul下的所有li元素
const allLis=ul.getElementsByTagName("li")

1.8querySelector（“选择器”）（为了解决IE的兼容性，IE给我们提供了以下两种方法1.8和1.9）。

注意：

1. 使用该方法总会返回唯一的元素，如果满足条件的元素有多个，那么他只返回第一个。
2. 选择器写的和你在css中如何选择这个元素是一样的，如：#box1，div，.red(也可以写符合选择器)。

<div class="box1"></div>

<button id="btn1"></button>

const box1=document.querySelector(".box1")
const btn1=document.querySelector("#btn1")

1.9querySelectorAll("选择器")。

<div class="box1"></div>

<button id="btn1"></button>

const box1=document.querySelector(".box1")[0]
const btn1=document.querySelector("#btn1")[0]

注意：

看到all我们就应该想到与上面的Elements后面加s是一样的，返回的是一个数组，会将所有符合条件的元素封装到一个数组中，即使符合条件的元素只有一个，也会返回一个数组。

总结：

• 这些方法都是document的方法，不是属性，方法类似函数，调用的时候是有括号的，而属性是没有括号的，与下面选择节点的属性是不一样的，要注意区别开来。
• 方法后面的参数一定是一个字符串类型的，就是说要加引号。
• 如果方法中有Elements或者all的时候返回的都是一个类数组类型，调用的时候按照数组的使用方法去调用。
• getElementsByTagName()方法其可以是document对象的方法，也可以是其他对象的方法，可以返回当前节点指定标签名的后代节点，这是与其他方法不同的地方。

2.通过节点之间的亲属关系获取。

注意以下这些都是属性而不是方法，所以不用加括号。

 我们可以通过父亲节点获取其孩子节点（包括孩子节点，第一个孩子节点，最后一个孩子节点，所有孩子节点，所有孩子元素），我们注意在这里区分一下节点和元素的区别，比如我们的div标签就是一个元素，而我们的元素下面可以有很多其他的节点，比如文本节点，注释节点等，而我们下面的两个children和childNodes的属性就在于这个地方。

<ul>

        <li></li>

        <li class="middle"></li>

         <li></li>

        <li></li>

</ul>

2.1获取第一个孩子节点,通过firstchild属性。

注意：该属性会获取文本节点在内的所有节点，所以第一个li和前面还有空格，故解释器会将空格这也当成文本节点，所以如果按照这个方法的话我们获取的就是文本节点了，而不是我们想要的第一个li节点，所以我们可以将所有的小li写在一起就不会出现这个问题了。这样我们获取的第一个节点就是一个元素节点小li，而不是我们的文本节点了。（下面的lastchild，childNodes都会出现这个问题，同样的解决方法，不再赘述）。

<ul><li></li><li class="middle"></li><li></li><li></li></ul>

//首先获取ul这个元素
const ul=document.getElementsByTagName("ul")[0]
//获取ul的第一个子元素
const FirstLi=ul.firstchild

2.2获取最后一个孩子节点,通过lastchild属性。

//首先获取ul这个元素
const ul=document.getElementsByTagName("ul")[0]
//获取ul的最后一个子元素
const lastLi=ul.lastchild

当然我们也可以通过一个节点获取他的前一个兄弟节点或者后一个兄弟节点，这样来操作我们的DOM就会特别的方便。

2.3获取所有孩子节点,通过childnNodes属性  。

//首先获取ul这个元素
const ul=document.getElementsByTagName("ul")[0]
//获取ul下面的所有子节点（包括文本节点和元素节点等节点）
const allChilds=ul.childNodes

 如果li之间以及小li和我们的ul之间存在空格的，那么四个小li和一个ul之间会有五段空格，加上四个li元素，那么数组的长度就会有九。（但是在IE8及一下浏览器中默认不会将文本节点当成子节点，所以返回的时候只会返回四个小li元素节点，但是在其他的浏览器中还是一样会返回九个节点） 。

 2.4获取所有孩子元素,通过children属性 。

//首先获取ul这个元素
const ul=document.getElementsByTagName("ul")[0]
//获取ul下面的所有子元素（不包括其他文本节点，注释节点等）
const allChilds=ul.children

注意：该属性与上面2.3的属性的区别是，一个是获取所有的孩子节点，一个是获取所有的孩子元素，那么获取孩子元素的话就不包括文本节点，元素就是我们在html中看到的标签，所以通过children的话就不会获取到文本节点了。但是该方法的兼容性不是特别好，如果想要给低版本浏览器特别是IE做适配，则另寻他路。

2.5获取class名为middle的前一个兄弟节点，通过previousSibling属性。

//首先获取class名为middle这个小li元素
const li=document.getElementsByClassName("middle")[0]
//获取li的前一个兄弟节点
const preLi=li.previousSibling

2.6获取class名为middle的后一个兄弟节点，通过previousSibling属性。

//首先获取class名为middle这个小li元素
const li=document.getElementsByClassName("middle")[0]
//获取li的后一个兄弟节点
const nextLi=li.nextSibling

总结：

1. 通过节点之间的亲属关系获取元素以及节点的这几个属性调用的对象不是document，而是任何元素都可以。
2. 六个属性，而不是六个方法，与1中的8中方法区别开来！
3. 在使用lastchild，firstchild以及childNodes的时候一定要注意会获取前面的文本节点以及注释节点等，所以我们可以将前面的文本节点删掉，不要空格（一定要注意这个问题）。
4. 在IE8及一下的浏览器版本中，childNodes这个属性不会将文本节点当成自己的子节点。

如有错误或者遗漏，欢迎各位发表高见！！！