• DOM查找元素的方法总结


    按HTML查找:
    优点:范围可大可小,可设置条件;
    包括五种方式:
    1.按id查找;
    2.按标签名查找:var elems = parent.getElementsByTagName('');
    3.按name属性查找:要回传给服务器的元素需要name属性,专门找表单中有name属性的表单元素;---了解即可;
    4.按class属性查找;
    var elems = parent.getElementsByClassName('class');
    强调:1.可在任意父元素上调用;2,可返回多个元素的组成的集合;3,不要求全部匹配,只要包含即可;
    缺点:每次只能按一个条件查找,如果条件复杂的话,就无法一句话获得想要的元素;
    5,这是重点强调的选择器,按选择器查找:用的比较多,比较犀利
       5.1 只找一个元素:var elem = parent.querySelector('selector");
       5.2 找多个元素:var elems = parent.querySelectorAll('selector');

    那么如何选择这些查找工具呢?

    从使用的难易程度:

    1.当条件复杂时:

                   按选择器查找--简单;按HMTL查找--繁琐;
    2.返回值:

                getElementsByTagName()返回多个元素的动态集合;     

                什么是动态集合:不实际存储对象的属性值,每次访问,都要重新查找DOM树;

                querySelectorAll()返回多个元素的非动态集合;非动态集合---实际存储对象的所有值,即使返回反复访问集合,也不会导致反复查找DOM树。
    3.单次查找效率:

               按HTML查找--效率高;按选择器找--效率低;

    在这里,我们重点介绍下querySelector()和querySlectorAll(),这两个方法支持CSS查询。可以通过document和element类型的实例来调用他们,目前完全支持他们的浏览器有:

    而querySelectorAll:

  • 相关阅读:
    zookeeper与activemq最新存储replicatedLevelDB整合
    MySQL分表的3种方法
    mycat 从入门到放弃 (转)
    centos 7 忘记密码
    java内存溢出的情况解决方法
    跨域问题的产生及解决方法
    一次jvm调优过程
    2019年总结
    Jenkinsfile与Json的转换
    DevOps平台
  • 原文地址:https://www.cnblogs.com/xuzhudong/p/6624325.html
Copyright © 2020-2023  润新知