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:


DOM查找元素的方法总结的更多相关文章
- PHP提高in_array查找元素的方法
PHP提高in_array查找元素的方法<pre><?php$arr = array(); // 创建10万个元素的数组for($i=0; $i<100000; $i++){ ...
- DOM获取元素的方法
DOM:document object module 文档对象模型 DOM就是描述整个html页面中节点关系的图谱,如下图. 1,通过ID,获取页面中元素的方法:(上下文必须是document) do ...
- DOM查找元素
1. 查找元素5种: 1. 按id查找1个元素对象: var elem=document.getElementById("id值"); 何时使用:1. 元素必须有id 2. 精确查 ...
- DOM修改元素的方法总结
今天我们要谈谈DOM元素的修改(包括修改内容,属性,样式).修改内容的方法----3种:elem.innerHTML:获取或设置元素开始标签到结束标签之间的原始HTML代码片段:elem.textCo ...
- Google 开发console查找元素或方法
F12 后 在console中输入: $("#R")[0] 查找ID 为R的元素, 如需打印出元素属性值,则输入: console.dir($("#R")[0] ...
- iframe中 父页面和子页面查找元素的方法
从父页面中查找iframe子页面中对象的方法:JS: document.getElementById('iframe').contentWindow //查找iframe加载的页面的window对象 ...
- JavaScript, DOM查找元素
1.document.getElementById("id"); => IE8 及较低版本不区分ID的大小写 => IE7及较低版本中表单元素的name特性和ID都会被 ...
- JavaScript查找元素的方法
1.根据id获取元素 document.getElementById("id属性的值"); 2.根据标签名字获取元素 document.getElementsByTagName(& ...
- Javascript 查找元素
DOM定义了多种查找元素的方法,除了我们常用的getElementById(),还有getElementsByTagName()和getElementsByName().使用这几种方法方法我们可以查找 ...
随机推荐
- Python中的urlparse、urllib抓取和解析网页(一)
对搜索引擎.文件索引.文档转换.数据检索.站点备份或迁移等应用程序来说,经常用到对网页(即HTML文件)的解析处理.事实上,通过Python 语言提供的各种模块,我们无需借助Web服务器或者Web浏览 ...
- HZOI2019 B. 那一天她离我而去 最小环
题目大意:https://www.cnblogs.com/Juve/articles/11219089.html 那一天,我们......行啦,不要帮出题人脑补画面了,我们来正经的题解 我们发现我们可 ...
- HZOI2019 砍树 整除分块
题目链接:https://www.cnblogs.com/Juve/articles/11207540.html(密码你懂的)——————————>> 这题... 一开始想的二分,但此题不 ...
- 详解如何挑战4秒内百万级数据导入SQL Server(转)
对于大数据量的导入,是DBA们经常会碰到的问题,在这里我们讨论的是SQL Server环境下百万级数据量的导入,希望对大家有所帮助.51CTO编辑向您推荐<SQL Server入门到精通&g ...
- 深入浅出 Java Concurrency (10): 锁机制 part 5 闭锁 (CountDownLatch)[转]
此小节介绍几个与锁有关的有用工具. 闭锁(Latch) 闭锁(Latch):一种同步方法,可以延迟线程的进度直到线程到达某个终点状态.通俗的讲就是,一个闭锁相当于一扇大门,在大门打开之前所有线程都被阻 ...
- 使用ssh时报错:Service对象空指针异常
有可能是spring容器不能自动生成service对象,导致空指针异常,常见的情况可能是在service前面加@Service注释
- python-基础-面向对象2-异常-模块工厂模式
1 工厂模式和单例模式 1简单工厂模式 1.1.使用函数实现 # 定义伊兰特车类 class YilanteCar(object): # 定义车的方法 def move(self): print(&q ...
- PLSQLDeveloper链接报错 解决办法
PLSQL Developer 9.06.1665中文破解版 亲们,win7 64位系统现在还没有PLSQLDeveloper可以使用,但是怎么办呢.好的,下面教大家怎么在64位系统下安装PLSQLD ...
- Leetcode437Path Sum III路径总和3
给定一个二叉树,它的每个结点都存放着一个整数值. 找出路径和等于给定数值的路径总数. 路径不需要从根节点开始,也不需要在叶子节点结束,但是路径方向必须是向下的(只能从父节点到子节点). 二叉树不超过1 ...
- c++新特性实验(2)类型特性
1. 基本类型 1.1 增加 long long long long int signed long long signed long long int unsigned long long unsi ...