原生JS中的DOM操作總結

理解：

JS中節點的劃分

JS中分為元素節點，文字節點，屬性節點，（註釋節點，文件節點）

<div class="kk">james</div>
<div>       元素節點
class="kk"  屬性節點
james       文字節點

節點的四大屬性

操作

檢視元素節點

遍歷樹節點

很多時候，我們並不需要操作文字節點，只需要操作元素節點，只需要加一個element

增加節點和插入節點(常用)

#增加節點
document.createElement()
#插入節點
parentNode.appendChild()   #根據父節點，插入裡面
parentNode.insertChild(a, b) #根據父節點，把a插到b的前面

let div = document.createElement('div')
div.innerHTML = "我是插入的內容"
body.appendChild(div)   //插入到body中

修改節點

一般是修改文字內容或者屬性值，常用的就是setAttribute()、getAttribute()方法。

let a = document.getElementById('a')
a.setAttribute('class', 'box')

刪除節點

常用的是removeChild() 直接刪除選中的子節點，如果要刪除的元素不存在就會返回null;

<div id="a">
	<div id="b"></div>    
</div>

let a = document.getElementById('a')
let b = document.getElementById('b')
a.removeChild(b)

替換節點

常用的是replaceChild(new, old)

parentNode.replaceChild(new, old)

<div class="father">
    <div class="son1"></div>
  </div>
  
  <script>
    let father = document.getElementsByClassName('father')[0]
    let son1 = document.getElementsByClassName('son1')[0]
    let son2 = document.createElement('div')
    son2.setAttribute('class', 'son2')
    father.replaceChild(son2, son1)
  </script>

讀取

• 方式一： 對於有閉合的標籤（即有開始的標籤，有結束的標籤 例如：） 可以使用innerHTML獲取內容。

但是對於單標籤來說，就不可以使用innerHTML (如果要讀取其內部的值，就直接獲取當前的元素 節點，然後.xxx就可以了，比如：.name .id 當然class要除外，因為class是JS中保留詞，需要使用.className)

• 方式二：使用getAttribute()