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定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...
随机推荐
- 【Linux】CentOS7安装tomcat8.5.45,这方法也太简单了吧!
1.下载tomcat https://tomcat.apache.org/download-80.cgi 选择tar.gz.下载完大概9495kb大小的压缩包 2.将文件从Windows复制到Cent ...
- Java实现统计方案
统计方案 题目描述 在一无限大的二维平面中,我们做如下假设: 1.每次只能移动一格: 2.不能向后走(假设你的目的地是"向上",那么你可以向左走,可以向右走,也可以向上走,但是不可 ...
- Java实现 LeetCode 391 完美矩形
391. 完美矩形 我们有 N 个与坐标轴对齐的矩形, 其中 N > 0, 判断它们是否能精确地覆盖一个矩形区域. 每个矩形用左下角的点和右上角的点的坐标来表示.例如, 一个单位正方形可以表示为 ...
- Java中构造方法的详细介绍
构造方法是一个特殊的方法 它会在实例化对象时自动调用 构造方法的定义 必须同时满足下面的三个条件 方法名与类名相同 方法名前面没有返回值类型的声明 在方法中不能使用return语句返回值 class ...
- Java实现 LeetCode 28 实现strStr()
28. 实现 strStr() 实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 ...
- Java实现 基础算法 百元买百鸡
public class 百元买百鸡 { public static void main(String[] args) { //母鸡 for (int i = 1; i < 33; i++) { ...
- java实现 洛谷 P1014 Cantor表
题目描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 - 2/1 2/2 2/3 2/4 - ...
- Java实现 黑洞数
任意一个5位数,比如:34256,把它的各位数字打乱,重新排列,可以得到一个最大的数:65432,一个最小的数23456.求这两个数字的差,得:41976,把这个数字再次重复上述过程(如果不足5位,则 ...
- java代码(4)---guava之Immutable(不可变)集合
Immutable(不可变)集合 一,概述 guava是google的一个库,弥补了java语音的很多方面的不足,很多在java8中已有实现,暂时不展开,Collections是jdk提供的一个工 ...
- Java重置Mysql主键自增长值
MySql 主键自增重置器(统一处理多个表) resetAutoincrement 是一款基于 Java 开发的程序,其功能为重置 mysql 数据库表的主键自增的值为最近的一个. 介绍 开发背景主要 ...