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

2019-05-13 分类:JavaScript, 前端开发 阅读(28) 评论(0)

-曾老湿, 江湖人称曾老大。
-笔者QQ:133411023、253097001
-笔者交流群:198571640
-笔者微信:z133411023


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

那么我们来 说一下 querySelectorquerySelectorAll

// 类似于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))
关于 曾老湿
我只是一个躲在角落里瑟瑟发抖的小运维,随时准备给大佬端茶递水。
WeChat:z133411023
QQ:133411023
欢迎新朋友你的到来!
还没有人抢沙发呢~
昵称
邮箱
网站
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册