JavaScript之DOM操作（上集）
前言
在这里有几句话要跟大家说的，现在比较流行的vue和react框架的应用十分广泛，封装了dom操作，而且你在工作用这些框架的时候，也不允许你手写dom操作。
但是，大家不要被框架迷惑了眼睛，因为框架迭代的时间太快了，只会框架而不懂dom操作的程序猿，职业生涯也不会太长久，毕竟框架这种东西都是基于dom操作封装的。所以dom操作一直是前端工程师必备的知识！
所以：要想前端学得好，dom操作少不了！
概念
官方描述
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。
笔者描述
DOM结构就是浏览器内存里面已经初始化好的一个树的结构，简单来说就是从html或者xml语言解析出来的一棵树。我们可以通过DOM操作（实际上就是js操作html的API）来实现对html的内容和属性实现增删改查。
dom结构，放两张图出来你就会明白
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>优秀的程序员</h2>
<div>
<p>优秀的程序员必备三件套</p>
<ul>
<li>秃头</li>
<li>格子衫</li>
<li>拖鞋</li>
</ul>
</div>
</body>
</html>html代码解析出来dom结构（树结构）
DOM节点操作
获取dom节点API（常用）
| document.getElementByid(‘’) | 通过id获得元素节点 |
| document.getElementsByTagName(‘’) | 通过标签名得到节点数组 |
| document.getElementsByClassName(‘’) | 通过类名得到节点数组 |
| documen.querySelectorAll(‘’) | 通过选择器得到元素数组 |
【简单演示】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>优秀的程序员</h2>
<div class="div1">
<p id="p1">优秀的程序员必备三件套</p>
<ul>
<li>秃头</li>
<li>格子衫</li>
<li>拖鞋</li>
</ul>
</div>
</body>
<script>
const div1 = document.getElementsByClassName('div1')
const p1 = document.getElementById('p1')
const all_li = document.querySelectorAll('li')
const chird_li = document.getElementsByTagName('li')
console.log('div1',div1)
console.log('p1',p1)
console.log('li_all',all_li)
console.log('第二个li',chird_li[1])
</script>
</html>
property
property就是以js对象的形式来操作，修改js变量的属性，不会对标签有任何影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>优秀的程序员</h2>
<div class="div1">
<p id="p1">优秀的程序员必备三件套</p>
<ul>
<li>秃头</li>
<li>格子衫</li>
<li>拖鞋</li>
</ul>
</div>
</body>
<script>
const chird_li = document.getElementsByTagName('li')
chird_li[1].style.color = 'red'
chird_li[1].className = 'gezishan'
console.log('chird_li',chird_li[1])
</script>
</html>
attribute
dom操作一个修改标签的API，对dom结构的节点属性进行修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>优秀的程序员</h2>
<div class="div1">
<p id="p1">优秀的程序员必备三件套</p>
<ul>
<li>秃头</li>
<li>格子衫</li>
<li>拖鞋</li>
</ul>
</div>
</body>
<script>
const chird_li = document.getElementsByTagName('li')
chird_li[1].setAttribute('user-defined','gezishan')
console.log(chird_li[1].getAttribute('user-defined'))//打印gezishan
</script>
</html>小结
1.property：修改对象属性，不会体现到html结构中
2.attribute：修改html属性，会改变html结构
3.两者都可能引起dom重新渲染
今天你学废了吗？