欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

WebAPI(part8)--节点操作

发布时间：2023/12/19 编程问答 40 豆豆
生活随笔 收集整理的这篇文章主要介绍了 WebAPI(part8)--节点操作 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

学习笔记，仅供参考，有错必究

文章目录

    • 节点操作
      • 节点概述
      • 节点层级
        • 父节点
        • 子节点
        • 兄弟节点
      • 创建节点
      • 删除节点
      • 复制节点
      • 创建元素三种方式

节点操作


节点概述

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

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

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

节点类型nodeType值
元素节点1
属性节点2
文本节点3

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

  • 举个例子

HTML：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div class="test01">我是div</div><script>var test01 = document.querySelector(".test01")console.dir(test01);</script> </body></html>

控制台的部分输出：

nodeName: "DIV" nodeType: 1 nodeValue: null

节点层级


父节点

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

node.parentNode

parentNode属性可返回某节点的父节点，注意！是最近的一个父节点。；

如果指定的节点没有父节点，则返回null.


子节点

获取所有子节点：

parentNode.childNodes

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

注意，返回值里包含了所有节点，包括元素节点、文本节点等。

如果我们只想获取子元素节点，可以使用如下代码：

parentNode.children

parentNode.children是一个只读属性，返回该节点所有的子元素节点，它只返回子元素节点，其他节点不返回。

第一个子节点：

parentNode.firstChild

最后一个子节点：

parentNode.lastChild

第一个子元素节点(IE9以上)：

parentNode.firstElementChild

最后一个子元素节点(IE9以上)：

parentNode.lastElementChild

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

<ol><li>我是li1</li><li>我是li2</li><li>我是li3</li><li>我是li4</li><li>我是li5</li> </ol> <script>//实际开发的写法 既没有兼容性问题又返回第一个子元素console.log(ol.children[0]);console.log(ol.children[ol.children.length - 1]); </script>

兄弟节点

返回当前元素的下一个兄弟节点：

node.nextSibling

返回当前元素的上一个兄弟节点：

node.previousSibling

返回当前元素的下一个元素节点：

node.nextElementSibling

返回当前元素的上一个元素节点：

node.previousElementSibling

创建节点

创建节点：

document.createElement("tagName")

将节点添加到指定父节点的子节点列表的末尾：

node.appendChild(child)

将节点添加到指定父节点的指定子节点的前面：

node.insertBefore(child, 指定节点)

删除节点

该方法从 node节点中删除一个子节点，返回删除的节点。

node.removeChild()
  • 举个例子
<button>删除</button> <ul><li>我是1</li><li>我是2</li><li>我是3</li> </ul> <script>// 1.获取元素var ul = document.querySelector('ul');var btn = document.querySelector('button');// 2. 点击按钮依次删除里面的孩子btn.onclick = function() {if (ul.children.length == 0) {this.disabled = true;} else {ul.removeChild(ul.children[0]);}} </script>

复制节点

该方法返回一个节点的副本：

node.cloneNode()

注意，括号中，若填写的参数为false则为浅拷贝，只复制节点本身，不克隆里面的子节点；若为true则为深拷贝，则复制节点本身及节点内的所有子节点。

  • 举个例子
<ul><li>1111</li><li>2</li><li>3</li> </ul> <script>var ul = document.querySelector('ul');// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容var lili = ul.children[0].cloneNode(true);ul.appendChild(lili); </script>

创建元素三种方式

document.write() element.innerHTML document.createElement()
  • 举个例子
<script>// 三种创建元素方式区别 // 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘var btn = document.querySelector('button');btn.onclick = function() {document.write('<div>123</div>');}// 2. innerHTML 创建元素var inner = document.querySelector('.inner');for (var i = 0; i <= 100; i++) {inner.innerHTML += '<a href="#">百度</a>'}var arr = [];for (var i = 0; i <= 100; i++) {arr.push('<a href="#">百度</a>');}inner.innerHTML = arr.join('');// 3. document.createElement() 创建元素var create = document.querySelector('.create');for (var i = 0; i <= 100; i++) {var a = document.createElement('a');create.appendChild(a);} </script>

总结

以上是生活随笔为你收集整理的WebAPI(part8)--节点操作的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。