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

div.classList.remove("user") div.classList.add("userTwo") div.classList.toggle("user"): 存删缺设 div.classList.contains("user")

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: