DOM 编程

前言

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))