目录
一、通过document顶层方法获取
1、获取html标签
2、获取head标签
3、获取body标签
二、getElementBy系列获取
1、ID获取
2、类名获取
3、name属性获取
4、标签名获取
三、query系列获取
1、通过query选择器获取一个元素
2、通过querry选择器获取一组元素
四、通过节点的属性获取
1、获取父节点
2、获取子节点
3.获取首个子节点
4、lastChild获取最后一个子节点
5、获取兄弟节点
一、通过document顶层方法获取
1、获取html标签
获取html标签有一个专门的方法：document.documentElement
2、获取head标签
获取head标签也有一个专用方法：document.head
3、获取body标签
获取body标签同样有一个专门的方法：document.body
二、getElementBy系列获取
1、ID获取
语法：document.getElementById('标签上的ID')
打印：document.getElementById('father')：
注意：如果两个标签一样的ID,它会获取第一个标签
2、类名获取
语法： getElementsByClassName('标签上的类名')
打印document.getElementsByClassName('box'):
获取到的是一个数组、因为多个标签名中的class名一样，所以获取的是一个数组
返回一个数组 ， document.getElementsByClassName('box')[0]来获取到class为box的标签组里的第一个标签元素。
![console.log(document.getElementsByClassName("box")[0])图示](https://www.qianduange.cn/upload/article/20200710215359309.png)
3、name属性获取
语法： getElementsByName('标签上的name属性值')
通过在控制台打印console.log(document.getElementsByName('fatherBox'))就可以在控制台看见返回的是一个NodeList（NodeList这个概念和前面通过class类名获取里面提到的HTMLCollection概念相似但是又有不同，因为本小白也说不明白，所以具体的还请看官大佬们自行百度）数组，
4、标签名获取
语法：documentsByTagName('标签名')
打印document.getElementsByTagName('div')可以看到返回了一个HTMLCollection数组，数组里面包含了我们HTML中的所有div
三、query系列获取
当我们只有父元素有设置id、class、name值，然后HTML内容又偏多时，这个时候用上面的那四种选择器都不太方便，所有在HTML5中添加了query选择器来帮助我们更方便的获取到元素。
1、通过query选择器获取一个元素
语法：querySelector('根据选择器规则选择元素')
注意要根据css选择器的匹配规则去获取。当选择器选择的内容为多个时，会只选择匹配到的第一个元素返回，但是这里的第一个和前面ById选择器的选择第一个返回不太一样，比如你还是不小心给两个元素写了一样的Id，都是father，然后第一个father里面没有div，第二个father里面有多个div，这个时候querySelector会先匹配到第一个father然后往里面匹配，发现没有可以匹配到的div来返回，他就会进入到第二个father里面进行匹配，将匹配到的第一个div进行返回处理；但是，如果第一个father里面有了可以返回的div，那么它就不会匹配第二个father。可能说的不够直观，我们直接上图：
（1）两个father，第一个father里面没有div
在控制台打印document.querySelector('#father>div')
（2）两个father，第一个father里面有div
在控制台打印document.querySelector('#father>div')
2、通过query选择器获取一组元素
语法：querySelectorAll('根据css选择器规则获取元素')
在控制台打印document.querySelectorAll('#father>div')可以看到返回了一个NodeList数组，里面包含着我们通过匹配规则匹配到的所有div元素。
可能有看官大佬就好奇了，这时候要是多写了个重复id的元素会出现啥情况呀，别急，我给您打印出来了，还是上面那个两个father，第一个father里面有一个div，第二个father里面有三个div的结构，再打印一遍document.querySelectorAll('#father>div')：
我们可以看到他把两个重复id的父级元素里面的子div全都获取进数组了。
四、通过节点的属性获取
每个DOM元素其实都可以看作是一个对象，在这个DOM元素对象里面有着用于获取各类节点的属性，我们可在通过第一节介绍的方法获取到一个节点，然后通过操作这个节点上的属性获取到想要的元素节点。
1、获取父节点
语法： 子节点.parentNode获取父节点
通过parentNode属性获取到元素的父节点，比如在控制台打印document.getElementsByClassName('box2')[0].parentNode就可以获取到类名为box2的元素数组中第一个元素的父节点了，打印结果为：
2、获取子节点
方式一(不推荐)：childNodes获取所有子节点
语法：父节点.childNodes
通过childNodes属性获取到元素的父节点，比如在控制台打印document.getElementById('father').childNodes就可以获取到ID为father的元素底下的所有子节点了，通过观察控制台我们可以看见返回了一个NodeList数组：
我们可以看到数组里面出现了一些奇怪的东西–text，这个其实是我们在编辑器里面打代码时为了代码结构清晰一些，打的空格。每一个子元素的头尾但凡有空格的地方都会解析成text并加入到数组里面。我们要操作这样的数组就很难受了，所以不推荐使用这个办法。
方式二(推荐)：chilNodes获取所有子节点
语法： 父节点.children
通过children来获取所有的子节点，这个属性和childNodes一样都会返回一个数组，只不过返回的是一个HTMLCollection数组。在控制台打印document.getElementById('father').children结果如下：
可以看到，我们获取到的数组和用childNodes获取到的子节点数组不太一样，它没有奇奇怪怪的东西–text，这种情况下，我们可以更好的进行需求操作，所以如果你要用节点的属性来获取全部子节点时，推荐使用children而不是childNodes。
3.获取首个子节点
语法：父节点.firstChild
当我们要获取一个元素的首个子节点时，我们就可以使用firstChild属性啦。同样的在控制台打印一下看看返回结果console.log(document.getElementById('father').firstChild)：
我们发现打印出来了一个似曾相识的东西，前面childNodes返回的数组里面出现过的text，那这应该也是空格的问题吧，将第一个子节点前面的空格给删了再看看
可以看到他完美的返回了我们想要的东西。
因为他不会过滤换行空格之类的所以可以将它变相的认为是childNodes[0]。
4、lastChild获取最后一个子节点
获取一个元素的最后一个子节点时，我们就可以使用lastChild属性啦。同样的在控制台打印一下看看返回结果console.log(document.getElementById('father').lastChild)：
可以发现依旧是换行、空格的问题，和firstChild解决方法略有不同的是，firstChild去除的是第一个子节点前面的间隙，而lastChild要去除的是最后一个子节点后面的间隙：
这个时候再打印就会得到我们需要的最后一个子节点元素了：
5、获取兄弟节点
(1)、获取前一个兄弟元素
语法：兄弟节点.previousSibling
使用previousSibling获取前一个兄弟元素，通过控制台打印document.getElementsByClassName('box2')[0].previousSibling来获取box2前面的兄弟元素：
注意：空格、换行会出现#text
(1)、获取后一个兄弟元素
语法： 兄弟节点.nextSibling
使用nextSibling获取后一个兄弟元素，通过控制台打印document.getElementsByClassName('box2')[0].nextSibling来获取box2后面的兄弟元素：
小结：
会打印出text的几个方法（childNodes获取所有子节点、firstChild获取首个子节点、lastChild获取最后一个子节点、previousSibling获取前一个兄弟元素、nextSibling获取后一个兄弟元素），个人不建议使用，现在编辑器都是格式化美化代码，一不留神就换行了，那真的就是到处都是text了。
