菜鳥筆記-DOM 基本操做

菜鳥筆記---DOM基本操做 在 HTML DOM （文檔對象模型 Document Object Model）中，每一個部分都是節點： 文檔自己是文檔節點           Document_Node 全部 HTML 元素是元素節點     Element_Node 全部 HTML 屬性是屬性節點     Attribute_Node HTML 元素內的文本是文本節點  Text_Node 註釋是註釋節點               Comment_node Element 對象 在 HTML DOM 中，Element 對象表示 HTML 元素。 Element 對象能夠擁有類型爲元素節點、文本節點、註釋節點的子節點。 NodeList 對象表示節點列表，好比 HTML 元素的子節點集合。 Node 與 Element 的區別： 簡單的說就是Node是一個基類，DOM中的Element，Text和Comment都繼承於它。 換句話說，Element，Text和Comment是三種特殊的Node，它們分別叫作ELEMENT_NODE, TEXT_NODE和COMMENT_NODE。 **因此咱們平時使用的html上的元素，即Element是類型爲ELEMENT_NODE的Node。 詳情請看：https://www.jianshu.com/p/695b5c78a7ca 一 獲取節點 1. document (1) getElementById 語法：document.getElementById(元素ID) 功能：經過元素ID獲取節點 (2) getElementsByName 語法： document.getElementByName(元素name屬性) 功能： 經過元素的name屬性獲取節點 (3) getElementsByTagName 語法： document.getElementsByTagName(元素標籤) 功能： 經過元素標籤獲取節點 (4) getElementsByClassName 語法： document.getElementsByClassName(元素class名) 功能： 經過class獲取節點 2. 節點指針 (1) firstChild 語法： 父節點.firstChild 功能： 獲取元素的首個子節點 (2) lastChild 語法： 父節點.lastChild 功能：獲取元素的最後一個子節點 (3) childNodes 語法：父節點.childNodes 功能：獲取元素的子節點列表 (4) previousSibling 語法：兄弟節點.previousSibling 功能：獲取已知節點的前一個節點 (5) nextSibling 語法：兄弟節點.previousSibling 功能：獲取已知節點的後一個節點 (6) parentNode 語法：子節點.parentNode 功能：獲取已知節點的父節點 二 節點操做 1. 建立節點 (1) createElement 語法：document.createElement(元素標籤) 功能：建立元素節點 (2) createAttribute 語法：document.createAttribute(元素屬性) 功能：建立屬性節點 (3) createTextNode 語法：document.createTextNode(文本內容) 功能：建立文本節點 2. 插入節點 (1) appendChild 語法：appendChild(所添加的新節點) 功能：向節點的子節點列表的末尾添加新的子節點 (2) insertBefore 語法：insertBefore(所要添加的新節點，已知子節點) 功能：在已知的子節點前插入一個新的子節點 3. 替換節點 (1) replaceChild 語法：要插入的新元素，將被替換的老元素 功能：將某個子節點替換爲另外一個 4. 複製節點 (1) cloneNode 語法：須要將被複制的節點.cloneNode(true/false) 功能：創造指定節點的副本 參數：true --- 複製當前節點及其全部子節點       false --- 僅複製當前節點 5.刪除節點 (1) removeChild 語法: removeChild(要刪除的節點) 功能： 刪除指定的節點 注意： 從父元素中刪除子元素：parent.removeChild(child); 可否在不引用父元素的狀況下刪除某個元素？ 很抱歉。DOM 須要瞭解您須要刪除的元素，以及它的父元素。 這裏提供一個經常使用的解決方法：找到您須要刪除的子元素，而後使用 parentNode 屬性來查找其父元素： var child=document.getElementById("p1"); child.parentNode.removeChild(child); 三 屬性操做 1. 獲取屬性 getAttribute 語法： 元素節點.getAttribute(元素屬性名) 功能： 獲取元素節點中指定屬性的屬性值 2. 設置屬性 setAttribute 語法：元素節點.setAttribute(屬性名.屬性值) 功能：建立或改變元素節點的屬性 3.刪除屬性 removeAttribute 語法：元素節點.removeAttribute(屬性名) 功能：刪除元素中的指定 四 文本操做 1. insertData(offset, String) // 從offset指定的位置插入string 2. appendData(string) //將string插入到文本節點的末尾處 3. deleteDate(offset, count) //從offset起刪除count個字符 4. replaceData(offset, count, string) //從offset將count個字符用string替代 5. splitData(offset) //從offset 起降文本節點分紅兩個節點 6. substring(offset,count) //從offset起的count個節點 五. HTML DOM 事件 HTML 事件的例子：     當用戶點擊鼠標時     當網頁已加載時     當圖片已加載時     當鼠標移動到元素上時     當輸入字段被改變時     當 HTML 表單被提交時     當用戶觸發按鍵時