深入學習js節點

標籤：dom js節點

深入學習js節點

　　DOM 模型(model)

　　HTML 文檔中的所有節點群組成了一個文檔樹模型，

　　HTML 文檔中的每個元素、屬性、文本等都代表著樹中

　　的一個節點。這些節點相互聯絡，相互影響，構成一個

　　完整的頁面，我們稱之為模型。

　　HTML 文檔中的每個成分都是一個節點。

　　? 整個文檔是一個文檔節點

　　? 每個 HTML 標籤是一個元素節點

　　? 包含在 HTML 元素中的文本是文本節點

　　? 每一個 HTML 屬性是一個屬性節點

　　? 注釋屬於注釋節點

　　節點的屬性

　　節點屬效能用來幹什麼?

　　1.通過節點的屬性，能夠擷取到每個節點之間的關係，並且可以通過這種關係，

　　準確快速的擷取到相應節點的對象。

　　獲得節點關係的屬性

　　對象.parentNode 獲得父節點的引用

　　對象.childNodes 獲得子節點的集合

　　對象.firstChild 獲得第一個子節點的引用

　　對象.lastChild 獲得最後一個子節點的引用

　　對象.nextSibling 獲得下一個兄弟節點的引用

　　對象.previousSibling 獲得上一個兄弟節點的引用

　　節點的方法

　　我們之前對頁面元素的操作，都是在操作現有的元素，

　　那麼我們如何動態建立、刪除、更改、複製元素，給

　　元素添加屬性、樣式呢?就就需要用到我們節點的方法。

　　節點的方法

　　一、建立節點

　　1>建立元素節點

　　document.createElement("元素標籤名");

　　2>建立屬性節點

　　對象.setAttribute(屬性名稱,屬性值)

　　3>建立文本節點

　　對象.innerHTML="";

　　document.createTextNode("文本");

　　節點的方法

　　二、追加到頁面當中

　　父物件.appendChild(追加的對象)

　　在指定元素節點的最後一個子節點之後添加節點

　　父物件.insertBefore(要插入的對象,之前的對象) 插入

　　到某個對象之前

　　節點的方法

　　? 三、刪除節點

　　? 父物件.removeChild(刪除的對象)

　　? 如果確定要刪除節點，最好也清空記憶體 對象=null;

　　節點的方法

　　三、修改(替換)節點

　　父物件.replaceChild(新節點,被修改的節點);

　　四、複製節點

　　待覆制的節點.cloneNode() 方法建立指定節點的副本。

　　該方法有一個參數(true 或 false)。如果設定為true,

　　所有的子節點也會複製，否則只會複製本節點

深入學習js節點