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)的更多相关文章

  1. BOM基础(四)

    最近写的文章感觉内容不像之前那么充实,内容可能也有点杂.对于DOM,和BOM来说,要理解是不难的,难的是做的时候.要自己想的到,而且,对于目前阶段来说,BOM还存在着很大的兼容性问题,最主要就是要兼容 ...

  2. DOM 事件深入浅出(二)

    在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...

  3. JavaScript DOM动态创建(声明)Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  4. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  5. c#中的delegate(委托)和event(事件)

    c#中的delegate(委托)和event(事件) 一.delegate是什么东西? 完全可以把delegate理解成C中的函数指针,它允许你传递一个类A的方法m给另一个类B的对象,使得类B的对象能 ...

  6. js的DOM操作整理(整理)

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

  7. DOM学习笔记(二)对象方法与属性

    所有 HTML 元素被定义为对象,而编程接口(对象的访问)则是对象方法和对象属性. 事实上,常用的只用window对象及其子对象document对象,以及事件Event对象. Window 对象 Wi ...

  8. DOM之事件(一)

    DOM事件,就是浏览器或用户针对页面可以做出的某种动作,我们称这些动作为DOM事件.它是用户和页面交互的核心.当动作发生(事件触发)时,我们可以为其绑定一个或多个事件处理程序(函数),来完成我们想要实 ...

  9. DOM的概念(1)

    什么是DOM? 通过 JavaScript,您可以重构整个HTML文档.您可以添加.移除.改变或重排页面上的项目.要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口 ...

  10. JavaScript DOM学习总结(一)

    DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法.   W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...

随机推荐

  1. 【Linux】CentOS7安装tomcat8.5.45,这方法也太简单了吧!

    1.下载tomcat https://tomcat.apache.org/download-80.cgi 选择tar.gz.下载完大概9495kb大小的压缩包 2.将文件从Windows复制到Cent ...

  2. Java实现统计方案

    统计方案 题目描述 在一无限大的二维平面中,我们做如下假设: 1.每次只能移动一格: 2.不能向后走(假设你的目的地是"向上",那么你可以向左走,可以向右走,也可以向上走,但是不可 ...

  3. Java实现 LeetCode 391 完美矩形

    391. 完美矩形 我们有 N 个与坐标轴对齐的矩形, 其中 N > 0, 判断它们是否能精确地覆盖一个矩形区域. 每个矩形用左下角的点和右上角的点的坐标来表示.例如, 一个单位正方形可以表示为 ...

  4. Java中构造方法的详细介绍

    构造方法是一个特殊的方法 它会在实例化对象时自动调用 构造方法的定义 必须同时满足下面的三个条件 方法名与类名相同 方法名前面没有返回值类型的声明 在方法中不能使用return语句返回值 class ...

  5. Java实现 LeetCode 28 实现strStr()

    28. 实现 strStr() 实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 ...

  6. Java实现 基础算法 百元买百鸡

    public class 百元买百鸡 { public static void main(String[] args) { //母鸡 for (int i = 1; i < 33; i++) { ...

  7. java实现 洛谷 P1014 Cantor表

    题目描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 - 2/1 2/2 2/3 2/4 - ...

  8. Java实现 黑洞数

    任意一个5位数,比如:34256,把它的各位数字打乱,重新排列,可以得到一个最大的数:65432,一个最小的数23456.求这两个数字的差,得:41976,把这个数字再次重复上述过程(如果不足5位,则 ...

  9. java代码(4)---guava之Immutable(不可变)集合

    Immutable(不可变)集合   一,概述 guava是google的一个库,弥补了java语音的很多方面的不足,很多在java8中已有实现,暂时不展开,Collections是jdk提供的一个工 ...

  10. Java重置Mysql主键自增长值

    MySql 主键自增重置器(统一处理多个表) resetAutoincrement 是一款基于 Java 开发的程序,其功能为重置 mysql 数据库表的主键自增的值为最近的一个. 介绍 开发背景主要 ...