-曾老湿, 江湖人称曾老大。
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长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))