<div>div</div> <div>div</div> <input type="button" value="显示数量"/> <input type="button" value="新增div"/> var divList = document.getElementsByTagName("div"); document.getElementById("btnAddDiv").onclick = function(){ var div = document.createElement("div"); div.textContent ="div" + (divList.length+); document.body.appendChild(div); } document.getElementById("btnShowCount").onclick = function(){ alert(divList.length); }
这段代码中有两个按钮，一个按钮是显示HTMLCollection元素的个数，另一个按钮可以新增一个div标签到文档中。前面提到HTMLCollcetion元素是即时的表示该集合是随时变化的，也就是是文档中有几个div，它会随时进行变化，当我们新增一个div后，再访问HTMLCollection时，就会包含这个新增的div。
使用document.getElementsByTagName这个方法有几点要注意：
（1）如果要对HTMLCollection集合进行循环操作，最好将其长度缓存起来，因为每次循环都会去计算长度，暂时缓存起来可以提高效率
（2）如果没有存在指定的标签，该接口返回的不是null，而是一个空的HTMLCollection
（3）“*”表示所有标签
document.getElementsByName
getElementsByName主要是通过指定的name属性来获取元素，它返回一个即时的NodeList对象。
使用这个接口主要要注意几点：
（1）返回对象是一个即时的NodeList，它是随时变化的
（2）在HTML元素中，并不是所有元素都有name属性，比如div是没有name属性的，但是如果强制设置div的name属性，它也是可以被查找到的
（3）在IE中，如果id设置成某个值，然后传入getElementsByName的参数值和id值一样，则这个元素是会被找到的，所以最好不好设置同样的值给id和name
document.getElementsByClassName
这个API是根据元素的class返回一个即时的HTMLCollection，用法如下
var elements = document.getElementsByClassName(names);
这个接口有下面几点要注意：
（1）返回结果是一个即时的HTMLCollection，会随时根据文档结构变化
（2）IE9以下浏览器不支持
（3）如果要获取2个以上classname，可传入多个classname，每个用空格相隔，例如
var elements = document.getElementsByClassName("test1 test2"); document.querySelector和document.querySelectorAll
这两个api很相似，通过css选择器来查找元素，注意选择器要符合CSS选择器的规则。
首先来介绍一下document.querySelector。
document.querySelector返回第一个匹配的元素，如果没有匹配的元素，则返回null。
注意，由于返回的是第一个匹配的元素，这个api使用的深度优先搜索来获取元素。我们来看这个例子：
<div> <div> <span>第三级的span</span> </div> </div> <div> 同级的第二个div </div> <input type="button" value="获取test元素" /> document.getElementById("btnGet").addEventListener("click",function(){ var element = document.querySelector(".test"); alert(element.textContent); })
这个例子很简单，就是两个class都包含“test”的元素，一个在文档树的前面，但是它在第三级，另一个在文档树的后面，但它在第一级，通过querySelector获取元素时，它通过深度优先搜索，拿到文档树前面的第三级的元素。
document.querySelectorAll的不同之处在于它返回的是所有匹配的元素，而且可以匹配多个选择符，我们来看看下面这个例子
<div> class为test </div> <div> id为test </div> <input type="button" value="显示内容" /> document.getElementById("btnShow").addEventListener("click",function(){ var elements = document.querySelectorAll("#test,.test"); for(var i = ,length = elements.length;i<length;i++){ alert(elements[i].textContent); } })
这段代码通过querySelectorAll，使用id选择器和class选择器选择了两个元素，并依次输出其内容。要注意两点：
（1）querySelectorAll也是通过深度优先搜索，搜索的元素顺序和选择器的顺序无关
（2）返回的是一个非即时的NodeList，也就是说结果不会随着文档树的变化而变化
兼容性问题：querySelector和querySelectorAll在ie8以下的浏览器不支持。
节点关系型api
在html文档中的每个节点之间的关系都可以看成是家谱关系，包含父子关系，兄弟关系等等，下面我们依次来看看每一种关系。
父关系型api