本篇文章為大家帶來了關於javascript的相關知識,其中主要介紹了關於節點操作的相關問題,包括了父級節點、子節點、兄弟節點、增加刪除複製節點等等內容,下面一起來看一下,希望對大家有幫助。
【相關推薦:javascript影片教學、web前端】
在我們的網頁中,除了用DOM提供的方法取得節點,還可以利用節點的層級關係來取得節點,都比較簡單,今天總結一下!
網頁中的所有內容都是節點(標籤、屬性、文字、註解等),在 DOM 中,節點使用 node 來表示。
HTML DOM 樹中的所有節點均可透過 JavaScript 進行訪問,所有 HTML 元素(節點)均可修改,也可以建立或刪除。
一般地,節點至少擁有 nodeType (節點型別)、 nodeName (節點名稱)和 nodeValue (節點值)這三個基本屬性。
我們在實際開發中,節點操作主要操作的是元素節點。
利用DOM樹可以把節點分割成不同的層級關係,常見的是父子兄弟層級關係。
node.parentNode
<p> </p><p></p> <script> var son = document.querySelector(".son"); console.log(son.parentNode); </script>
#1.node.childNodes (標準)
node .childNodes 傳回包含指定節點的子節點的集合,該集合為即時更新的集合。
這裡為什麼有五個text節點呢,其實是對應五個換行,看下圖:
這五個換行是文字節點,加上四個li元素節點,共9個
注意:傳回值裡麵包含了所有的子節點,包括元素節點,文字節點等。
如果只想要取得裡面的元素節點,則需要專門處理。所以我們一般不提倡使用 childNodes 。
var ul = document.querySelector('ul'); for (var i = 0;i
2.node.children (非標準)
node.children 是一個唯讀屬性,傳回所有的子元素節點。它只回傳子元素節點,其餘節點不回傳(這個是我們重點掌握的)。
雖然 children 是一個非標準,但是得到了各個瀏覽器的支持,因此我們可以放心使用。
1.node. firstChild
2.node. lastChild
firstChild 傳回第一個子節點,找不到則回傳null ,lastChild同理。同樣,也是包含所有的節點。
3.node. firstElementChild
firstElementChild 傳回第一個子元素節點,找不到則傳回 null 。
4.node. lastElementChild
lastElementChild 傳回最後一個子元素節點,找不到則傳回 null 。
注意:這兩個方法有相容性問題,IE9以上才支援。
5.node.children[0]
5.node.children[node.children.length - 1]
注意:實際開發的寫法,不存在相容性問題。
1.node. nextSibling
nextSibling 返回当前元素的下一个兄弟节点,找不到则返回 null 。同样,也是包含所有的节点。
2.node. previousSibling
previousSibling 返回当前元素上一个兄弟节点,找不到则返回null。同样,也包含所有的节点。
3.node. nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点,找不到返回 null 。
4.node. previousElementSibling
previousElementSibling 返回当前元素上一个兄弟元素节点,找不则返回 null 。
注意:这两个方法有兼容性问题,IE9以上才支持。
那么如何封装一个满足兼容性,又可以找到兄弟元素节点的函数呢
function getNextElementSibling(element){ var el = element; while(el = el.nextSibling){ if(el.nodeType == 1){ return el; } } return null; }
上面这段封装的代码就可解决,但不必考虑太多,因为ie浏览器即将要停止服务了,所以你只要记住node. nextElementSibling 这个就行,不必担心兼容性问题。
document.createElement (’ tagName ')
document.createElenent ()方法创建由 tagName 指定的Н TML 元素。因为这些元素原先不存在,是根据我的需求动态生成的,所以我们也称为动态创建元素节点。
1.node. appendChild(child)
node.appendChild ()方法将一个节点添加到指定父节点的子节点列表末尾。类似 css 里面的 after 伪元素。
2.node.insertBefore(child,指定元素)
node.removeChild(child)
node.removeChild(child) 方法从DOM中删除一个子节点,返回删除的节点。
node.cloneNode ()
node.cloneNode ()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
1.如果括号参数为空或者为 false ,则是浅拷贝,即只克隆复制节点本身,不克降里面的子节点。
2.如果括号参数为 true ,则是深度拷贝,会复制节点本身以及里面所有的子节点。
【相关推荐:javascript视频教程、web前端】
以上是一文搞定JavaScript的節點操作的詳細內容。更多資訊請關注PHP中文網其他相關文章!