Javascript基礎知識體系化學習總結（五）DOM
一、樹形結構
1.DOM的本質其實是由html文件/語言經過瀏覽器校驗生成的樹形結構，也就是一棵樹。
2.html可以說是XML的一種特定的寫法。
二、節點操作
1.針對節點的操作就是查詢/獲取節點。主要分爲通過ID、class、標籤名等獲取，大概如下：
三、屬性
針對DOM節點操作還可以利用property和attribute。
1.property就是通過js去修改對象的屬性不會影響DOM結構：
2.attribute是通過js去修改HTML的屬性，會影響DOM結構：
3.兩者都有可能會引起DOM結構的重新渲染，不過一般情況下是使用property比較好。
四、樹結構操作
樹結構操作包括新增、插入、刪除節點和獲取子元素列表與獲取父元素。
1.新增並且插入節點：
2.刪除一個節點：
3.獲取子元素列表：
4.獲取父元素：
五、性能
性能的話主要是因爲操作DOM是比較浪費cpu的，我們可以對查詢到的DOM進行緩存和使用文檔片段一次性插入。
1.緩存DOM查詢：
2.使用文檔判斷：
完整的代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
</head>
<body>
<div id="box">
<p class="content">忠誠</p>
</div>
<script type="text/javascript">
// 獲取DOM節點
console.log(document.getElementById('box'))
console.log(document.getElementsByClassName('content')) // 獲取的是HTML集合
console.log(document.getElementsByTagName('div')) // 獲取的是HTML集合
console.log(document.querySelectorAll('p')) // 獲取的是nodeList集合
// property
const div1 = document.getElementById('box')
div1.style.backgroundColor="red"
// attribute
const div2 = document.getElementById('box')
div2.getAttribute('style')
div2.setAttribute('style', 'background-color: blue;')
// 創建一個新節點並且插入DOM結構中
const p1 = document.createElement('p')
p1.innerHTML="爲了帝皇"
const div3 = document.getElementById('box')
div3.appendChild(p1)
//獲取子元素列表
const div4 = document.getElementById('box')
console.log(div4.childNodes) // 一般的獲取是會包含所有的節點即文本節點、註釋節點、元素節點等的集合
const result = Array.from(div4.childNodes).filter((item) => { // 由於我們只需要元素節點即標籤，故把集合轉換成數組
if(item.nodeType === 1){ // 並且調用數組的filter方法進行過濾，如果數組中的值的nodeType屬性爲1就是元素節點
return true // 就保留到結果中
}
return false // 否則就不放到結果中
})
console.log(result)
// 獲取父元素
const div5 = document.getElementById('box')
console.log(div5.parentNode)
// 刪除節點
const div6 = document.getElementById('box')
console.log(div6.removeChild(result[0]));
// 對DOM的查詢結果進行緩存,以後再有關box的操作就直接利用變量div7操作即可
const div7 = document.getElementById('box')
// 一次性操作（利用文檔片段）
const file = document.createDocumentFragment() // 創建了一個文檔片段
</script>
</body>
</html>
好了，javascript的第五個模塊大概就是這些內容了，我會將它分爲11個模塊然後13篇文章左右把它講完（有的模塊內容多會範圍上下期大概。。。），學完這些模塊相信大家對基礎的js會有一個比較體系化的認識，那麼大家加油，我是O5,我們下次見！