DOM编程基础

2022-07-22  本文已影响0人  饥人谷_折纸大师

如图所示，网页是一棵树。


截屏2022-07-22 08.53.14.png

那么JavaScript是如何操纵这棵树的呢？
答案是：浏览器往window上加一个document，JS通过document操纵网页。
这就是Document Object Model 文档对象模型，简称DOM。

DOM常用的API

获取任意元素

//获取元素的API
window.idxxx//或者直接idxxx(id名不能和全局属性冲突)
document.getElementById('idxxx')
document.getElementsByTagName('div')[0]//找到所有有标签为div的元素，后面是数组下标
document.getElementsByClassName('red')[0]//找到类名为red的元素
//以上三个只有需要兼容IE时才用
document.QuerySelector('#idxxx')
document.QuerySelectorAll('red')[0]
//工作中基本使用以上两种
//做demo直接用idxxx

获取特定元素

元素的六层原型链

截屏2022-07-22 10.02.58.png
节点Node，用x.nodeType可以得到包括以下的数字：

节点的增删改查

创建元素

//创建一个标签节点
let div1 = document.createElement('div')//创建div
document.createElement('style')//创建style
document.createElement('script')//创建script
document.createElement('li')//创建li
//创建一个文本节点
text1 = document.createTextNode('你好')
//在标签里插入文本
div1.appendChild(text1)
div1.innerText('你好')
div1.textContent = '你好'

这样创建的div标签默认只会处于JS线程里面，我们需要把它插入到head或者body中才会生效，document.body.appendChild(div1)
问题来了：如果页面中有div#test1和div#test2

let div = document.createElement('div')
test1.appendChild(div)
test2.appendChild(div)

最终div会存在于test2里面，因为一个元素不能存在于两个地方，除非复制
let div2 = div.cloneNode(true)//复制操作，true为深拷贝
test1.appendChild(div2)

删除元素

parentNode.removeChild(chileNode)//旧方法
childNode.remove()//新方法,兼容性有问题
此方法只是将元素移除，依然存在于JS线程中，如有需要可以返回页面。
如果要彻底删除，在移除后，使其成为空即可

div2.remove()
div2 = null

改元素属性

//改class
div.className = 'red blue'//全覆盖
div.classList.add('red')
//改style
div.style = 'width:100px;color:blue'
//改style的局部
div.style.width = '200px'
div.style.backgroundColor = 'white'
//改data-*属性
div.dataset.x = 'frank'

读标准属性

div.classList / a.href
div.getAttribute('class') / a.getAttribute('href')

改事件处理函数

div.onclick//默认为null
默认点击div不会有任何事件发生，但是如果把div.onclick改为一个函数fn，那么点击div的时候，浏览器就会调用这个函数调用方式如下

fn.call(div, event)
//event则包含了点击事件的所有信息，如坐标
//div被当成this

改内容

//改文本内容
div.innerText = 'xxx'
div.textContent = ''//二者几乎没有区别
//改HTML内容
div.innerHTML = '<strong>重要内容</strong>'
//改标签
div.innerHTML = ''//先清空
div.appendChild(div2)//再加内容

查元素

//查大儿子
node.firstChild
//查小儿子
node.lastChild
//查看上一个兄弟元素
node.previousSibling
//查看下一个兄弟元素
node.nextSibling

//遍历一个div所有元素
travel = (node, fn) => {
fn(node)
if (node.children) {
for (let i = 0; i < node.children.length; i++) {
travel(node.children[i], fn)
}
}
}
travel(div1, (node) => console.log(node))

DOM跨线程操作

跨线程操作
各线程各司其职

properties 和 attributes

上一篇 下一篇

猜你喜欢

热点阅读