节点查询型API · 前端

# 节点查询型API ## document.getElementById 没啥.. ## document.getElementsByTagName ~~~ console.log(Array.isArray(document.getElementsByTagName('li'))); console.log(document.getElementsByTagName('li')[0]); ~~~ 需要注意的是返回的不是数组。是HTMLCollection。 ## document.getElementsByName ## document.getElementsByClassName ## document.querySelector和document.querySelectorAll **document.querySelector** ~~~ var el = document.querySelector(".myclass"); ~~~ 注意这个api使用深度优先搜索，返回匹配到的第一个。例子： ```html <body> <div> <div> <span class="test">第三级的span</span> </div> </div> <div class="test"> 同级的第二个div </div> <input type="button" id="btnGet" value="获取test元素" /> </body> <script> document.getElementById("btnGet").addEventListener("click",function(){ var element = document.querySelector(".test"); alert(element.textContent); }) </script> ``` 两个class都包含“test”的元素，一个在文档树的前面，但是它在第三级，另一个在文档树的后面，但它在第一级，通过querySelector获取元素时，它通过深度优先搜索，拿到文档树前面的第三级的元素。即alert"第三级的span"。 **querySelectorAll** 返回匹配到的所有。