元素遍历

为了方便我们使用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)—— 元素遍历的更多相关文章

  1. Javascript高级编程学习笔记(53)—— DOM2和DOM3(5)遍历

    遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测 ...

  2. Javascript高级编程学习笔记(52)—— DOM2和DOM3(4)元素大小

    在日常实践中,我们在使用JS的时候难免会需要获取元素的大小及位置 首先要声明的是,这一部分的内容并不属于DOM2样式规范,因为DOM中并没有对我们如何获取元素大小的相关信息做出规范 偏移量 偏移量及元 ...

  3. Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化

    DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...

  4. Javascript高级编程学习笔记(37)—— DOM(3)Element

    Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 ...

  5. Javascript高级编程学习笔记(35)—— DOM(1)节点

    DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...

  6. Javascript高级编程学习笔记(96)—— WebGL(2) 类型化视图

    类型化视图 类型化视图一般也被认为是一种类型化数组. 因为其元素必须是某种特定的数据类型,类型化视图都继承自 Dataview Int8Array: 表示8位二补整数(即二进制补数) Uint8Arr ...

  7. Javascript高级编程学习笔记(1)—— JS简介

    此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...

  8. Javascript高级编程学习笔记(57)—— 事件(1)事件流

    事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...

  9. Javascript高级编程学习笔记(79)—— 表单(7)选择框脚本

    选择框脚本 选择框由<option>和<select>元素创建,为了方便选择框的交互,除了提供表单字段的公有方法之外 HTMLSelectElement 类型还提供下列特有的属 ...

随机推荐

  1. mumu模拟机安装证书

    1. 先设置锁屏密码 2. 证书.crt才可以直接安装..der和.cer的都不可以.

  2. php操作redis数据库方法总结

    一.安装php_redis扩展,用以操作redis http://pecl.php.net/package/redis 选择自已系统php版本对应的扩展. 二.redis连接与验证 <?php ...

  3. 将python文件打包成exe可运行文件

    https://blog.csdn.net/douzhenwen/article/details/78886244

  4. Ubuntu16.04 静态IP设置

    为VMware虚拟机内安装的Ubuntu 16.04设置静态IP地址NAT方式 1.安装环境 VMware 12 Ubuntu 16.04 x86_64 2.在VMware中,配置网络环境 VMwar ...

  5. Redis5种常用的数据结构

    一.数据结构 五种常用的数据结构:string.hash.list.set.zse,以及三种不常用的:hyperloglog.geospatial.streams. 二.常用数据结构的使用 1.Str ...

  6. MAC使用超级终端

    其实很简单. 先用ls看看/dev/tty.*哪个是具体的串口,我这里使用的edison的板子,所以插到macos上后可以看到的设备节点为: 只需要使用screen 命令即可,具体的命令格式如下: s ...

  7. 《笨方法学Python》加分题20

    加分练习通读脚本,在每一行之前加注解,以理解脚本里发生的事情.每次 print_a_line 运行时,你都传递了一个叫 current_line 的变量,在每次调用时,打印出 current_line ...

  8. 《Java并发编程的艺术》并发编程的挑战(一)

    并发编程的挑战 并发编程的初衷是让程序运行的更快,但是更多的使用多线程真的会让程序变快吗? 1.线程上下文切换 关于线程上下文切换 多个线程在一个处理器里并不是同时进行的,而是非常快速地在线程之间进行 ...

  9. JavaSE 集合类TreeSet存储自定义对象

    文章目录 一.自动排序功能测试 二.对自定义类的自动排序 一.自动排序功能测试 public class TreeSetDemo { public static void main(String ar ...

  10. 20155312 张竞予 Exp9 Web安全基础

    Exp9 Web安全基础 目录 基础问题回答 (1)SQL注入攻击原理,如何防御 (2)XSS攻击的原理,如何防御 (3)CSRF攻击原理,如何防御 实践过程记录 WebGoat准备工作 1.XSS攻 ...