前言
DOM(Docoment Object Model) 即文档对象模型。也就是 JS 通过 Document 来操作网页。本文将涉及 DOM 操作的基础知识(增删改查)。从 DOM 的基础操作了解 DOM 究竟有多难用。后面我们将会来封装一个 DOM 的库。从此不惧怕难搞的 DOM 。
获取元素
有许多API
window.xxx 或者直接xxx //元素有 id
document.getElementById('xxx') // 通过 id 获取元素
document.getElementsByTagName('div')[0] // 通过标签名获取元素，需注意的是由于获取的是尾数组，所以要加上下标
document.getElementsByClassName('red')[0] //通过 class 属性名获取元素，也需要加下标
document.querySelector('xxx') // 推荐用法。兼容以上所有 api 的功能。
document.querySelectorAll('.red')[0] // 推荐用法。获取是该条件下所有的元素。所以要得到具体的元素需加下标。
用哪一个
- 工作中用
querySelector和querySelectorAll。 - 做 demo 时方便选取直接 id xxx。
- 如果要兼容 IE 的话，才用 getElement(s)ByXXX
获取特定元素
获取 html 元素
document.documentElement
获取 head 元素
document.head
获取 body 元素
document.body
获取窗口 (窗口不是元素)
window
获取所有元素
document.all
document.all 这个 API 是第 7 个 falsy 值。
document.all ? console.log(1) : console.log(2)
// 2
别问，问就是 IE 的锅。有兴趣者自己百度。
还有其余6个 falsy 值分别是 false 、"", '', `` 、null 、 undefined 、NaN 、 0
节点的增删改查
增
创建一个标签节点
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 线程中
- 必须把它插到 head 或者 body 里面，才会生效
- document.body.appendChild(div)
- 或者
- 已在页面中的元素.appendChild(div)
删
两种方法
旧方法: parentNode.removeChild(childNode)
新方法: childNode.remove()
改属性
写标准属性
改 class: div.className = 'red blue' (全覆盖)
改 class: div.classList.add('red') // 在原基础上增加
改 style: div.style = 'width: 100px;color:blue;'
改 style 的一部分: div.style.width = '200px'
大小写: div.style.backgroundColor = 'white'
改 data-*属性: div.dataset.x = 'wuxuwei'
读标准属性
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.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))
网友评论