将原生 DOM 操作按照类别分为以下五组:
document 对象的方法:
查找
- Element getElementById(string id)
- Array<Element> getElementsByClassName(string className)
- Array<Element> getElementsByTagName(string tagName)
- Array<Node> getElementsByName(string name)
- Node querySelector(string selector)
- Array<Node> querySelectorAll(string selector)
- Array<Element> forms()
创建
- Element createElement(string tagName)
- Node createTextNode(string text)
- Node cloneNode(bool isCopyChilds)
- Array<Element> createDocumentFragment()
node 对象的方法:
对于添加, 删除方法不管是新增还是替换节点, 如果其原本就在页面上, 那么原来位置的节点将被移除
添加
- parentNode.appendChild(childNode)
- parentNode.insertBefore(newNode, refNode)
删除
- parentNode.removeChild(childNode)
- parentNode.replaceChild(newNode, oldNode)
关系
- Node node.parentNode()
- Element node.parentElement()
- Array<Element> node.children()
- Array<Node> node.childNodes()
- Node node.firstChild()
- Node node.lastChild()
- Element node.firstElementChild()
- Element node.lastElementChild()
- Node node.previousSibling()
- Node node.nextSibling()
- Element node.previousElementSibling()
- Element node.nextElementSibling()
来源: http://www.jianshu.com/p/47842e798c39