加入一個元素中追加了2個文本節(jié)點 可以通過normalize()方法合并二個文本節(jié)點
splitText()可以分割子節(jié)點 一個文本節(jié)點分割成2 個 傳入分割下標根據(jù)字符來算
nodeList 其近親 NamedNodeMap HTMLCollection 都是整體上解析DOM的關鍵所在
這三個集合都是動態(tài)的 當文檔發(fā)生變化實時更新的 所以他們的信息都是最新的
HTMLCollection 是一個接口,表示 HTML 元素的集合,它提供了可以遍歷列表的方法和屬性
3者區(qū)別
var divs = document.getElementsByTagName("div");
alert(divs instanceof HTMLCollection); //true (chrome中返回false序六,divs是NodeList對象)
var div = document.getElementById("div1")
var children = div.childNodes; //獲取div元素子節(jié)點集合
alert(children instanceof NodeList); //true
var attrs = div.attributes; //獲取div元素的特性
1 alert(children instanceof NamedNodeMap); //true
以上代碼中挪凑,chrome下的document.getElementsByTagName("div")將返回NodeList對象批销。
這三個對象都是“類數(shù)組”戈次,可以獲取他們的length耸彪,也可以通過 attrs[0] 獲取數(shù)據(jù),有點類似與函數(shù)里面的arguments栈雳。
NamedNodeMap和Attr
div.attrbutes將返回一個NamedNodeMap對象护奈,即NamedNodeMap存儲是的div的“特性Attribute”集合。而集合中的每一個元素哥纫,都是Attr類型的對象霉旗。Attr對象有三個屬性,name蛀骇、value和specified厌秒。
但是在日常應用中,一般會應用getAttribute()松靡、setAttribute()和romoveAttribute()來操作特性简僧,不需要直接訪問特性對象
為什么說他們是動態(tài)的來看看這個
var divs = document.getElementsByTagName("div"),
i,
div;
for (i = 0; i < divs.length; i++) {
div = document.createElement("div");
document.body.appendChild(div);
}
總結一下就是說前面2個是獲取的元素存在NodeList 或者HTMLCollection中 而最后一個是屬性集合
擴展選擇器
selectors API Level 1 原聲的API 可以提高性能的選擇器
querySelector()單個元素第一個
querySelectorAll() 回去所有返回NodeLIst
selectors API Level 2
matchesSelector()判斷是否匹配 支持不好 需要加前綴msmatchesSelector()
mozmatchesSelector()
webkitmatchesSelector()