原生DOM选择器querySelector和querySelectorAll

假如我们有一个 id 为 test 的 DIV，为了获取到这个元素

document.getElementById("test");

document.querySelector("#test");

document.querySelectorAll("#test")[0];

querySelectorAll该方法返回所有满足条件的元素，结果是个nodeList集合。非实时（no-live）的。

<div id="container">

<div></div>

<div></div>

</div>

//首先选取页面中id为container的元素

container=document.getElementById('#container');

console.log(container.childNodes.length)//结果为2

//然后通过代码为其添加一个子元素

container.appendChild(document.createElement('div'));

//这个元素不但添加到页面了，这里的变量container也自动更新了

console.log(container.childNodes.length)//结果为3