js原生dom方法總結

看風景就發表於2016-12-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方法

contains(node)(全相容,ie中只支援element)是否包含其他節點
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型別節點)
previousElementSibling (前一個兄弟element) (ie9+)
nextElementSibling (後一個兄弟element) (ie9+)

element插入文字
element.textContent (IE9+)
element.innerText(ie6+,ff45+,其他瀏覽器支援)
element.innerHTML(有html parse,效能遜於textContent)

element插入元素,html
//position beforebeigin/afterbegin/beforeend/afterend
element.insertAdjacentHTML(position, html)(全相容)
element.insertAdjacentElement(position, element)(ie8+,ff48+)

element修改class
element.classList(ie10+)

 

相關文章