DOM

Mianxiong
93 阅读2分钟

获取元素，也叫标签

API

  • window.idxxx 或者直接idxxx
  • document.getElementById('idxxx')
  • document.getElementsByTagName('div')[0]
  • document.getElementsByClassName('red')[0]
  • document.querySelector('#idxxx')，工作中用
  • document.querySelectorAll('.red')[0]，工作中用

1.png

获取特定元素

  • 获取html元素：document.documentElement

  • 获取head元素：document.head

  • 获取body元素：document.body

  • 获取窗口（窗口不是元素）：window

  • 获取所有元素：document.all，这个document.all是个falsy值

获取到的元素显然是一个对象

3.png

4.png

元素的6层原型链

html元素和元素的区别？

dom.png

节点的增删改查

增

//创建一个标签节点
let div1 = document.createElement('div')
document.createElement('style')
document.createElement('script')
document.createElement('li')

//创建一个文本节点
let text1 = document.createTextNode('你好')

//标签里面插入文本
div1.appendChild(text1)
div1.innerText = '你好' 
//div1.textContent = '你好'
//但是不能用div1.appendChild('你好')

//插入页面中
//创建的标签默认处于JS线程中
//必须把它插到head或者body里面，它才会生效
document.body.appendChild(div)
//或者 已在页面中的元素.appendChild(div)

删

//两种方法
//旧方法：parentNode.removeChild(childNode)
//新方法：childNode.remove()
//如果一个node被移出页面（DOM树），那么它还可以再次回到页面中

改

//写标准属性
div.className = 'red blue'//改class(全覆盖)
div.classList.add('red') //改class
div.style = 'width:100px;color:blue;'//改style
div.style.width = '200px' //改style的一部分
div.style.backgroundColor = 'white' //大小写
div.dateset.x = 'mx' //改data-*属性*

//读标属性
//div.classList / a.href
div.getAttribute('class') / a.getAttribute('href')//两种方法都可以，但值可能稍微有些不同

改事件处理函数

  • div.onclick默认为null 默认点击div不会有任何事情发生 但是如果你把div.onclick改为一个函数fn，那么点击div的时候，浏览器就会调用这个函数，并且是这样调用的fn.call(div,event)，div会被当做this，event则包含了点击事件的所有信息，如坐标

  • div.addEventListener

改内容

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

//想要找一个新爸爸
newParent.appendChild(div) //直接这样就可以了，直接从原来的地方消失

查

  • 查爸爸 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里面的所有元素
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操作是跨线程的

跨线程通信

  • 当浏览器发现JS在body里面加了个div1对象，浏览器就会通知渲染引擎在页面里也新增一个div元素，新增的div元素所有属性都照抄div1对象
  • 如果你有自定义属性，又想被同步到页面中，请使用data-作为前缀

资料来源：饥人谷

avatar
文章
阅读
粉丝