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

巴特西

DOM-BOM-EVENT（2）

2.获取DOM元素的方法

2.1.getElement系列

2.2.querySelector系列

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

最新文章

热门文章