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().使用这几种方法方法我们可以查找 ...
随机推荐
- tinyint(1)遇到的坑
一. Mysql查询的boolean结果将输出为0或者1. 比如: select 1=1; 其输出结果为1. 二. 使用一套中间件对kafka消息进行解析为mysql 语句,其中遇到如下的问题, 目标 ...
- LOJ#3119 随机立方体
解:极大值至少为1.我们尝试把最大那个数的影响去掉. 最大那个数所在的一层(指一个三维十字架)都是不可能成为最大值的. 考虑容斥.我们试图求除了最大值以外至少有k个极大值的概率. 我们钦定某k个位置是 ...
- Django项目:CRM(客户关系管理系统)--64--54PerfectCRM实现CRM客户报名链接
# kingadmin.py # ————————04PerfectCRM实现King_admin注册功能———————— from crm import models #print("ki ...
- IT外包概要
IT外包 前两天和朋友聊起这个外包的问题,就顺便给他说了一下,自己也整理了一下,发出来,方便更多的人. 如果有说的不准确的地方欢迎大家补充分享. 大致分两种: 项目外包, 人力外包. 简而言之:项目外 ...
- 状态模式(State)(开关灯,状态实例为类,不同状态,不同行为)
(当一个对象内在状态改变时允许其改变行为,这个对象看起来像改变了其类.) 在软件开发过程中,很多对象也会像水和信号灯一样具有多种状态,这些状态在某些情况下能够相互转换,而且对象在不同的状态下也将有不同 ...
- 粗浅看 Tomcat系统架构分析
原文出处: 吴士龙 http://www.importnew.com/21112.html Tomcat的结构很复杂,但是Tomcat也非常的模块化,找到了Tomcat最核心的模块,就抓住了Tomca ...
- Openlayers3 WebGis二次开发包实例
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs& ...
- 数据库--sql语句
数据库的操作语句总共四大类:增insert into 删delete 改update 查select; 增:INSERT INTO `表名`(`字段名`,`字段名`) `VALUES`('值', ...
- nfs网络共享服务基础
nfs原理 1.开启RPC服务 2.NFS向RPC服务注册启动的端口 3.用户向RPC询问NFS服务的端口 4.RPC返回端口给客户端 5.客户端通过获得的端口与NFS服务器进行数据传输 实验步骤 一 ...
- https方式nginx 代理tomcat访问不带www的域名301重定向跳转到www的域名帮助seo集中权重
比如我要把 http://gucanhui.com http://www.gucanhui.com 跳转到https://www.gucanhui.com 用F12的network可以看到状态码301 ...