歡迎加入前端交流群交流知識獲取視頻資料：749539640

?

1.node節點（更詳細的獲取（設置）頁面中所有的內容） ? ? 根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點： 元素是節點的別稱，節點包含元素當然節點還有好多細化的種類； 有元素節點、屬性節點、文本節點....... 節點的關系從這里真正的體現出來 根節點：root>>>>HTML沒有父節點； 節點操作：（通過父子系關系） childNodes：獲取當前元素的所有子節點； nodeType:節點種類，返回值是數字； nodeValue: 獲取（文字）節點的文本內容； nodeName：返回node節點名稱（#text，注釋， 標簽....）； 一個可以找出元素節點的方法； 常見的節點類型： 1 ? ? ? ? ? ?元素（div、body、li、span ....... ）? 2* ? ? ? ? ? 屬性代表屬性節點 （class，src，href） 3 ? ? ? ? ? ?文本節點（text節點） 8 ? ? ? ? ? ?代表注釋節點 9 ? ? ? ? ? ?代表document節點； 2.innerHTML和nodeValue;(當innerHTML和nodeValue分別作為左值的時候) box.innerHTML = '<strong>abc</strong>'; box.childNodes[0].nodeValue = '<strong>abc</strong>'; innerHTML會將標簽解析； nodeValue不會進行解析，會將標簽名轉譯成字符串，直接輸出； 3.attribute屬性 document.getElementById('box').attributes ? ?// ?獲取所有，該節點的屬性信息； document.getElementById('box').attributes.length;//返回屬性節點個數 document.getElementById('box').attributes[0]; //返回第一個屬性節點 document.getElementById('box').attributes[0].nodeType; //2，屬性 document.getElementById('box').attributes[0].nodeValue; //屬性值 document.getElementById('box').attributes['id']; //返回屬性為 id 的節點 document.getElementById('box').attributes.getNamedItem('id'); // 獲取 id 的節點； 一般只用作獲取； 4.節點操作 DOM不僅僅可以獲取設置節點，還可以創建，刪除，復制、插入、替換節點； write()方法，是寫入，和innerHTML類似； node三劍客 createElement()創建一個節點； var oDiv=document.createElement('div') createTextNode()創建一個文字節點； var oText=document.createTextNode('dddd'); oDiv.appendChild(oText) ?將一個節點插入到另一個節點上； box.insertBefore(newNode, existNode) 把new node插入到existNode之前； oDiv.insertBefore(document.createTextNode('eeeeee'),oDiv.childNodes[0]) ； box.removeChild(oText)?刪除節點 ++定位 offsetParent?這個屬性的返回值是它根據誰定位的，如果它的所有父元素都沒有定位，那么返回body offsetLeft ? ? ? ? ?這個屬性返回元素的左側偏移值； offsetTop ? ? ?? 這個屬性返回元素的右側偏移值； 獲取元素相對于窗口的絕對定位； ? 5.替換操作 ? var p=document.createElement('p') oDiv.parentNode.replaceChild(p,oDiv); 6.復制節點 var oDiv=document.getElementById('box'); var clone=oDiv.cloneNode(true); oDiv.appendChild(clone) console.log(clone) 7.遍歷節點（根據某一個節點位置找到它的父子、兄弟節點） ? ?父子節點：
? 兄弟節點： ? ? 父（parent）、子（child）和同胞（sibling）等術語用于描述這些關系。父節點擁有子節點。同級的子節點被稱 ? ? ?為同胞（兄弟或姐妹）。 ? childNodes 獲取當前元素節點的所有子節點 firstChild 獲取當前元素節點的第一個子節點 lastChild | lastElementChild 獲取當前元素節點的最后一個子節點 ownerDocument 獲取該節點的文檔根節點，相當與 document parentNode 獲取當前節點的父節點 previousSibling 獲取當前節點的前一個同級節點 nextSibling 獲取當前節點的后一個同級節點 案例 1.Table圖片切換； 選項卡.rar
282.0 KB


2.聊天對話； 聊天對話.html
3.9 KB
3.隔行變色之鼠標移入變色 隔行變色.html
1.5 KB

轉載于:https://www.cnblogs.com/wangzhichao/p/9335612.html

總結

以上是生活随笔為你收集整理的javascript系列-class10.DOM（下）的全部內容，希望文章能夠幫你解決所遇到的問題。

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