在讲解如何选取文档元素之前,先普及一下什么是文档节点:
HTML文档的每个节点都表示一个Node对象,节点树形结构的根部是Document节点,代表整个文档,代表HTML元素的节点是Element节点,代表文本的节点是Text节点;Document、Element、Text类都是Node类的子类;(Comment节点类型代表注释节点,Attr节点类型代表属性)
查询一个或多个文档元素的方法:
(文档Document对象和元素Element对象均定义了以下方法,即也可以在一个元素Element上选择它的子元素)
一、用指定的id属性:document.getElementById(‘idName‘);
自定义一个工具函数同时选取多个元素:
function getElements(‘id1‘,‘id2‘,‘id3‘,......){
var elements = {};
for(var i = 0,len = arguments.length;i<len;i++){
var id = arguments[i];
var elt = document.getElementById(id);
if(elt == null){throw new Error(‘No element with id: ‘+id);}
elements[id] = elt;
}
return elements;
}
二、用指定的name属性:getElementsByName(‘name‘);返回一个包含若干Element对象的只读类数组对象NodeList对象,它同时也匹配具有和name同名的id属性的元素,所以不要将同一个字符串同时用于id属性和name属性;
虽然在用一个字符串给一个元素的id属性或name属性赋值时,这个字符串会自动的成为当前窗口对象的一个全局属性,即可以直接通过该属性名调用对应的元素,但最好显示的调用getElementsByName()来选取他们,因为该变量在日后可能会失效(当给窗口对象定义同名属性时)
三、用指定的标签名:getElementsByTagName(‘tagname‘);同样返回一个NodeList对象,该类数组对象中的元素是按所有该标签在文档中出现的顺序排序的,可通过索引来选取指定元素;
该方法不区分标签的大小写;
可使用‘*‘通配符来选取文档的所有元素;
可在指定Element对象上调用该方法,来选取它的子元素;
HTMLDocument类还指定了一些快捷属性,如:images、forms、links、anchors、embeds、plugins、scripts等,他们都指定HTMLCollection对象,它也是一个类数组对象,可以这样来选取他们的集合中的某一个元素document.forms[‘idname‘];或document.images[0];
HTMLDocument类还指定body、head属性,特指<body>和<head>元素,还有documentElement属性指文档的根元素<html>
NodeList和HTMLCollection对象通常是实时的,即当文档变化时它们所包含的元素列表能随之改变;最好使用for循环来遍历一个NodeList或HTMLCollection对象,而for..in循环会遍历到他们的length属性;
四、用指定的class属性:getElementsByClassName();基于其class属性值中的标识符来选取成组的文档元素,他也返回一个实时的NodeList对象
五、用指定的CSS选择器来匹配:(返回的是静态的NodeList对象)
querySelectorAll()根据一个包含CSS选择器的字符串,返回一个表示当前文档中匹配选择器的所有元素的NodeList对象,但该NodeList对象不是实时的,它只包含调用时刻所匹配到的元素,并不更新后续文档的变化,若找不到匹配则返回空的NodeList对象;
querySelector()只返回第一个匹配的元素对象(以文档顺序),若匹配不到则返回null
querySelector()、querySelectorAll()在元素Element对象上也有定义,在元素上调用它们时,先仍然在整个文档中匹配,然后再过滤出结果集以便它只包含该元素的后代元素;
querySelector()、querySelectorAll()在大多情况下不匹配伪元素,如:first-line :first-letter :link :visited