【Web APIs】JavaScript 节点操作 ③ ( 子节点操作 | firstChild 属性 | firstElementChild 属性 | children[0] 属性 )
文章目录
- 一、JavaScript 子节点操作
-
- 1、获取子节点需求
- 2、firstChild 和 lastChild 属性 ( 不推荐 - 基于所有类型节点 )
- 3、firstElementChild 和 lastElementChild 属性 ( 不推荐 - 兼容性问题 )
- 4、children[0] 和 children[element.children.length - 1] 属性 ( 推荐 - 实际用法 )
- 5、完整代码示例
在 【Web APIs】JavaScript 节点操作 ① ( DOM 方式获取标签元素的弊端 | 节点简介 | DOM 节点概述 | 节点基本属性 - 节点类型、节点名称、节点值 ) 博客 中 , 介绍了 传统 DOM 方式获取节点的方式 及其 弊端 ( 调用繁琐、逻辑性差 ) , 并对 节点的基本属性 ( 节点类型、节点名称、节点值 ) 进行了简要介绍 ;
在 【Web APIs】JavaScript 节点操作 ② ( DOM 节点层级 | 利用节点间的层次关系获取元素 | 遍历节点层级 | 获取 父节点 / 子节点 代码示例 ) 博客 中 , 介绍了 利用 节点间的层次关系获取元素 , 通过 parentNode 获取父元素 , 通过 childNodes 获取所有类型节点 ( 包括文本节点 ) , 通过 children 获取子元素节点 , 并给出了示例代码 ;
在 本篇博客 中继续介绍 子节点 的 其它获取方式 ;
一、JavaScript 子节点操作
1、获取子节点需求
通过元素的 childNodes 可以获取所有类型的 子节点 ( 不推荐使用 ) , 通过元素的 children 属性 , 能获取元素的 直接 子节点 ( 推荐使用 ) ;
给定如下的 HTML 标签结构 :
<ul>
<li>lili>
<li>lili>
<li>lili>
ul>
获取 标签 和 最后一个 标签 ;
2、firstChild 和 lastChild 属性 ( 不推荐 - 基于所有类型节点 )
通过 firstChild 和 lastChild 属性 获取 第一个子节点 和 最后一个子节点 , 但是 获取的节点类型 是 任意节点类型 , 基于所有类型的节点进行获取 , 包括 : 元素类型节点、文本类型节点、注释类型节点 ;
- firstChild 属性 : 返回 第一个子节点 ;
- lastChild 属性 : 返回 最后一个子节点 ;
节点类型 有 元素类型、文本类型、注释类型、文档类型 , 除了 元素类型之外 , 还有 文本类型 和 注释类型 干扰 获取子节点 , 哪怕 HTML 中有一个空格 , 也会被作为 文本类型节点 返回 ;
不推荐理由 : 使用 firstChild 和 lastChild 属性 获取的 第一个子节点 和 最后一个子节点 是 基于所有的 子节点来说的 , 如果有 注释 , 可能返回注释节点 , 如果有空格或换行符 , 可以返回空格文本节点 ;
使用下面的代码
// DOM 方式获取标签元素
var ul = document.querySelector('ul');
// 通过 firstChild 和 lastChild 属性 获取 第一个子节点 和 最后一个子节点 , 获取的节点 是 基于所有节点类型进行获取的 ;
// 第一个子节点 和 最后一个子节点 是基于所有的 子节点来说的 ,
// 如果有 注释 , 可能返回注释节点 , 如果有空格或换行符 , 可以返回空格文本节点 ;
console.log(ul.firstChild);
console.log(ul.lastChild);
获取下面的 标签 和 最后一个 标签 ;
<ul>
<li>lili>
<li>lili>
<li>lili>
ul>
最终得到的是 两个 文本标签 ;
![【Web APIs】JavaScript 节点操作 ③ ( 子节点操作 | firstChild 属性 | firstElementChild 属性 | children[0] 属性 )_第1张图片](http://img.e-com-net.com/image/info8/0a4550f9a5294c489ae40e42790465cc.jpg)
第一个 文本标签值为 "\n " , 这是第一行的换行 + 第二行的 tab 索引 文本 ;
![【Web APIs】JavaScript 节点操作 ③ ( 子节点操作 | firstChild 属性 | firstElementChild 属性 | children[0] 属性 )_第2张图片](http://img.e-com-net.com/image/info8/bee455d91dba4fb58a65069a23349bdd.jpg)
第二个文本标签 也是 "\n " ;
![【Web APIs】JavaScript 节点操作 ③ ( 子节点操作 | firstChild 属性 | firstElementChild 属性 | children[0] 属性 )_第3张图片](http://img.e-com-net.com/image/info8/82a8e03051644ef7be0681e93007ec50.jpg)
3、firstElementChild 和 lastElementChild 属性 ( 不推荐 - 兼容性问题 )
通过 firstElementChild 和 lastElementChild 属性 都是 返回 的 元素类型节点 , 不会返回 文本类型节点 和 注释类型节点 ; ( 节点类型 : 元素类型、文本类型、注释类型、文档类型 )
- firstElementChild 属性 : 返回 第一个 元素子节点 , 注意 : 这里仅返回 标签子元素节点 , 不返回 文本节点 , 注释节点 等 ;
- lastElementChild 属性 : 返回 最后一个 元素子节点 ;
其原理是 只遍历 元素节点 ( Node.ELEMENT_NODE , 类型值为 1 ) , 忽略文本、注释等其他节点 ;
不受 HTML 格式 ( 如 : 空格、换行、缩进 ) 影响 , 直接定位到元素 ;
主要弊端 : firstElementChild 和 lastElementChild 属性 , 只有 IE9 版本的浏览器才支持 , 低版本的浏览器不支持 ;
给定下面的 HTML 结构 :
<ul>
<li>li_1li>
<li>li_2li>
<li>li_3li>
ul>
通过 firstElementChild 和 lastElementChild 属性 , 获取 第一个 和 最后一个 子元素 :
// 2. 通过 firstElementChild 和 lastElementChild 属性 都是 返回 的 元素类型节点
// IE9 以上版本才支持该用法 , 低版本浏览器不支持该用法
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
获取的 第一个子元素 和 最后一个子元素 如下所示 :
![【Web APIs】JavaScript 节点操作 ③ ( 子节点操作 | firstChild 属性 | firstElementChild 属性 | children[0] 属性 )_第4张图片](http://img.e-com-net.com/image/info8/749b7fa14d7249e5bda447b234857c77.jpg)
4、children[0] 和 children[element.children.length - 1] 属性 ( 推荐 - 实际用法 )
与 firstElementChild 与 lastElementChild 类似 , children 可用于访问任意索引的 元素子节点 , 如 : children[1] 是 索引为 1 的元素子节点 ( 第二个元素子节点 ) 、children.length 是 元素子节点个数 ;
children 是一个实时更新的类数组对象 , HTMLCollection 类型 , 其中包含 所有 元素子节点 ;
children[0] 表示第一个元素子节点 , 等价于 firstElementChild ;
children[element.children.length - 1] 表示最后一个元素子节点 , 等价于 lastElementChild ;
给定下面的 HTML 结构 :
<ul>
<li>li_1li>
<li>li_2li>
<li>li_3li>
ul>
通过 children[0] 和 children[element.children.length - 1] 属性 , 获取 第一个 和 最后一个 子元素 :
// 3. 实际用法 兼容所有版本的浏览器
console.log(ul.children[0]);
console.log(ul.children[ul.children.length - 1]);
获取的 第一个 和 最后一个 子元素 如下 :
![【Web APIs】JavaScript 节点操作 ③ ( 子节点操作 | firstChild 属性 | firstElementChild 属性 | children[0] 属性 )_第5张图片](http://img.e-com-net.com/image/info8/66883ca042a047c3be1d2c6b9a892155.jpg)
5、完整代码示例
代码示例 :
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点操作title>
head>
<body>
<div>divdiv>
<span>spanspan>
<ul>
<li>li_1li>
<li>li_2li>
<li>li_3li>
ul>
<div class="box">
<span class="span2">×span>
div>
<script>
// DOM 方式获取标签元素
var ul = document.querySelector('ul');
// 1. 通过 firstChild 和 lastChild 属性 获取 第一个子节点 和 最后一个子节点 , 获取的节点 是 基于所有节点类型进行获取的 ;
// 第一个子节点 和 最后一个子节点 是基于所有的 子节点来说的 ,
// 如果有 注释 , 可能返回注释节点 , 如果有空格或换行符 , 可以返回空格文本节点 ;
console.log(ul.firstChild);
console.log(ul.lastChild);
// 2. 通过 firstElementChild 和 lastElementChild 属性 都是 返回 的 元素类型节点
// IE9 以上版本才支持该用法 , 低版本浏览器不支持该用法
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
// 3. 实际用法 兼容所有版本的浏览器
console.log(ul.children[0]);
console.log(ul.children[ul.children.length - 1]);
script>
body>
html>
执行结果 :
![【Web APIs】JavaScript 节点操作 ③ ( 子节点操作 | firstChild 属性 | firstElementChild 属性 | children[0] 属性 )_第6张图片](http://img.e-com-net.com/image/info8/ecfae91160874649aa22e52660f30ae4.jpg)