28·灵魂前端工程师养成-DOM编程
-曾老湿, 江湖人称曾老大。
-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
网页其实是一棵树
第一个知识点 |
|---|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>队列示例</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="screen"></div>
<div class="actions">
<button id="createNumber">取号</button>
<button id="callNumber">叫号</button>
</div>
<div>
当前号码：<span id="newNumber"></span>
</div>
<div>
当前队列：<span id="queue"> </span>
</div>
<script src="./main.js"></script>
</body>
</html>

JS如何操作这棵树 |
|---|
JS一开始是无法操作这个树的，后来浏览器发明了一个功能，浏览器往window上加一个document即可

在浏览器的控制台中输入，window.document 我们就可以得到 百度这个树的文档。将鼠标放在 #document上后，我们能看到整个网页都变成了蓝色
切记，我们这样操作那么就只得到了，该网页的根节点：html ， body ， head

只有在我们点开左边的三角后，才能看到其他的节点，所以想要获得某个详细的节点，我们可以进一步获取。

那么由此可见，JS是用document来操作整个网站页面的。
这就是 Document Object Model 文档对象模型
三个单词，简写： DOM 那么这就是我们今天要讲的，DOM编程
但是我们要记住，一开始我们就说过，JS不是一门特别好的语言，所以DOM很难用，那么我们需要想办法，解决这个难题。
如果你觉得，DOM 很智障，那么请你不要怀疑自己，DOM就是很智障，你觉得是对的。
DOM自带的API接口，是真的很智障，反人类，于是乎后来就有了使用：JQuery来操作DOM，使用VUE操作DOM，使用React操作DOM，后面我们就会学习，JQuery，VUE，React
获取元素（也叫获取标签）
获取所有元素API |
|---|
window.idxxx 或者直接 idxxx
document.getElementById('idxxx')
document.getElementsByTagName('div')[0]
document.getElementsByClassName('red')[0]
document.querySelector('#idxxx')
document.querySelectorAll('.red')[0]

window.idxxx 或者直接 idxxx
document.getElementById('idxxx')
document.getElementsByTagName('div')[0]

以上的三种方法都不用 ，我们了解即可。
那我们到底用哪个呢？
工作中：
document.querySelector('#idxxx')
document.querySelectorAll('.red')[0]自己做项目：
我们可以偷偷使用下面的方法 ，但是不要让老板发现。
window.idxxx
idxxx要兼容IE的可怜虫：
document.getElementById('idxxx')
document.getElementsByTagName('div')[0]
document.getElementsByClassName('red')[0]那么我们来 说一下 querySelector 和 querySelectorAll

// 类似于CSS的调用方式，我们调用div里面的span的第二个元素
document.querySelector('div>span:nth-child(2)')
// 结果如下
<span class="show-icon"><span class="weather-icon" style="background-image:url(https://dss0.bdstatic.com/k4oZeXSm1A5BphGlnYG/icon/weather/aladdin/png_18/a0.png);*background-image:none;*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=https://dss0.bdstatic.com/k4oZeXSm1A5BphGlnYG/icon/weather/aladdin/png_18/a0.png, enabled=true,sizingMethod=" crop")";=""></span><em class="show-icon-temp">1℃</em></span>
// 使用All，上面的只能找到 第一个div里面的第二个span元素，那么想找到每个div的就加All
document.querySelectorAll('div>span:nth-child(2)')

获取指定元素API |
|---|
// 获取html元素
document.documentElement
// 获取head元素
document.head
// 获取body元素
document.body
// 获取窗口
window
// 获取所有元素,不过这个是个奇葩，是第六个falsy值
document.all给大家展示一下JS的反人类之处。

我们获取html的标签名，他出来的居然是大写 mmp...

使用window，虽然window不是一个元素，但是我们可能会经常 使用windows
// 监听window的点击事件，只要点击鼠标，就打印 出一个hi，下图点击8次，打印8次
window.onclick = () => {console.log('hi')}

