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))
复制代码