这个接口很简单,根据元素id返回元素,返回值是Element类型,如果不存在该元素,则返回null。 使用这个接口有几点要注意:
这个接口根据元素标签名获取元素,返回一个即时的HTMLCollection类型,什么是即时的HTMLCollection类型呢?
这段代码中有两个按钮,一个按钮是显示HTMLCollection元素的个数,另一个按钮可以新增一个div标签到文档中。前面提到HTMLCollcetion元素是即时的表示该集合是随时变化的,也就是是文档中有几个div,它会随时进行变化,当我们新增一个div后,再访问HTMLCollection时,就会包含这个新增的div。 使用document.getElementsByTagName这个方法有几点要注意:
getElementsByName主要是通过指定的name属性来获取元素,它返回一个即时的NodeList对象。 使用这个接口主要要注意几点:
Hello Oaoafly
这个API是根据元素的class返回一个即时的HTMLCollection,用法如下
var elements = document.getElementsByClassName(names);
这个接口有下面几点要注意:
例如
var elements = document.getElementsByClassName("test1 test2");
这两个api很相似,通过css选择器来查找元素,注意选择器要符合CSS选择器的规则。 首先来介绍一下document.querySelector。 document.querySelector返回第一个匹配的元素,如果没有匹配的元素,则返回null。 注意,由于返回的是第一个匹配的元素,这个api使用的深度优先搜索来获取元素。
这个例子很简单,就是两个class都包含“test”的元素,一个在文档树的前面,但是它在第三级,另一个在文档树的后面,但它在第一级,通过querySelector获取元素时,它通过深度优先搜索,拿到文档树前面第三级的Oaoafly元素。
document.querySelectorAll的不同之处在于它返回的是所有匹配的元素,而且可以匹配多个选择符
这段代码通过querySelectorAll,使用id选择器和class选择器选择了两个元素,并依次输出其内容。要注意两点:
兼容性问题:querySelector和querySelectorAll在ie8以下的浏览器不支持。
参考文章