本篇文章為大家帶來了關於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;i2.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中文網其他相關文章！
