目录
一、通过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://img-blog.csdnimg.cn/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了。