DOM

Node关系操作node定位元素存取参数HTML5classListfocus自定义参数InnerHTML（不建议使用）CSS-IN-JS 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: