Javascript自学随笔：DOM
DOM 是 HTML和XML的API，允许用户增改查删网页上的元素。
Node关系
node.childNodes[x]: 读取子节点
node.item(x):同理
NodeList转化为Array:
let array = Array.prototype.slice.call(node, 0)
node.nextSubling：下一个
node.previousSubling：前一个
node.parentNode：母节点
操作node
node.appendChild(newNode): 增，如果newNode已经存在，则移动newNode。
node.insertBefore(left, right):最后是(left, null), 第一是(newNode, node.firstChild)
node.replaceNode(new, old)
node.removeNode(delNode): 取消reference但不会立刻清除出内存。
定位元素
document.getElementById
document.getElementsByTagName
document.getElementsByName：Name attribute。
document.getElementsByClassName
document.querySelector
document.querySelectorAll: 返回的NodeList是快照，不是动态列表。
怎样获取当前文档所有的元素节点？
方法1: 使用document.getElementsByTagName("");
方法2: 使用document.querySelectorAll("");
*方法3:traversal/range方法比如，let iter = document.createTreeWalker(root, whatToShow, filter), let node = iter.nextNode(). node.tagName判断类型。 (也支持previousNode()
存取参数
getAtrribute, setAtrribute,removeAttribute
createElement
HTML5
querySelector:…
classList
focus
element.focus()
document.hasFocus()
HTMLDocument:
document.readyState： loading或者complete
自定义参数
data-xxxx:
读取：dataset.xxxx
InnerHTML（不建议使用）
1.如果一个元素绑定event handler，改写innerHTML不会清理掉event handler。
2.不要用innerHTML实现一些user input的功能，防止用户运行恶意代码段。
InnerHTML:
大段改写增加HTML。只包含子nodes
div.innerHTML = “XXXXXXXXXXXXXXXXXXXXXX”
这里不能执行
CSS-IN-JS
css可用[node].style.[attribute]来获取。
常用方法有getPropertyCSSValue, getPropertyValue, index, setProperty, removeProperty
有时你需要获取node上渲染后作用的CSS，使用document.defaultView.getComputedStyle(node)。只读不写。
有时你需要直接操作css表本身，而不通过节点，你需要let sheet = document.styleSheets[n]. 每个rule通过sheet.cssRules[n]读取。rule.selectorText === "xxx"判断选择器，rule.style.xxxx获取css元素。sheet.insertRule()来添加cssRule。
元素尺寸element dimenstions:
offset dimensions: read only, offsetParent不一定是parentNode，
client dimension:
scroll dimension: