选取文档元素的方法总结

在讲解如何选取文档元素之前，先普及一下什么是文档节点：

HTML文档的每个节点都表示一个Node对象，节点树形结构的根部是Document节点，代表整个文档，代表HTML元素的节点是Element节点，代表文本的节点是Text节点；Document、Element、Text类都是Node类的子类；（Comment节点类型代表注释节点，Attr节点类型代表属性）

查询一个或多个文档元素的方法:

（文档Document对象和元素Element对象均定义了以下方法，即也可以在一个元素Element上选择它的子元素）

一、用指定的id属性：document.getElementById('idName');方法返回实时的匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。

自定义一个工具函数同时选取多个元素：

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

六、elementFromPoint()：方法返回位于页面指定位置的元素。

var element = document.elementFromPoint(x, y);

上面代码中，elementFromPoint方法的参数x和y，分别是相对于当前窗口左上角的横坐标和纵坐标，单位是CSS像素。elementFromPoint方法返回位于这个位置的DOM元素，如果该元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值），则返回null。

posted on 2016-08-04 22:40 SuriFuture 阅读(1118) 评论(0) 编辑收藏举报

刷新页面返回顶部

选取文档元素的方法总结

导航

公告