内容简介：在当前MVVM大行其道的环境下提到DOM一词，很多人可能会感到有些诧异。这种差诧异或许来自于类似“都什么年底了还操作DOM啊”的声音！说的没错，MVVM时代，虚拟dom东征西战，一枝独秀，着实不可否认其强大的威力。然而，DOM操作作为前端的基础，自诞生以来便左右着我们的页面效果。随着JQuery十年戎马生涯的落幕，DOM似乎暗淡了许多，但其在前端中的左右却从未动摇。即使是MVVM框架下的例如ElementUl/IView等等最流行的ui库，打开他们的源码，依旧会有类似的dom.js/event.js等工具集
在当前MVVM大行其道的环境下提到DOM一词，很多人可能会感到有些诧异。这种差诧异或许来自于类似“都什么年底了还操作DOM啊”的声音！说的没错，MVVM时代，虚拟dom东征西战，一枝独秀，着实不可否认其强大的威力。
然而，DOM操作作为前端的基础，自诞生以来便左右着我们的页面效果。随着JQuery十年戎马生涯的落幕，DOM似乎暗淡了许多，但其在前端中的左右却从未动摇。即使是MVVM框架下的例如ElementUl/IView等等最流行的ui库，打开他们的源码，依旧会有类似的dom.js/event.js等 工具 集（这里暂且称其工具函数集合吧），这些ui库里面，避免不了基本的事件绑定啊/添加移除类啊等等。
不管任何时候，DOM依旧是前端必须掌握且需要投入一定时间研究的基础。不能只停留在jq事件的dom操作或者只是掌握那几个最常见的api。
:point_down:下面开始有趣的DOM之旅吧！
DOM
DOM全称Document Object Modal 文档对象模型
Node
Node是js的构造函数，所有节点都从Node上继承最常见的属性和方法，例如：
- childNodes/firstChild/nodeName/nodeType等
- appendChild()/cloneNode()/removeChild()等
- 其他更多
节点类型
document.nodeType // 文档节点，9
document.doctype.nodeType // 文档类型声明节点，10
document.createElement('a').nodeType // 元素节点，1
document.createDocumentFragment().nodeType // 11
document.createTextNode('aaa').nodeType // 文本节点，3
复制代码
节点的值
可以通过节点的 nodeValue 属性获取节点的值，但是除了 Text 和 Comment外 ，其余节点基本都返回 null
创建节点
// 创建元素节点，例如div
document.createElement('div')
// 创建文本节点
document.createTextNode('a text')
// 创建注释节点
document.createComment('a comment 节点')
复制代码
插入元素或文本
// 替换#app内部的内容
document.getElementById('app').innerHTML = '<div>asdasdasd</div>'
// 替换#app及其内容，本身也会被替换掉
document.getElementById('app').outerHTML = '<div>asdasdasd</div>'
// 创建一个文本节点，并替换#app内的内容
document.getElementById('app').textContent = 'a text'
---
上面这些方法，如果不是赋值，而是直接作为属性取值，则会返回取到的节点字符串
---
var app = document.getElementById('app')
// 在#app开始标签之前插入，#app需要有父节点
app.insertAdjacentHTML('beforebegin', '<span>hello</span>')
// 在#app开始标签之后插入
app.insertAdjacentHTML('beforeend', '<span>beforeEnd</span>')
// #app结束标签之前插入
app.insertAdjacentHTML('afterbegin', '<span>afterbegin</span>')
// 在#app结束标签之后插入，#app需要有父节点
app.insertAdjacentHTML('afterend', '<span>afterEnd</span>')
复制代码
插入节点
可以通过 appendChild() 和 insertBefore() 插入节点
// 插入节点
var div = document.createElement('div')
app.appendChild(div)
复制代码
insertBefore控制插入的位置，第一个参数是待插入节点，第二个参数是插入位置（即一个插入这个节点的前面，类似于一个参考节点）
// 将div节点插入到#app的第二个p节点的前面 app.insertBefore(div, p[1]) // 如果忽略第二个参数，则和appendChild一样，默认插入到最后面 app.insertBefore(div) 复制代码
移除节点/替换节点
移除一个节点，首先要找到该节点的父节点，然后在父节点上调用removeChild方法。
// 移除第二个p节点 p[1].parentNode.removeChild(p[1]) 复制代码
替换节点，先找到父节点，然后在父节点调用replaceChild方法，接收两个参数，第一个为新节点，第二个是待替换的节点
// 将第二个p节点替换成一个newdiv节点 p[1].parentNode.replaceChild(newdiv, p[1]) 复制代码
注意：这两个方法会返回被移除或替换的节点。该操作只是将节点从文档中移除，并不是真正的删除，其依旧存在于内存中，我们仍可以持有其引用。
克隆节点
- node.cloneNode()方法用来克隆节点，接收一个参数，如果为true则克隆该节点及其子节点，如果为false则只克隆该节点。
- 该方法会克隆节点的所有属性和内联事件，但是不会克隆addEventListener或node.onclick等形式添加的事件。
// 克隆#app节点 app.cloneNode(false) // 克隆#app及其子节点 app.cloneNode(true) 复制代码
目前其默认值是false，但是DOM4规范其默认行为发生了变化为true。所以考虑到兼容，必须传参数使用。
childNodes
返回一个类数组包含所有直属子节点（包括文本节点/注释节点）
/// 返回#app的所有直属子节点 app.childNodes // 验证该节点集合是实时的，而不是某一时刻的快照 var ns = app.childNodes app.innerHTML = "" console.log(ns) // #app被清空后，虽然之前定义了引用，这里依旧输出了空数组，因为是实时的。 // 可以借用数组方法将类数组转换成数组, es5: Array.prototype.forEach.call(ns) // es6中可以使用Array.from() Array.from(ns).forEach(e => console.log(e)) 复制代码
childNodes是实时的，而不是某一时刻的快照
html标签的换行会有文本节点产生，所以childNodes也会包含该文本节点。需要注意现代化开发的压缩代码，所以后续更多的只使用元素节点。
遍历DOM节点
普通节点
- app.parentNode 父节点
- app.firstChild 第一个子节点
- app.lastChild 最后一个子节点
- app.nextSibling 上一个兄弟节点
- app.previousSibling 下一个兄弟节点
元素节点
- app.parentElement 父元素节点
- app.children 所有子元素节点
- app.firstElementChild 第一个子元素节点
- app.lastElementChild 最后一个子元素节点
- app.nextElementSibling 上一个元素节点
- app.previousElementSibling 下一个元素节点
判断节点是否包含另一个节点
调用节点的contains方法，可以判断该节点是否包含参数节点，包含则返回true，否则false：
// #app是否包含p[1]这个节点 app.contains(p[1]) 复制代码
判断节点是否相等
具备以下条件，节点才相等：
- 节点类型相等
- 这些属性相等： nodeName/localName/namespaceURI/prefix/nodeValue
- attributes NameNodeMaps相等
- childNodes NodeLists相等 可以通过节点的isEqualNode方法判断
<input type="text">
<input type="text">
var ipts = document.querySelectorAll('input')
ipts[0].isEqualNode(ipts[1])
// 如果只是想判断是否是同一个节点引用，则可以使用全等运算符
ipts[0] === ipts[0]
复制代码
document下的节点
var doc = document doc.doctype // 指向<!DOCTYPE> doc.documentElement // 指向<html lang="en"> doc.head // 指向<head> doc.body // 指向<body> 复制代码
获取文档中聚焦/激活状态的元素引用
// 返回文档中聚焦或者激活状态的节点 document.activeElement // 判断文档是否有激活或聚焦状态的节点，返回true/false document.hasFocus() 复制代码
全局对象
可以通过 document.defaultView 获取顶部的对象（全局对象），在浏览器中全局对象是window， document.defaultView 指向的是这个值，在非浏览器环境则访问到的是顶部对象的作用域。
元素节点
// 创建,接收一个参数，即元素类型tagName，元素节点的tagName和nodeName的一样。
// 传入的值在被创建元素前都会被转换成小写。
document.createElement('div')
// 获取元素标签名,返回的都是大写
var div = document.createElement('div')
div.nodeName // DIV
div.tagName // DIV
复制代码
获取元素属性与值的集合
该属性是实时的类数组
doc.getElementById('txt').attributes
复制代码
操作元素的属性节点
<a href="http://www.baidu.com" id="a" data-other="other prop">百度网</a>
var a = document.getElementById('a')
// 获取属性节点
a.getAttribute('href')
a.getAttribute('data-other')
// 设置属性节点
a.setAttribute('data-src', 'src string')
// 移除属性节点
a.removeAttribute('href')
// 监测元素是否含有某个属性节点
a.hasAttribute('href')
复制代码
getAttribute如果没取到则返回null
setAttribute必须传2个参数
hasAttribute不管这个属性有没有值，都返回true
元素类名
可以通过 a.className 或 a.classList 获取元素类名。
className：
- 如果没有类名，返回""
- 类名会原样返回字符串，即使前后都有空格等
- 更改通过对其进行重新赋值
classList：
- ie9不支持
- 可以通过className模拟实现，有类似等profill库
- 有add/remove/contains/toggle等方法
// 添加
a.classList.add('f')
// 移除
a.classList.remove('a')
// 有则移除，无则添加
a.classList.toggle('e')
a.classList.toggle('b')
// 监测是否有某个类名
a.classList.contains('c')
复制代码
data-属性
// 获取data-属性：a.dataset.属性名，不存在则返回undefined a.dataset.other // 设置 a.dataset-other2 = 'data2' 复制代码
dataset在ie9中不支持，不过完全可以依旧使用getAttribute等属性使用
选择器
// id选择器
document.getElementById('app')
// 返回符合条件的首个元素节点
document.querySelector('#app')
// 返回符合条件的元素节点列表
document.querySelectorAll('li')
// 返回符合条件的标签列表
document.getElementsByTagName('div')
// 返回符合条件类名的节点
document.getElementsByClassName('flex1')
复制代码
querySelectorAll、getElementsByTagName、getElementsByClassName都是实时的，而不是快照。
这些方法都可以作用在节点上，从而在上下文中进行局部查找。
// children: 查找所有直接子元素
document.querySelector('ul').children
// html文档中方便使用的类数组列表
document.forms // 获取文档中所有的表单
document.images // 获取文档中所有的图片
document.links // 获取文档中所有的a标签
document.scripts // 获取文档中所有的scripts
document.styleSheets // 获取文档中所有的link和style
复制代码
元素偏移量
首先普及offsetParent概念：一个元素的祖元素中第一个position值不为static的那个元素。
-
offsetTop与offsetLeft是计算距其offsetParent元素的顶部距离和左边距离。（即距离祖元素中第一个position值不为static的祖元素的上边距离和左边距离）
getBoundingClientRect
getBoundingClientRect获取元素相对于视口（可视区域）的各个距离，有如下值：
offsetWidth/offsetHeight
var rect = app.getBoundingClientRect() rect.bottom rect.height rect.left rect.right rect.top rect.width 复制代码
元素尺寸
offsetWidth/offsetHeight
元素滚动距离
// 获取窗口的滚动距离
document.documentElement.scrollTop
document.body.scrollTop // ie
document.documentElement.scrollLeft
document.body.scrollLeft // ie
// 设置窗口的滚动位置
document.documentElement.scrollTop = 0
document.documentElement.scrollLeft = 0
document.body // ie
// 使某个元素滚动到可视区域
// 接收一个参数，true为滚动到可视区域顶部，false为滚动到可视区域底部。默认ture
document.querySelector('#app').scrollIntoView()
document.querySelector('#app').scrollIntoView(false)
复制代码
滚动元素的尺寸
如果一个元素设置为超出滚动后，那么scrollHeight将获取其滚动元素的尺寸，例如一个div宽高50，overflow: scroll;里面有一个高度为1000px的p，那么该div的scrollHeight尺寸为1000。
div.scrollHeight div.scrollWidth 复制代码
style
元素的style属性返回一个CSSStyleDeclaration对象，该对象包含元素的内联样式，而不是计算后的样式，如果没有给元素写样式，则通过该属性获取的值是空置。
var domStyle = document.querySelector('#app').style
// 获取高度，宽度
style.height
style.width
// 连字符的属性需要使用驼峰命名法
domStyle.fontSize
// 对于暴露字属性在前面加上css
domStyle.cssFloat // domStyle.float 谷歌上测试也可以
复制代码
style获取的是内联的属性，如果是写在样式表中的属性，是获取不到的。
获取的是实际的内联属性，而不是计算后的值。即使样式表中通过important等方式使得权重高于内联的，获取到的依旧是内联样式中写的值。 获取的颜色值是 rgb 的
style对象获取/设置/移除的其他方法
// 设置属性，不能写复合属性，例如background/margin，而是分开的写法：background-color/margin-left等
// 用-分割的写法，而不是驼峰
dom.setProperty('background-color', '#f00')
domStyle.setProperty('background-color', '#f00')
// 获取
domStyle.getPropertyValue(属性名)
domStyle.getPropertyValue('background-color')
// 移除
domStyle.removeProperty('background-color')
复制代码
style对象设置/获取/移除多个内联属性
// 批量设置多个内联属性
domStyle.cssText = 'background-color: #000;color: 20px;margin: 30px;'
// 移除全部内联属性
domStyle.cssText = ''
// 获取style属性的内联属性
domStyle.cssText
// 通过setAttribute/getAttibute/removeAttribute也是可以实现相同的效果
dom.setAttribute('style', 'background-color: #000;color: #f1f1f1; 20px;margin: 30px;')
dom.getAttribute('style')
dom.removeAttribute('style')
复制代码
获取计算后的属性
var winStyle = window.getComputedStyle(dom) winStyle.color winStyle.border winStyle.backgroundColor // 获取的是rgb颜色格式 winStyle.marginTop // 不能获取简写的格式，例如margin 复制代码
返回的颜色格式是rgb的格式，背景色返回的是rgba
不能获取简写的属性，例如margin/padding，而是marginTop
修改样式的最佳实践
更多的我们会通过给元素添加/移除某个class/id方式，来添加修改样式
DocumentFragment文档片段
DocumentFragment文档片段可以看作是一个空的文档模板，行为与实时DOM树类似，但是仅在内存中存在，可以附加到实时DOM中。
// 创建
document.createDocumentFragment()
// 例如：
var lis = ['hello! ', 'Every', 'bady'];
var fragment = document.createDocumentFragment();
lis.forEach(e => {
var liElem = document.createElement('li');
liElem.textContent = e;
fragment.appendChild(liElem)
})
dom.appendChild(fragment)
// 文档片段插入到dom后，自身的节点内容就没了。例如上面的例子：
dom.appendChild(fragment) // 第一次将文档片段的内容插入到dom后
dom.appendChild(fragment) // 执行相同的操作，并不会插入了，因为此时的文档片段内容没了。
// 为了文档片段的内容可以多次利用，可以利用克隆的方式
dom.appendChild(fragment.cloneNode(true))
复制代码
绑定事件
// 内联事件，基本不用
<div onclick="alert('a')"></div>
// 属性事件(DOM 0 级事件)
window.onload = function () {}
// 绑定事件（DOM 2 级事件），ps：没有1级事件
window.addEventListener('scroll', (e) => {
console.log(e)
}, false)
复制代码
易混事件区分
常见的click/onload/scroll/resize等事件就不介绍了。
// 鼠标按下，都是在输入法接收到键值之前
keydown // 任何按键按下都会触发，不管他是否产生字符码
keypress // 只有实际产生字符码才会触发，例如command键/option键/shift键等并不会触发
// 鼠标滑入
mouseenter // 鼠标滑入元素及其子元素时触发，不冒泡
mouseover // 鼠标滑入某个元素时触发，会冒泡
// 页面展示
window.onpageshow = function () {} // 展示页面时，触发
window.onload = function () {} // 页面加载完成后触发
// 两者的区别在于，从浏览器缓存读取的页面，并不会触发load事件，例如操作浏览记录的前进后退时
// 其他
offline // 离线时触发
online // 在线时触发
message // 跨文档传递时触发
hashchange // url中hash值的变化时触发
DOMContentLoaded // 页面解析完成后触发，资源不一定下载完成
复制代码
事件中的this/target/currentTarget
document.body.addEventListener('click', function (e) {
console.log(this)
console.log(e.currentTarget)
console.log(e.target)
console.log(this === e.target, this === e.currentTarget)
}, false)
// this
this指的是该事件绑定的元素或对象，这里指向body
// currentTarget
指的是该事件绑定的元素或对象，这里指向body，同this
// target
指的是事件的目标，可以理解为开始触发冒泡时的那个元素，或者说是鼠标点击的嵌套在最里面的那个元素。
这里指向div
复制代码
preventDefault
阻止事件的默认行为，例如a标签的跳转、输入框的输入等 。但是并不能阻止冒泡。
// 假设a是某个a元素
a.addEventListener('click', function (e) {
e.preventDefault()
}, false)
复制代码
stopPropagation
阻止事件冒泡,但不会阻止默认事件。
a.addEventListener('click', function (e) {
e.stopPropagation()
}, false)
复制代码
stopImmediatePropagation
stopImmediatePropagation方法不仅会阻止事件冒泡，还会阻止该元素在调用该方法后面的绑定事件的触发
app.addEventListener('click', function () {
console.log('app first')
}, false)
app.addEventListener('click', function (e) {
console.log('app second, 阻止app后面绑定的click事件的冒泡')
e.stopImmediatePropagation()
}, false)
// 此次的app事件绑定不会触发，因为已经被上面的stopImmediatePropagation方法阻止掉了
app.addEventListener('click', function (e) {
console.log('app third')
}, false)
document.body.addEventListener('click', function () {
console.log('body click')
}, false)
// 最终输出如下：
// app first
// style.html:98 app second, 阻止app后面绑定的click事件的冒泡
复制代码
自定义事件
// 自定义事件
var cusEvent = document.createEvent('CustomEvent');
// 配置自定义事件的详情
cusEvent.initCustomEvent('myNewEvent', true, true, {
myNewEvent: 'hello this is my new custom event!'
})
// 给#app绑定我们自定义的事件
var app = document.querySelector('#app');
app.addEventListener('myNewEvent', function (e) {
console.log(e.detail.myNewEvent)
}, false)
// 在app上触发自定义事件
app.dispatchEvent(cusEvent)
复制代码
initCustomEvent接收四个参数：事件名称，是否冒泡，是否可以取消事件，传递给event.detail的值
事件委托
事件委托利用事件流来完成，给父级绑定事件，然后判断触发事件的target，执行对应的事件。
例如：给表个中的td添加事件。
var tableBox = document.querySelector('#table-box');
tableBox.addEventListener('click', function (e) {
var target = e.target
if (target.tagName.toLowerCase() === 'td') {
console.log(target.textContent)
}
}, false)
复制代码
参考内容：
- 文章参考《dom启蒙》一书
- MDN资料文档
百尺竿头、日近一步。
我是愣锤，一名前端爱好者。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 掌握Kotlin Coroutine之 基础概念
- 掌握web开发基础系列--长度单位
- 前端面试基础(1年以内需掌握)
- 掌握移动web开发基础系列--viewport
- 后端开发应该掌握的Redis基础
- 数据分析师之快速掌握 SQL 基础
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Open Data Structures
Pat Morin / AU Press / 2013-6 / USD 29.66
Offered as an introduction to the field of data structures and algorithms, Open Data Structures covers the implementation and analysis of data structures for sequences (lists), queues, priority queues......一起来看看 《Open Data Structures》 这本书的介绍吧!
