Javascript高级编程学习笔记(47)—— 元素遍历
元素遍历
为了方便我们使用JS来遍历文档中的元素,W3C在原来的基础之上提出了 Element Traversal 规范
这一规范主要就是为了统一浏览器对文档中节点解析不一致的问题。
比如在某些浏览器中元素之间的空格会被解析为文本节点
而有些浏览器的的行为又有所区别,所以为了弱化这些差异,JS就为DOM元素提供了以下属性:
1.、childElementCount:返回子元素的个数,不包括文本、注释节点
2、firstElementChild:指向第一个子元素(firstChild返回第一个节点)
3、lastElementChild:指向最后一个子元素(lastChild指向最后一个节点)
4、previousElementSibling:指向前一个同级元素
5、nextElementSibling:指向后一个同级元素
当我们不使用 Element Traversal 来遍历某个元素的子节点
var child = element.firstChild; while(child != element.lastChild){
if(child.nodeType === 1){// 判断当前节点是否为元素节点
// code
}
child = child.nextSibling;
}
使用Element Traversal
var child = element.firstElementChild; while(child != element.lastElementChild){
// code
child = child.nextElementSibling;
}
Javascript高级编程学习笔记(47)—— 元素遍历的更多相关文章
- Javascript高级编程学习笔记(53)—— DOM2和DOM3(5)遍历
遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测 ...
- Javascript高级编程学习笔记(52)—— DOM2和DOM3(4)元素大小
在日常实践中,我们在使用JS的时候难免会需要获取元素的大小及位置 首先要声明的是,这一部分的内容并不属于DOM2样式规范,因为DOM中并没有对我们如何获取元素大小的相关信息做出规范 偏移量 偏移量及元 ...
- Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化
DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...
- Javascript高级编程学习笔记(37)—— DOM(3)Element
Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 ...
- Javascript高级编程学习笔记(35)—— DOM(1)节点
DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...
- Javascript高级编程学习笔记(96)—— WebGL(2) 类型化视图
类型化视图 类型化视图一般也被认为是一种类型化数组. 因为其元素必须是某种特定的数据类型,类型化视图都继承自 Dataview Int8Array: 表示8位二补整数(即二进制补数) Uint8Arr ...
- Javascript高级编程学习笔记(1)—— JS简介
此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...
- Javascript高级编程学习笔记(57)—— 事件(1)事件流
事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...
- Javascript高级编程学习笔记(79)—— 表单(7)选择框脚本
选择框脚本 选择框由<option>和<select>元素创建,为了方便选择框的交互,除了提供表单字段的公有方法之外 HTMLSelectElement 类型还提供下列特有的属 ...
随机推荐
- mumu模拟机安装证书
1. 先设置锁屏密码 2. 证书.crt才可以直接安装..der和.cer的都不可以.
- php操作redis数据库方法总结
一.安装php_redis扩展,用以操作redis http://pecl.php.net/package/redis 选择自已系统php版本对应的扩展. 二.redis连接与验证 <?php ...
- 将python文件打包成exe可运行文件
https://blog.csdn.net/douzhenwen/article/details/78886244
- Ubuntu16.04 静态IP设置
为VMware虚拟机内安装的Ubuntu 16.04设置静态IP地址NAT方式 1.安装环境 VMware 12 Ubuntu 16.04 x86_64 2.在VMware中,配置网络环境 VMwar ...
- Redis5种常用的数据结构
一.数据结构 五种常用的数据结构:string.hash.list.set.zse,以及三种不常用的:hyperloglog.geospatial.streams. 二.常用数据结构的使用 1.Str ...
- MAC使用超级终端
其实很简单. 先用ls看看/dev/tty.*哪个是具体的串口,我这里使用的edison的板子,所以插到macos上后可以看到的设备节点为: 只需要使用screen 命令即可,具体的命令格式如下: s ...
- 《笨方法学Python》加分题20
加分练习通读脚本,在每一行之前加注解,以理解脚本里发生的事情.每次 print_a_line 运行时,你都传递了一个叫 current_line 的变量,在每次调用时,打印出 current_line ...
- 《Java并发编程的艺术》并发编程的挑战(一)
并发编程的挑战 并发编程的初衷是让程序运行的更快,但是更多的使用多线程真的会让程序变快吗? 1.线程上下文切换 关于线程上下文切换 多个线程在一个处理器里并不是同时进行的,而是非常快速地在线程之间进行 ...
- JavaSE 集合类TreeSet存储自定义对象
文章目录 一.自动排序功能测试 二.对自定义类的自动排序 一.自动排序功能测试 public class TreeSetDemo { public static void main(String ar ...
- 20155312 张竞予 Exp9 Web安全基础
Exp9 Web安全基础 目录 基础问题回答 (1)SQL注入攻击原理,如何防御 (2)XSS攻击的原理,如何防御 (3)CSRF攻击原理,如何防御 实践过程记录 WebGoat准备工作 1.XSS攻 ...