在上一节中，我们学习了DOM树和遍历DOM相关的知识。可以通过firstChild（或firstElementChild）、lastChild（或lastElementChild）、parentNode(或parentElement)、children、previousSibling（或previousElementSibling）、nextSibling(或nextElementSibling)获取到你想要的DOM元素。如果你够仔细的话，可以看到他们之前都是存在相互关系的，要么是兄弟关系，要么是父子关系。比如下图，更易于帮助大家理解：
当元素彼此接近时，我们使用上面所说的DOM属性可以很容易找到你想要的元素（DOM节点）。但事实上，很多时候并不是这样（他们不是有相互的关系）。此时如何获得页面的任意元素，也是JavaScript中的重要技能之一。那么除上一节所介绍的方法之外，还有别的方法吗？
答案肯定是有的，也就是我们今天要聊的getElement*和querySelector*：
getElementById()getElementsByClassName()getElementsByTagName()getElementsByName()document.querySelector()document.querySelectorAll()
那我们开始吧！
document.getElementById或者只是id
在HTML文档中，元素的id是唯一的，也就是说，一个页面只有唯一的id名，这个id就是一个全局变量（如果应用到JavaScript中的话）。那么我们就可以用它来访问元素，比如像下面这样：
上面输出的结果如下：
如果我们自己显式声明一个相同的变量，那么输出的值就不一样了，比如：
let elem = 5;
console.log(elem) // => 5
这个时候输出的值是5，不再是。
该行为在规范中已有相应的描述。浏览器试图通过混合JavaScript和DOM来帮助我们。对于简单的JavaScript脚本是有一定的好处的，但可能有名称冲突。同样，当我们查看JavaScript和没有HTML的时候，不知道变量是从哪来的。
更好的选择方法是使用document.getElementById(id)。比如：
let elem = document.getElementById('elem')
elem.style.backgroundColor = 'red'
在JavaScript中，我们经常使用id来直接引用一个元素（选中元素），这是最为简单而且直接的方法。事实上，document.getElementById是首选的方法。
需要注意的是，id是唯一的，按规范的原则性来说，id也必须是唯一的。言外之意，文档中只有一个元素与给定的id相匹配。如果当文档中有多个具有相同id的元素时，那么相应的方法document.getElementById()获取的元素行为是不可预测的。浏览器可能会随机返回任何一个。所以，我们在使用的时候，必须保持id的独特性，唯一性。
document.getElementById()只能在document对象上调用，它在整个文档中查找给定的id。
其实，在JavaScript中，我们可以使用document.querySelector(id)来获取指定的id的元素。这个稍后我们会介绍到。
document.getElementsBy*
在JavaScript中，还有其他寻找节点的方法，比如：
document.getElementsByTagName(tag)document.getElementsByClassName(className)document.getElementsByName(name)
上面三个方法对应的是通过元素的标签名、类名和属性来获取想要的元素节点。
document.getElementsByTagName(tag)查找带有给定标签的元素，将返回的是一个集合。tag参数可以是任何HTML的标签元素，甚至也可以是*。比如：
let divs = document.getElementsByTagName('div')
这个方法在任何DOM元素的上下文中都可以调用的。比如ele.getElementsByTagName('div')。比如前面的示例中，divs获取到的是整个HTML文档中的所有div标签元素，其输出的值是一个HTMLCollection集合，如下图所示：
比如下面的这个示例，我们要找到table中的所有input标签，我们可以这样做：
这个输出的结果如下：
对于getElementsBy*等方法，千万别忘了s字母，特别是新手。也就是说，当你使用getElementByTagName等方法将会报错。
getElementById中缺少一个s字母，因为它返回的是单个元素。但是getElementsByTagName返回的是一个集合，所以里面有一个s。同样的，getElementsByClassName和getElementsByName与getElementsByTagName类似。
还有就是，getElementsBy*等方法返回的是一个集合，而不是一个元素（与getElementById不同）。同样的，很多新手还容易犯另外一个书写错误：
document.getElementsByTagName('input').value = 5
虽然上面的代码并不报错，但是并不会修改HTML元素中input的value值，如下图所示：
这主要是因为，document.getElementsByTagName('input')返回的不是一个独立的元素，而是一个集合。其实它返回的就是一个HTMLCollection集合。如果你阅读过这个系列的前两篇文章，你就不难发现，返回的值是一个类数组。返回值具有length属性和[]和item()相关的特性。如果想改变所有input的value值，可以使用for ... of这样的方法。当然，如果你想获取指定的某个input的值，我们可以使用指定的索引值，比如：
document.getElementsByTagName('input')[0].value = 5 document.getElementsByTagName('input')[1].value = '大漠' document.getElementsByTagName('input')[2].value = '大漠_w3cplus'
其中：
document.getElementsByClassName(className)返回具有给定CSS类的元素，元素可能还有其他的类document.getElementsByName(name)返回具有给定name属性的元素。不过由天历史原因，这个方法很少使用
动态集合
所有方法getElementsBy*返回的是一个动态集合。这样的集合总是反映文档的当前状态，并在更改时自动更新。
在下面的示例中，有两个