JavaScript 在经过这几年的进化之后，
原本大家习惯使用第三方函示库（例如 jQuery）包装的 DOM 操作方法，
现在都能够使用原生的 JavaScript 来达成了。
参考：https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/
【一、查询和取得 DOM】
我们有很方便的 querySelector() 和 querySelectorAll() 方式来取得 DOM。
// 取得单一元素
const oneElement = document.querySelector('#foo > div.bar')
// 取得所有符合的元素
const allElements = document.querySelectorAll('.bar')
可以透过 matches() 方式检查元素是否符合指定的选择器。
oneElement.matches('div.bar') === true
也可以在特定的元素底下继续查询。
const button = allElements.querySelector('button[type="submit"]')
那以前惯用的 getElementById()、getElementsByTagName() 呢？
当然也可以使用，但是 querySelector 不能动态更新查询到的元素。
const elementsNew = document.querySelectorAll('div')
const elementsOld = document.getElementsByTagName('div')
// 动态插入一个新的 div
const newDiv = document.createElement('div')
document.body.appendChild(newDiv)
// elementsOld 会拿到 newDiv；elementsNew 则否。
elementsNew.length !== elementsOld.length
把 querySelectorAll() 回传的 NodeList 转成 Array 之后，
就能用 forEach() 方式走访每个元素。
Array.from(allElements).forEach(element => {
// do something...
})
// IE 还不支援 Array.from()，可以用：
Array.prototype.forEach.call(allElements, element => {
// do something...
})
// 更短的写法：
[].forEach.call(allElements, element => {
// do something...
})
【二、修改 class 和属性】
要修改元素的 class，可以用方便的 classList 操作。
oneElement.classList.add('baz')
oneElement.classList.remove('baz')
oneElement.classList.toggle('baz')
// 检查是否有指定的 class
oneElement.classList.contains('baz')
要修改元素的属性（attribute），直接指定给该元素即可。
// 取得属性
const oneValue = oneElement.value
// 设定属性
oneElement.value = 'hello'
// 一口气设定好多种属性，用 Object.assign()
Object.assign(oneElement. {
value: 'hello',
id: 'world'
})
// 要删除属性，设定成 null 就好
oneElement.value = null
等等，那为何不用 getAttribute()、setAttribute() 和 removeAttribute () 呢？
因为这些方式是直接修改 HTML 的属性，会导致浏览器进行重绘（redraw），
对效能来说是很大的影响（换句话说就是很慢）。
但如果你要修改的属性真的需要重绘画面（例如表格的 colspan 属性等等）时例外。
要修改元素的 CSS 样式，可以存取 style 物件。
oneElement.style.paddingTop = '2rem'
要取得元素的 CSS 值，可以像上面一样透过 style 物件，
也可以透过 window.getComputedStyle() 取得实际的值。
window.getComputedStyle(oneElement).getPropertyValue('padding-top')
【三、修改 DOM】
// 在 element1 里插入一个 element2
element1.appendChild(element2)
// 在 element1 里的 element3 之前插入一个 element2
element1.insertBefore(element2, element3)
世界上有 insertBefore() 却没有 insertAfter()，所以必须绕个圈。
// 在 element1 里的 element3 “之后”插入一个 element2
element1.insertBefore(element2, element3.nextSibling)
// 不能写成：
// element1.insertAfter(element2, element3)
// 复制 DOM
const newElement = oneElement.cloneNode()
element1.appendChild(newElement)
// 建立新的 DOM
const newElement = document.createElement('div')
const newTextNode = document.createTextNode('hello world')
// 移除 DOM，需要参照到亲元素
parentElement.removeChild(element1)
// 自己移除自己
element1.parentNode.removeChild(element1)
要修改元素的内容，传统的做法可以用 innerHTML：
oneElement.innerHTML = '<div>
<h1>hello world</h1>
</div>'
更好的做法是使用 DocumentFragment：
const text = document.createTextNode('continue reading...')
const hr = document.createElement('hr')
const fragment = document.createDocumentFragment()
fragment.appendChild(text)
fragment.appendChild(hr)
oneElement.appendChild(fragment)
【四、监听事件】
JavaScript 最重要的就是监听（listen）各种事件来触发程式码。
我们使用 addEventListener 来监听事件处理。
oneElement.addEventListener('click', function (event) {
// do something...
})
同时监听许多元素时，透过 event.target 来取得是哪个元素触发的。
Array.from(allElements).forEach(element => {
element.addEventListener('change', function (event) {
console.log(event.target.value)
})
})
只想让事件触发一次（jQuery 的 once）：
oneElement.addEventListener('change', function listener(event) {
console.log(event.type + ' got triggered on ' + this)
this.removeEventListener('change', listener)
})
【五、动画】
以前习惯用 window.setTimeout() 来做动画，
现在我们有更好更快的 window.requestAnimationFrame() 了。
const start = window.performance.now()
const duration = 2000
window.requestAnimationFrame(function fadeIn (now) {
const progress = now - start
oneElement.style.opacity = progress / duration
if (progress < duration) {
window.requestAnimationFrame(fadeIn)
}
}
【六、包装】
最后我们可以把这些方式全部包在一个 function 里。
就像 jQuery 一样，还可以炼式呼叫（chainable）
（例如： $('foo').css({color: 'red'}).on('click', () => {}) ）
const $ = function $(selector, context = document) {
const elements = Array.from(context.querySelectorAll(selector))
return {
elements,
html (newHtml) {
this.elements.forEach(element => {
element.innerHTML = newHtml
})
return this
},
css (newCss) {
this.elements.forEach(element => {
Object.assign(element.style, newCss)
})
return this
},
on (event, handler, options) {
this.elements.forEach(element => {
element.addEventListener(event, handler, options)
})
return this
}
// etc.
}
}
或者用 ES6 的 Class 来包装：
class DOM {
constructor(selector) {
const elements = document.querySelectorAll(selector)
this.length = elements.length
Object.assign(this, elements)
}
each(callback) {
for (let el of Array.from(this)) {
callback.call(el)
}
return this
}
addClass(className) {
return this.each(function () {
this.classList.add(className)
})
}
removeClass(className) {
return this.each(function () {
this.classList.remove(className)
})
}
hasClass(className) {
return this[0].classList.contains(className)
}
on(event, callback) {
return this.each(function () {
this.addEventListener(event, callback, false)
})
}
// etc.
}