<div></div> <div></div> <script> console.log('#foo\bar') // "#fooar" document.querySelector('#foo\bar') // 不匹配任何元素 console.log('#foo\\bar') // "#foo\bar" console.log('#foo\\\\bar') // "#foo\\bar" document.querySelector('#foo\\\\bar') // 匹配第一个div document.querySelector('#foo:bar') // 不匹配任何元素 document.querySelector('#foo\\:bar') // 匹配第二个div </script>
示例：删除
<div> <p>hello world</p> <p>hello dolby</p> <p>hello dot</p> <p>hello bean</p> </div> <script> var div = document.getElementById("myDiv"); console.log(div); //(11) var p = document.querySelector("p"); div.removeChild(p); console.log(p); //(12) </script>
//(11)处打印值 <div> <p>hello dolby</p> <p>hello dot</p> <p>hello bean</p> </div> //(12)处打印值 <p>hello world</p> //如你所见，querySelector也是静态的快照
6、querySelectorAll()：
接收一个参数：一个包含一个或多个CSS 选择器的字符串（多个选择器以逗号分隔），返回静态NodeList对象集合，该集合中包含匹配指定CSS选择器的所有节点，元素节点的变化无法实时反映在结果中；如果参数中包含CSS伪元素则返回一个空的对象集合。
语法：
elementList = document.querySelectorAll(selectors);
示例：
var matches = document.querySelectorAll("div.note, div.alert");
示例：删除
<div> <p>hello world</p> <p>hello dolby</p> <p>hello dot</p> <p>hello bean</p> </div> <script> var div = document.getElementById("myDiv"); console.log(div); //(13) var p = document.querySelectorAll("p"); for (var i = 0; i < p.length; i++) { div.removeChild(p[i]); } console.log(p); //(14) </script>
//(13)处打印值 <div></div> //(13)处打印值 [p.myP,p.myP,p.myP,p.myP] //返回的是静态NodeList集合，元素节点的变化无法实时反映在结果中
7、elementFromPoint()：
接收两个参数：分别是相对于当前窗口左上角的横纵坐标，单位为CSS像素，不需要加单位；返回位于页面指定位置的元素，如果该元素不可返回（如滚动条）则返回它的父元素，如果坐标值无意义（如负值）则返回null。
语法
var element = document.elementFromPoint(x, y);
示例：
<!DOCTYPE html> <html lang="en"> <head> <title>elementFromPoint example</title> <script> function changeColor(newColor) { elem = document.elementFromPoint(2, 2); elem.style.color = newColor; } </script> </head> <body> <p>Some text here</p> <button>blue</button> <button>red</button> </body> </html>
这一个获取元素的方法用得不多所以不多做介绍。
是不是觉得看了上面这些头好大啊，什么是动态什么是静态，有没有好记一点的方法呢？
有哒！
你可以简单地理解为，getElementBy系列返回的都是动态的HTMLCollection集合，动态集合中的DOM结构变化能实时地反映到所保存的对象中，而querySelector系列返回的都是静态的NodeList对象，是一个快照，对DOM的任何操作都不会对其产生影响。
那么Nodelist和HTMLCollection有什么异同呢？
相同点：
二者都是类数组对象
二者都具有length属性
二者都具有item()方法
二者都是动态的元素集合，每次访问都需要重新对文档进行查询。
你一定会好奇，诶？前面不是说querySelector系列返回的都是静态的NodeList对象咩？怎么又变成动态的呢？原因在此：
规范中对 querySelectorAll 有明确要求，规定其必须返回一个静态的 NodeList 对象。
在Chrome中情况如下：
document.querySelectorAll('a').toString(); // return "[object NodeList]" document.getElementsByTagName('a').toString(); // return "[object HTMLCollection]"
不同点：
NodeList 对象会包含文档中的所有节点，如 Element、Text 和 Comment 等；HTMLCollection 对象只会包含文档中的 Element 节点。