• 选取文档元素的方法总结


    在讲解如何选取文档元素之前,先普及一下什么是文档节点:
            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。
  • 相关阅读:
    jQuery火箭图标返回顶部代码
    易购商城首页
    使用HTML5验证博客园用户注册页面
    正则表达式相关内容和用法
    表单
    jQuery制作图片提示效果
    jQuery遍历
    用js制作论坛发贴
    使用jQuery操作DOM
    京东常见问题分类页面
  • 原文地址:https://www.cnblogs.com/susufufu/p/5738673.html
Copyright © 2020-2023  润新知