DOM-BOM-EVENT（2）

2.获取DOM元素的方法

2.1.getElement系列

documentElementById 通过id获取元素

<div id="box"></div>
<script>
    var oDiv = document.getElementById("box)
</script>

documentElementsByClassName 通过类名称获取元素

<div class="box"></div>
<script>
    var oDiv = document.getElementsByClassName("box)
</script>

documentElementsByTagName 通过标签名称获取元素

    var aLi = document.getElementsByTagName("li")

在某个范围內获取元素

<div id="wrap">
    <div></div>
    <div></div>
    <div></div>
</div>
<script>
     //先获取到外层div
     var oWrap = document.getElementById("wrap")
     //再获取div下的子div
     var aDiv = oWrap.document.getElementsByTagName("div")
</script>

2.2.querySelector系列

querySelector 获取符合条件的一个

<div id="wrap">
    <div>1111</div>
    <div>1112</div>
    <div>1111</div>
    <div>1111</div>
    <div>1111</div>
</div>
<script>
    var aDiv = document.querySelector("#wrap")
    console.log(aDiv)  
</script>

querySelecttorAll 获取符合条件的所有元素，返回一个集合

<script>
    var aDiv = document.querySelectorAll("#wrap div")
    console.log(aDiv)  
</script>

2.3.getElement系列和querySelector系列的区别

规范不同 querySelectorAll 属于 W3C 中的 Selectors API 规范 [1]。而 getElementsBy 系列则属于 W3C 的 DOM 规范 [2]。

执行效率不同 getElement系列执行效率更高，测试地址：https://jsperf.com/getelementsby-vs-queryselectorall/7

螺钉课堂视频课程地址：http://edu.nodeing.com