jsDOM选择器总结

jsDOM选择器总结

---

DOM是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
JS获取DOM元素的方法（8种）

• 通过ID获取（getElementById）
• 通过name属性（getElementsByName）
• 通过标签名（getElementsByTagName）
• 通过类名（getElementsByClassName）
• 获取html的方法（document.documentElement）
• 获取body的方法（document.body）
• 通过选择器获取一个元素（querySelector）
• 通过选择器获取一组元素（querySelectorAll )

1.通过ID获取（getElementById）
id选择器属于静态方法，执行一次就没用了，就像下面的例子，换掉id名字仍然能够对div节点操作，并且上下文只能是document。

<div id="box" class="box1"></div>
<script>
var oDiv = document.getElementById("box");
oDiv.id = "abc";
console.log(oDiv.className);//box1
</script>

2.通过标签名（getElementsByTagName）
此选择器属于动态方法，返回一个类数组集合，每使用一次都会重新获取，并且上下文可以不必是document。

    <ul id="list">
        <li class="list1"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
    var oLi = document.getElementsByTagName("li");
    oLi[0].parentNode.removeChild(oLi[0]);
    console.log(oLi.length);//4
    </script>

3.通过类名（getElementsByClassName）
和标签选择器一样，但class选择器不兼容ie8及以下。

4.获取html的方法（document.documentElement）

document.documentElement是专门获取html这个标签的。

5.获取body的方法（document.body）

document.body是专门获取body这个标签的。

6.querySelector**和** querySelectorAll

接收css选择器参数，前者获取第一个匹配到的节点，后者获取到所有匹配到的节点返回一个类数组集合，另外需要注意的是，这两种方法都是静态方法。

7.通过name属性（getElementsByName）
暂时没用过