选取文档元素的方法总结

在讲解如何选取文档元素之前,先普及一下什么是文档节点:
        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  阅读(1119)  评论(0编辑  收藏  举报

导航