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().使用这几种方法方法我们可以查找 ...
随机推荐
- Android 开发 防止按键连续点击
前言 按键防止连续点击是任何一个项目都要考虑的功能.下面我们将介绍几种防止按键连续点击的方法 用工具类实现 /** *@content:按键延时工具类,用于防止按键连点 *@time:2019-5-1 ...
- 方法的重写(override)两同两小一大原则:
方法名相同,参数类型相同 子类返回类型小于等于父类方法返回类型, 子类抛出异常小于等于父类方法抛出异常, 子类访问权限大于等于父类方法访问权限.
- Django项目:CRM(客户关系管理系统)--78--68PerfectCRM实现CRM业务流程(bpm)报名缴费分页
# pagination.py # ————————68PerfectCRM实现CRM业务流程(bpm)报名缴费分页———————— from django.utils.safestring impo ...
- 矩阵快速幂3 k*n铺方格
#include <iostream> #include <cstdlib> #include <cstring> #include <queue> # ...
- spring cloud深入学习(十一)-----服务网关zuul
前面的文章我们介绍了,Eureka用于服务的注册于发现,Feign支持服务的调用以及均衡负载,Hystrix处理服务的熔断防止故障扩散,Spring Cloud Config服务集群配置中心,似乎一个 ...
- Java内功修炼系列一代理模式
代理模式是JAVA设计模式之一,网上设计模式相关的博文铺天盖地,参考它们有助于自己理解,但是所谓“尽信书不如无书”,在参考的同时也要思考其正确性,写博客也是为了记录自己理解知识点的思路历程和心路历程, ...
- opencv4 java投影
工程下载 https://download.csdn.net/download/qq_16596909/11505994 比较适合与验证码的处理,毕竟八邻域降噪不能消除比较大的噪点,为了尽量减少噪点对 ...
- 015-WebDriver API
1. 从定位元素开始 8种元素定位方法 id find_element_by_id( ) name find_element_by_name( ) tag find_element_by_tag_na ...
- 享元模式(Flyweight、FlyweightFactory)(围棋棋子共享)
(使用共享对象可有效地支持大量的细粒度的对象.) 假设开发一个围棋程序,围棋程序的围棋的棋子包含了颜色.大小.位置等信息.在定义一个棋盘容器来存放这些棋子. 我们可以发现,棋盘的成员变量包含了一个棋子 ...
- 2018-2-13-解决-vs-出现Error-MC3000-给定编码中的字符无效
title author date CreateTime categories 解决 vs 出现Error MC3000 给定编码中的字符无效 lindexi 2018-2-13 17:23:3 +0 ...