DOM核心

在 javascript 中，DOM 的操作是非常重要的。基本的操作不外乎就是C(創建)R(查詢)U(更新)D(刪除)等操作。因此，在這邊想記錄下來。讓自己加深印象。

首先，舉個例子來說現在HTML 有這樣一個結構

<div class="box0">這是盒子0</div>
<div class="box1">這是盒子1</div>
<div class="box2">
     <ul>
          <li>這是第一行</li>
          <li>這是第二行</li>
          <li>這是第三行</li>
          <li>這是第四行</li>
          <li>這是第五行</li>
      </ul>
</div>

接下來就是問題了:
1. 如果我要獲取節點有哪些方式?
2. 如何創建節點?
3. 如何新增節點到某個元素內?
4. 如何刪除節點?
5 如何修改元素中屬性，樣式，值…等?

獲取DOM元素

1. DOM提供的API :
document.getElementById()
document.getElementsByTagName()

2. H5提供的新法法 :
document.querySelector()
document.querySelectorAll()

DOM元素父兄弟間的獲取

父節點元素 Node.parentNode，找不到返回空。

var ul = document.querySelector('ul');
var box1 = document.querySelector('.box1');
console.log('ul父節點==>',ul.parentNode)

子節點2種方式 Node.childNodes 和 Node.children

但是 Node.childNodes 會獲取到文本節點、屬性節點、元素節點。這並不是我們想要的，所以基本上呢，還是用 Node.children 為主。

 console.log('ul子節點==>',ul.children)

第一個子節點和最後一個子節點

1. Node.firstChild 和 Node.lastChild 都是會獲取到文本節點、屬性節點、元素節點。
2. Node.firstElementChild 和 Node.lastElementChild 推薦 (IE9 以上才支持)
3. 實際開發寫法 Node.children[0] 為主

console.log('ul第一個節點==>',ul.children[0])
console.log('ul最後一個節點==>',ul.children[4])

獲取兄弟節點

1. nextSibling 和 previousSibling 都會獲取到文本節點、屬性節點、元素節點
2. nextElementSibling 和 previousElementSibling 才會獲取到元素節點(IE9以上兼容)

console.log('box1兄弟節點==>',box1.nextElementSibling)
console.log('box1兄弟節點==>',box1.previousElementSibling)

創建DOM節點

創建DOM document.createElement()
增加DOM到最後 Node.appendChild( )
插入DOM到最前面 Node.insertBefore( )

var div = document.createElement('div');
div.innerHTML="<p>HI</p>"
box1.appendChild(div);

var li = document.createElement('li');
li.innerHTML="<h1>熱死了</h1>"
box1.insertBefore(li ,div);

刪除DOM節點

刪除節點 Node.removeChild( )

ul.removeChild(ul.children[0])

複製DOM節點

1. node.cloneNode( ) 括號中為空，為淺拷貝。則只是複製標籤，不複製裡面內容
2. node.cloneNode(true) 括號中為true，為深拷貝。則複製標籤，也會複製裡面內容

var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili)