javaScript获取dom元素的常见方法

前端开发都知道在react、vue等框架没问世之前，开发人员要实现用户对网页元素进行操作时，其中就包括dom元素的选择，不可避免的就是要获取到目标元素再接着编写功能代码。废话少说让我们来看看javaScript获取dom元素的常见方法

　　元素js获取dom元素的方法常有以下几种：

　　　　1.两个静态获取方法：

　　　　　　　　querySelector（在指定上下文中通过选择器获取第一个元素（只能获取一个），获取不到就是null） 

　　　　　　　　querySelectorAll  在指定上下文中通过选择器获取一组元素集合，获取不到就是空元（通过数组方法取元素）

　　　　2.四个动态获取：

　　　　　　　　getElementById  在document上下文下获取元素(通过Id获取的元素是一个元素对象，获取不到就是null)

　　　　　　　　getElementByTagName 通过指定的上下文获取指定的标签，获取的是一个元素集合，如果没有获取到元素，那就是空元素集合  (通过数组方法取元素）

　　　　　　　　getElementByName 在整个文档中，通过标签的NAME属性值获取一组节点集合（在IE中只有表单元素的NAME才能识别，所以我们一般应用于表单元素的处理）

　　　　　　　　getElementClassName 通过指定的上下文或按照class名取指定的标签，获取的是一个元素集合，如果没有获取到元素,那就是空元素集合  (通过数组方法取元素）

　　　　3.两个特殊获取:

　　　　　　　　body  body 属性用于设置或返回文档体。如果是返回, 该属性返回当前文档的 body 元素。如果是设置, 该属性会覆盖所有在 body 元素中的子元素, 并用新的内容来替换它。

　　　　　　　　document  documentElement 属性以一个元素对象返回一个文档的文档元素，HTML 文档返回对象为HTML元素。(注意： 如果 HTML 元素缺失，返回值为 null。)
　　　　4.动态获取id获取器：

　　　　　　　　动态获取里面 id 得先存在 在获取，id获取器是一个特殊的方法，可以不用变量接收通过id获取的值，直接用id名称调用

　　　　　　　　<div id="box"></div>   <script> console.log(box); </script>

　　　　　　　　以上代码就可以直接在控制台中打印出：<div id="box"></div>

　　　　5.还有获取元素子节点的方法：

　　　　　　　　.childNodes  获取所有子节点(不推荐使用，如果有空格，会作为文本节点获取到)

　　　　　　　　.child  获取所有子节点

　　　　　　　　.firstChild  获取首个子节点

　　　　　　　　.lastChild  获取最后一个子节点  (这四个属性都不存在兼容性问题，除了childNodes之外都是比较好用的。)

　　　　　　　　querySelector的参数是css选择器，任何选择器都可以作为它的参数，这样就使得它非常方便灵活：

　　　　　　　　比如获取class=‘test’的标签下的第一个子元素，可以这样写querySelector('.test  > * ')，也可以指定子元素的类型querySelector('.test  > span ')，或者是：classquerySelector('.test  > 　　　　　　　　　　　　#f_div')还可以使用querySelectorAll方法，这样会获取所有满足条件的元素，而不只是获取第一个元素。

　　　　***推荐使用：总体来说，我比较推荐使用querySelector方法，因为它更加灵活，使用作为css选择器进行选择非常方便。当然querySelector方法不只可以获取元素的子节点，它可以获取任何节点。querySelector方法可以兼容到IE8，基本能满足前端开发兼容性的需要。