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. Java实现 LeetCode 701 二叉搜索树中的插入操作(遍历树)

    701. 二叉搜索树中的插入操作 给定二叉搜索树(BST)的根节点和要插入树中的值,将值插入二叉搜索树. 返回插入后二叉搜索树的根节点. 保证原始二叉搜索树中不存在新值. 注意,可能存在多种有效的插入 ...

  2. Java实现 LeetCode 552 学生出勤记录 II(数学转换?还是动态规划?)

    552. 学生出勤记录 II 给定一个正整数 n,返回长度为 n 的所有可被视为可奖励的出勤记录的数量. 答案可能非常大,你只需返回结果mod 109 + 7的值. 学生出勤记录是只包含以下三个字符的 ...

  3. Java实现 蓝桥杯VIP 算法训练 数列

    问题描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,13,- (该序列实际上就是 ...

  4. Java实现最大连续子数组和

    1 问题描述 给定一个整数数组,数组里可能有正数.负数和零.数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和.求所有子数组的和的最大值.例如,如果输入的数组为{1,-2,3,10,-4, ...

  5. java实现输入信用卡号码

    /* 当你输入信用卡号码的时候,有没有担心输错了而造成损失呢?其实可以不必这么担心, 因为并不是一个随便的信用卡号码都是合法的,它必须通过 Luhn 算法来验证通过. 该校验的过程: 1.从卡号最后一 ...

  6. Java实现第十届蓝桥杯质数

    试题 D: 质数 本题总分:10 分 [问题描述] 我们知道第一个质数是 2.第二个质数是 3.第三个质数是 5--请你计算 第 2019 个质数是多少? [答案提交] 这是一道结果填空的题,你只需要 ...

  7. 温故知新-Mysql索引结构&页&聚集索引&非聚集索

    文章目录 摘要 索引 索引概述 索引优势劣势 索引结构 BTREE 结构 B+TREE 结构 页 索引分类 索引语法 索引设计原则 聚触索引 & 非聚触索引 你的鼓励也是我创作的动力 Post ...

  8. Cypress系列(16)- 查找页面元素的基本方法

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前端页面代码 后面写的 Cypress ...

  9. mac 排查被占端口

    Last login: Wed Sep :: on ttys000 sam:~ sam$ sudo lsof -i : Password: COMMAND PID USER FD TYPE DEVIC ...

  10. 用python复制文件夹

    用python复制文件 1. 根据文件夹的名称复制 需要复制的文件夹编号文件中,每一行表示一个编号,如下所示: > cat id.txt 1 2 3 ... > 目标文件的目录结构树如下所 ...