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,我们下次见！