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

编程问答

WebAPI(part8)--节点操作

發布時間：2023/12/19 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 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()

舉個例子

總結

以上是生活随笔為你收集整理的WebAPI(part8)--节点操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：十年结婚是什么婚十年锡婚是什么意思
下一篇： WebAPI(part9)--下拉菜单及