DOM-BOM-EVENT(2)
2.获取DOM元素的方法
2.1.getElement系列
documentElementById 通过id获取元素
<div id="box"></div>
<script>
var oDiv = document.getElementById("box)
</script>
documentElementsByClassName 通过类名称获取元素
<div class="box"></div>
<script>
var oDiv = document.getElementsByClassName("box)
</script>
documentElementsByTagName 通过标签名称获取元素
var aLi = document.getElementsByTagName("li")
在某个范围內获取元素
<div id="wrap">
<div></div>
<div></div>
<div></div>
</div>
<script>
//先获取到外层div
var oWrap = document.getElementById("wrap")
//再获取div下的子div
var aDiv = oWrap.document.getElementsByTagName("div")
</script>
2.2.querySelector系列
querySelector 获取符合条件的一个
<div id="wrap">
<div>1111</div>
<div>1112</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
</div>
<script>
var aDiv = document.querySelector("#wrap")
console.log(aDiv)
</script>
querySelecttorAll 获取符合条件的所有元素,返回一个集合
<script>
var aDiv = document.querySelectorAll("#wrap div")
console.log(aDiv)
</script>
2.3.getElement系列和querySelector系列的区别
规范不同 querySelectorAll 属于 W3C 中的 Selectors API 规范 [1]。而 getElementsBy 系列则属于 W3C 的 DOM 规范 [2]。
执行效率不同 getElement系列执行效率更高,测试地址:https://jsperf.com/getelementsby-vs-queryselectorall/7
螺钉课堂视频课程地址:http://edu.nodeing.com
DOM-BOM-EVENT(2)的更多相关文章
- BOM基础(四)
最近写的文章感觉内容不像之前那么充实,内容可能也有点杂.对于DOM,和BOM来说,要理解是不难的,难的是做的时候.要自己想的到,而且,对于目前阶段来说,BOM还存在着很大的兼容性问题,最主要就是要兼容 ...
- DOM 事件深入浅出(二)
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
- JavaScript DOM动态创建(声明)Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
- c#中的delegate(委托)和event(事件)
c#中的delegate(委托)和event(事件) 一.delegate是什么东西? 完全可以把delegate理解成C中的函数指针,它允许你传递一个类A的方法m给另一个类B的对象,使得类B的对象能 ...
- js的DOM操作整理(整理)
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- DOM学习笔记(二)对象方法与属性
所有 HTML 元素被定义为对象,而编程接口(对象的访问)则是对象方法和对象属性. 事实上,常用的只用window对象及其子对象document对象,以及事件Event对象. Window 对象 Wi ...
- DOM之事件(一)
DOM事件,就是浏览器或用户针对页面可以做出的某种动作,我们称这些动作为DOM事件.它是用户和页面交互的核心.当动作发生(事件触发)时,我们可以为其绑定一个或多个事件处理程序(函数),来完成我们想要实 ...
- DOM的概念(1)
什么是DOM? 通过 JavaScript,您可以重构整个HTML文档.您可以添加.移除.改变或重排页面上的项目.要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口 ...
- JavaScript DOM学习总结(一)
DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法. W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...
随机推荐
- Java实现 LeetCode 701 二叉搜索树中的插入操作(遍历树)
701. 二叉搜索树中的插入操作 给定二叉搜索树(BST)的根节点和要插入树中的值,将值插入二叉搜索树. 返回插入后二叉搜索树的根节点. 保证原始二叉搜索树中不存在新值. 注意,可能存在多种有效的插入 ...
- Java实现 LeetCode 552 学生出勤记录 II(数学转换?还是动态规划?)
552. 学生出勤记录 II 给定一个正整数 n,返回长度为 n 的所有可被视为可奖励的出勤记录的数量. 答案可能非常大,你只需返回结果mod 109 + 7的值. 学生出勤记录是只包含以下三个字符的 ...
- Java实现 蓝桥杯VIP 算法训练 数列
问题描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,13,- (该序列实际上就是 ...
- Java实现最大连续子数组和
1 问题描述 给定一个整数数组,数组里可能有正数.负数和零.数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和.求所有子数组的和的最大值.例如,如果输入的数组为{1,-2,3,10,-4, ...
- java实现输入信用卡号码
/* 当你输入信用卡号码的时候,有没有担心输错了而造成损失呢?其实可以不必这么担心, 因为并不是一个随便的信用卡号码都是合法的,它必须通过 Luhn 算法来验证通过. 该校验的过程: 1.从卡号最后一 ...
- Java实现第十届蓝桥杯质数
试题 D: 质数 本题总分:10 分 [问题描述] 我们知道第一个质数是 2.第二个质数是 3.第三个质数是 5--请你计算 第 2019 个质数是多少? [答案提交] 这是一道结果填空的题,你只需要 ...
- 温故知新-Mysql索引结构&页&聚集索引&非聚集索
文章目录 摘要 索引 索引概述 索引优势劣势 索引结构 BTREE 结构 B+TREE 结构 页 索引分类 索引语法 索引设计原则 聚触索引 & 非聚触索引 你的鼓励也是我创作的动力 Post ...
- Cypress系列(16)- 查找页面元素的基本方法
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前端页面代码 后面写的 Cypress ...
- mac 排查被占端口
Last login: Wed Sep :: on ttys000 sam:~ sam$ sudo lsof -i : Password: COMMAND PID USER FD TYPE DEVIC ...
- 用python复制文件夹
用python复制文件 1. 根据文件夹的名称复制 需要复制的文件夹编号文件中,每一行表示一个编号,如下所示: > cat id.txt 1 2 3 ... > 目标文件的目录结构树如下所 ...