日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

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

编程问答

WebAPI(part8)--节点操作

發布時間：2023/12/19 编程问答 29 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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)--节点操作的全部內容，希望文章能夠幫你解決所遇到的問題。

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