节点操作 JavaScript

最新推荐文章于 2024-10-09 09:16:31 发布

栋珞

最新推荐文章于 2024-10-09 09:16:31 发布

阅读量56

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2202_75549187/article/details/129913147

版权

JavaScript 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

节点操作

为什么学节点操作

获取元素通常使用两种方式：

利用 DOM 提供的方法获取元素

document.getElementById()
document.getElementsByTagName()
document.querySelector 等
逻辑性不强、繁琐

利用节点层级关系获取元素

利用父子兄节点关系获取元素
逻辑性强，但是兼容性稍差

这两种方式都可以获取元素节点，但是节点操作更简单

节点概括

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用 node 来表示

HTML DOM 树中所有节点均可通过 javascript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除

一般地，节点至少拥有 nodeType( 节点类型 )、nodeName( 节点名称 ) 和 nodeValue( 节点值 ) 这三个基本属性

元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3（文本节点包含文字、空格、换行等）

在实际开发中，节点操作主要操作的是元素节点

节点层级

利用 DOM 数可以把节点划分为不同的层次关系，常见的是父子兄层级关系

父级节点

<div class="demo">
    <div class="box">
        <span class="erweima">x</span>
    </div>
</div>
<script>
	// 1. 父节点 parentNode
    var erweima = document.querySelector('.erweima');
    // var box = document.querySelector('.box');
    // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
    console.log(erweima.parentNode);  // div.box
</script>

parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回 null

子节点

parentNode.childNodes(标准)

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等

如果只想要获得里面的元素节点，则需要专门处理。所以一般不提倡使用childNodes

var ul = documnent.querySelector('ul')
for (var i = 0; i < ul.childeNodes.length; i++) {
    if (ul.childNodes[i].nodeType == 1) {
        // ul.childNodes[i] 是元素节点
        console.log(ul.childNodes[i]);
    }
}

parentNode.children(非标准)

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是我们重点掌握的）

虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
	// DOM 提供的方法（API）获取
    var ul = document.querySelector('ul');
    var lis = ul.querySelectorAll('li');
    // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
    console.log(ul.childNodes);
    console.log(ul.childNodes[0].nodeType);  // 3
    console.loh(ul.childNodes[1].nodeType);  // 1
    // 2. children 获取所有的子元素节点 也是我们实际开发常用的
    console.log(ul.children);  // [li, li, li,]
</script>

parentNode.firstChild

firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点

parentNode.lastChild

lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点

parentNode.firstElementChild

firstElementChild 返回第一个子元素节点，找不到则返回null

parentNode.lastElementChild

lastElementChild 返回最后一个子元素节点，找不到则返回null

注意：这两个方法有兼容性问题，IE9 以上才支持

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么如何获取第一个子元素节点或最后一个子元素节点

解决方案：

如果想要第一个子元素节点，可以使用 parentNode.children[0]

<ol>
    <li>我是li1</li>
    <li>我是li2</li>
    <li>我是li3</li>
    <li>我是li4</li>
</ol>
<script>
	var ol = document.querySelector('ol');
    // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
    console.log(ol.firstChild); // #text
    console.log(ol.lastChild); // #text
    // 2. firstElementChild 返回第一个子元素节点
    console.log(ol.firstElementChild); // <li>我是li1</li>
    console.log(ol.lastElementChild); // <li>我是li4</li>
    // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
    console.log(ol.children[0]); // <li>我是li1</li>
    console.log(ol.children[ol.children.length - 1]); // <li>我是li4</li>
</script>

兄弟节点

node.nextSibling

nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点

node.previousSibling

previousSibling 返回当前元素是一个兄弟节点，找不到则返回null。同样，也是包含所有的节点

node.nextElementSibling

nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null

node.previousElementSibling

previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null

注意：这两个方法都有兼容性问题，IE9 以上才支持

解决兼容性问题：自己封装一个兼容性的函数

function nextElementSibling(element) {
    var el = element;
    while (el = el.nextSibling) {
        if (el.nodeType === 1) {
        	return el;
    	}
    }
    return null;
}

创建节点

document.createElement('tagName')

document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点

添加节点

node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 css 里面的 after 伪元素

node.insertBefore(child, 指定元素)

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 css 里面的 before 伪元素

<ul>
    <li>123</li>
</ul>
<script>
	// 1. 创建节点元素点
    var li = document.createElement('li');
    // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
    var ul = document.querySelector('ul');
    ul.appendChild(li);
    // 3. 添加节点 node.insertBefore(child, 指定元素);
    var lili = document.createElement('li');
    ul.insertBefore(lili, ul.children[0]);
    // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素  2. 添加元素
</script>