JavaScript 之 DOM [ Node對象 ]

imtianx 發布于2019-08-23 11:35 / 3431人閱讀

摘要：對象描述對象是用于解析節點樹的入口對象提供了對節點操作的屬性和方法判斷節點類型節點類型分為元素節點屬性節點文本節點文檔節點判斷方式分為節點名稱節點類型節點的值我是誰，我在那，我要干啥獲取指定元素節點判斷指定節點的名稱顯示標簽名稱顯示

Node對象 描述

Node對象是用于解析DOM節點樹的入口

Node對象提供了對節點操作的屬性和方法

判斷節點類型

節點類型分為：

元素節點

屬性節點

文本節點

文檔節點

判斷方式分為：

nodeName - 節點名稱

nodeType - 節點類型

nodeValue - 節點的值

我是誰，我在那，我要干啥

獲取父節點

通過定位子節點，來獲取父節點

parentNode屬性

表示獲取父節點，等到的不一定的元素節點，也可能是Document對象


    手機
    手表
    電腦

parentElement屬性

表示獲取父元素節點，等到的一定是元素節點


    手機
    手表
    電腦

獲取子節點

通過定位父節點來獲取子節點

childNodes：表示獲取所有子節點

firstChild：表示獲取第一個子節點

lastChild：表示獲取最后一個子節點

在獲取子節點時也會一同獲取到“空白節點（可能是空的文本節點）”



    手機
    手表
    電腦

獲取相鄰兄弟節點

previousSibling：表示獲取前面的兄弟節點

nextSibling：表示獲取后面的兄弟節點

在獲取相鄰兄弟節點的時候也存在“空白節點（可能是空的文本節點）”的問題



    手機
    手表
    電腦

空白節點

在瀏覽器解析DOM節點樹結構時，會產生空白節點，使得到的數據結果出現問題

空白節點是通過在編寫HTML代碼時由于元素換行或空格產生的

空白節點一般會顯示為文本節點(可能是空的文本節點)

處理獲取子節點時產生的空白節點



    手機
    手表
    電腦

處理相鄰兄弟節點中的空白節點



    手機
    手表
    電腦

替換節點

replaceChild

表示對指定的元素節點進行替換



    手機
    手表
    電腦

插入節點

表示在指定位置插入節點

appendChild（）：表示在指定父節點中最后的位置插入節點

insertBefore（）：表示在指定目標節點的前面插入節點



    手機
    手表
    電腦

刪除節點

removeChild

表示刪除指定的元素節點

被刪除的元素節點只是在DOM節點數中被刪除，并不是在內存中被刪除,還可以在調用



    手機
    手表
    電腦

復制節點

cloneNode（）

括號中添寫布爾值“true或false”

true：表示復制后代節點

false：表示不復制后代節點（默認值）

如果被復制的節點具有ID屬性，復制后要修改ID屬性的屬性值



    手機
    手表
    電腦

GPU云服務器云服務器 javascript的dom對象刪除dom對象 dom對象操作 javascript dom

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97176.html

【JavaScript】DOM之Node對象

摘要：對象對象是什么該對象封裝的底層對象，該對象只是提供了操作屬性和方法，并不能直接打印操作屬性和方法定位月面元素其實就是對象為元素節點繼承鏈關系對象繼承與對象判斷節點類型以，和用于獲取節點名稱和節點類型還有節點的值按鈕新按鈕遍歷節點獲取父節點 Node對象 Node對象是什么該對象封裝DOM的底層對象，該對象只是提供了操作屬性和方法，并不能直接打印操作屬性和方法 conso...

Jeffrrey 2019-08-23 11:35 評論0 收藏0
瀏覽器內核之 HTML 解釋器和 DOM 模型

摘要：書接上文瀏覽器內核之資源加載與網絡棧本文介紹的模型之后，深入的核心部分，剖析的解釋器是如何將從網絡或者本地文件獲取的字節流轉成內部表示的結構樹。事件處理最重要就是事件捕獲和事件冒泡這兩種機制。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺留言，我...

Carbs 2019-08-02 16:04 評論0 收藏0
讀 Zepto 源碼之操作 DOM

摘要：輔助方法這個方法遞歸遍歷的子節點，將節點交由回調函數處理。對集合進行遍歷，調用方法，如果為函數，則將回調函數返回的結果作為參數傳給否則，如果為，則將也即包裹元素的副本傳給，否則直接將傳給。這篇依然是跟 dom 相關的方法，側重點是操作 dom 的方法。讀Zepto源碼系列文章已經放到了github上，歡迎star: reading-zepto 源碼版本本文閱讀的源碼為 zepto...

beita 2019-08-20 17:00 評論0 收藏0
【進階1-5期】JavaScript深入之4類常見內存泄漏及如何避免

摘要：本期推薦文章類內存泄漏及如何避免，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。四種常見的內存泄漏劃重點這是個考點意外的全局變量未定義的變量會在全局對象創建一個新變量，如下。因為老版本的是無法檢測節點與代碼之間的循環引用，會導致內存泄漏。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題...

red_bricks 2019-08-23 13:47 評論0 收藏0
《JavaScript 闖關記》之 DOM（上）

摘要：節點之間的關系構成了層次，而所有頁面標記則表現為一個以特定節點為根節點的樹形結構。此外，包含在列表中的每個節點相互之間都是同胞節點。在瀏覽器中，對象是繼承自類型的一個實例，表示整個頁面。 DOM（文檔對象模型）是針對 HTML 和 XML 文檔的一個 API。DOM 描繪了一個層次化的節點樹，允許開發人員添加、移除和修改頁面的某一部分。節點層次 DOM 可以將任何 HTML 或 XM...

mzlogin 2019-08-20 12:17 評論0 收藏0