28·灵魂前端工程师养成-DOM编程

2022-09-26 17:11:24 浏览数 (1)
  • 网页其实是一棵树
  • 获取元素（也叫获取标签）
  • 节点的增删改查

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

网页其实是一棵树

第一个知识点

代码语言：javascript复制
<!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

代码语言：javascript复制
window.idxxx  或者直接 idxxx
document.getElementById('idxxx')
document.getElementsByTagName('div')[0]
document.getElementsByClassName('red')[0]
document.querySelector('#idxxx')
document.querySelectorAll('.red')[0]



代码语言：javascript复制
window.idxxx  或者直接 idxxx
document.getElementById('idxxx')
document.getElementsByTagName('div')[0]



以上的三种方法都不用 ，我们了解即可。

那我们到底用哪个呢？

工作中：

代码语言：javascript复制
document.querySelector('#idxxx')
document.querySelectorAll('.red')[0]

自己做项目：

我们可以偷偷使用下面的方法 ，但是不要让老板发现。

代码语言：javascript复制
window.idxxx
idxxx

要兼容IE的可怜虫：

代码语言：javascript复制
document.getElementById('idxxx')
document.getElementsByTagName('div')[0]
document.getElementsByClassName('red')[0]

那么我们来 说一下 querySelector 和 querySelectorAll



代码语言：javascript复制
// 类似于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

代码语言：javascript复制
// 获取html元素
document.documentElement
// 获取head元素
document.head
// 获取body元素
document.body
// 获取窗口
window
// 获取所有元素,不过这个是个奇葩，是第六个falsy值
document.all

给大家展示一下JS的反人类之处。



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



使用window，虽然window不是一个元素，但是我们可能会经常 使用windows

代码语言：javascript复制
// 监听window的点击事件，只要点击鼠标，就打印 出一个hi，下图点击8次，打印8次
window.onclick = () => {console.log('hi')}



div原型链

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



节点的增删改查

程序猿的宿命，离不开增删改查

创建节点

代码语言：javascript复制
// 创建一个标签 节点
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中创建，但是显示不在页面上，所以我们需要把内容显示在页面上。



代码语言：javascript复制
// 先创建一个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"

删除节点

删除节点，我们必须要先找到这个节点的爸爸 ，然后 让爸爸删儿子

代码语言：javascript复制
// 方法一
div1.parentNode.removeChild(div1)



代码语言：javascript复制
// 方法二
div1.remove()

修改属性

代码语言：javascript复制
// 修改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')

举例：

代码语言：javascript复制
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

代码语言：javascript复制
div1.className = 'red'
"red"



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

代码语言：javascript复制
div1.className  = 'blue'





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

代码语言：javascript复制
div1.classList.add('green')





修改内容

代码语言：javascript复制
// 修改文本内容
div.innerText = 'xxx'
div.textContent = 'xxx'

// 改HTML内容
div.innerHTML = '<strong>曾老湿</strong>'

// 改标签
div.innerHTML = '' // 先清空
div.appendChild(div2) // 再加内容

查看API

代码语言：javascript复制
// 查爸爸
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里面的所有元素

代码语言：javascript复制
// 遍历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))
运维 api 自动化 windows react

0 人点赞