js原生dom方法总结

Posted 2020-08-25 等风来

1.document

document方法
getElementById (Node)返回指定节点的引用
getElementsByTagName (NodeList)返回文档中所有匹配元素的集合
querySelector (Node)返回与选择器匹配的首个节点 (ie8+)
querySelectorAll (Node)返回与选择器匹配的所有节点 (ie8+),其中ie8中选择器只支持css2选择器
createElement(name) (Node)返回新建的节点
createTextNode(text) (Node)返回新建的文本节点
documentElement (Node)返回html节点
body (Node)返回body节点
createDocumentFragment (Node)返回一个DocumentFragment类型的节点，用作一个轻量版本的 Document 使用，用于存储已排好版的或尚未打理好格式的XML片段。

2.node(包括element,text,attribute,document,comment等，Element只是nodeType=1时node)

node方法
appendChild(node) 添加一个子节点
removeChild(node) 移除一个子节点
replaceChilde(node) 替换一个子节点
insertBefore(newNode,refNode) 在同一层级的节点前面插入新节点
hasChildNodes() (Boolean)返回是否子节点
cloneNode(bDeep) (Node)返回节点的副本，bDeep表示是否复制其子节点

node属性
nodeName (String)节点名称
nodeType (Number)节点类型
nodeValue (String)节点的值
parentNode (Node)父节点的引用
childNodes (NodeList)子节点的列表
firstChild (Node)首个子节点
lastChild (Node)最后一个子节点
previouSibling (Node)前一个兄弟节点
nextSibling (Node)后一个子节点

3.element(可以有属性和子节点的node，对应XML中的一个tag元素，继承自node)

element方法
getAttribute(attrName) (string)返回属性的value
setAttribute(attrName,value) (string)给属性赋值
removeAttribue(attrName) (string)删除指定属性
getElementsByTagName(name) (NodeList)返回指定tag的节点列表
querySelector (Node)(ie9+)
querySelectorAll (NodeList)(ie8+)(:scope pseudo-class 不支持)

element属性
children （elementList)返回子元素列表(与子节点有区别，ie9+正确，ie6-8错误的包含Comment类型节点)