div原型链 |
|---|
我们获取到元素，我们需要 了解他的原型链，知道他的构造，都有哪些方法可以用。

节点的增删改查
程序猿的宿命，离不开增删改查
创建节点 |
|---|
// 创建一个标签 节点
let div1 = document.createElement('div')
document.createElement('style')
document.createElement('script')
document.createElement('li')
// 创建文本节点
text1 = document.createTextNode('曾老湿')
// 标签里插入文本
div1.appendChild(text1)
div1.innerText = '你好' 或者 div1.textContent = '你好'
// 但是不能用 div1.appendChild('你好')显示在网页上 |
|---|
上面的创建元素都只能在JS中创建，但是显示不在页面上，所以我们需要把内容显示在页面上。

// 先创建一个div
let div1 = document.createElement('div')
// 然后创建一个文本
let text1 = document.createTextNode('曾老湿')
// 把文本加入到div中
div1.appendChild(text1)
"曾老湿"
// 加入到页面中
document.body.appendChild(div1)
<div>曾老湿</div>
// 正常来说，上面的操作做完，我们就已经能看到了，但是百度页面的原因我们还是看不到
//于是乎，我们把 '曾老湿' 用 CSS 给他浮动起来
div1.style.position = 'fixed'
"fixed"
div1.style.top = 0
0
div1.style.left = 0
0
div1.style.color='red'
"red"删除节点 |
|---|
删除节点，我们必须要先找到这个节点的爸爸 ，然后 让爸爸删儿子
// 方法一
div1.parentNode.removeChild(div1)

// 方法二
div1.remove()修改属性 |
|---|
// 修改class
div.className = 'red'
div.classList.add('blue')
// 修改style
div.style = 'width:100px;color:blue;'
// 修改style的一部分
div.style.width = '200px'
// 修改背景颜色，注意大小写
div.style.backgroundColor = 'white'
// 修改data属性
div.dataset.x = 'zls'
// 读取标准属性
div.classList / a.href
div.getAttribute('class') / a.getAttribute('href')举例：
let div1 = document.createElement('div')
let text1 = document.createTextNode('曾老湿')
div1.appendChild(text1)
"曾老湿"
document.body.appendChild(div1)
<div>曾老湿</div>
div1.style.position = 'fixed'
"fixed"
div1.style.top = 0
0
div1.style.left = 0
0
div1.style.color='red'
"red"
div1.style.backgroundColor='yellow'
"yellow"
div1.style.fontSize='100px'
"100px"在网页上添加一个div

可以看到，这样我们就将div加入到body中了。

我们修改一下这个div的class
div1.className = 'red'
"red"

但是这种方法是以覆盖的形式，那么如果我们要改成 class = 'red blue'怎么办？
div1.className += 'blue'


新语法，我们可以直接添加，接下来我们添加一个原谅色 class = 'red blue green'
div1.classList.add('green')


修改内容 |
|---|
// 修改文本内容
div.innerText = 'xxx'
div.textContent = 'xxx'
// 改HTML内容
div.innerHTML = '<strong>曾老湿</strong>'
// 改标签
div.innerHTML = '' // 先清空
div.appendChild(div2) // 再加内容 查看API |
|---|
// 查爸爸
node.parentNode
node.parentElement
// 查爷爷
node.parentNode.parentNode
// 查子代
node.childNodes
node.children
// 查兄弟姐妹
node.parentNode.childNodes
node.parentNode.children
// 查看老大
node.firstChild
// 查看老幺
node.lastChild
// 查看上一个哥哥/姐姐
node.previousSibling
// 查看下一个弟弟/妹妹
node.nextSibling查看一个div里面的所有元素 |
|---|
// 遍历div
travel = (node,fn) => {
fn(node)
if(node.children){
for(let i=0;i<node.children.length;i++){
travel(node.children[i])
}
}
}
travel(div1,(node) => console.log(node))腾讯云开发者
