DOM擴充套件

1.selector api level1 ie8+

queryselector() 「body」「#mydiv」「.selected」（取類為此的第乙個元素）

queryselectorall() 返回乙個nodelist例項，返回的值實際上是帶有所有屬性和方法的nodelist,底層類似於一組元素快照，而非對文件進行搜尋的動態查詢。這樣實現可以避免使用nodelist物件通常會引起的大多數效能問題。

2.selector api level2

function
matchesselector
(element, selector)else
if(element.msmatchesselector)else
if(element.mozmatchesselector)else
if(element.webkitmatchesselector)else
}

ie9+、f3.5、s4+、ch、o10+

對於元素之間的空格，ie9之前版本不會反回文字節點，而其他所有瀏覽器都會返回文字節點。

// childelementcount

// firstelementchild （不包括文字節點和注釋）

// lastelementchild

// previouselementsibling

// nextelementsibling

var i,
len,
child = mydiv.firstelementchild;
while(child != mydiv.lastelementchild)

1.getelementsbyclassname() 返回nodelist

元素上呼叫只會返回後代元素匹配的元素。

classlist（新集合型別domtokenlist的例項） f3.6+ ch

非html5刪除類名：類名分割充足 splice刪除一項後join拼接

html5： classlist

2.焦點 btn.focus();

document.activeelement    節點

document.hasfocus() 布林

3.htmldocument變化

（1）readystate (loading complete)

alert(document.readystate == 「complete」);

（2）相容模式 compatmode (標準：css1compat 混雜：compatmode)

（3）head屬性 document.head (ch s5)

var head = document.head || document.getelementsbytagname(「head」)[0];

4.字符集屬性 document.charset

ie safari opera chrome ie safari chrome

if (document.charset || document.defaultcharset)

fairfox

if (document.characterset)

5.自定義屬性（f6+ ch）

6.插入標記

html5規範

（1）innerhtml

為innerhtml設定html字串後瀏覽器會將這個字串解析為相應的dom樹，因此設定了innerhtml之後，再從中讀取html字串，會得到與設定時不一樣的結果，原因在於返回的字串時根據原始html字串建立的dom樹經過序列化之後的結果。

大多數瀏覽器這樣插入script指令碼不執行，除了<=ie8,<=ie8滿足兩種條件執行：

defer **在作用域標籤後跟著 <=ie9

element.innerhtml = 「

1.文件模式 document.documentmode

2.children <=ie8包含注釋 ie9+只返回元素節點

3.contains()

dom3 comparedocumentposition()

function
contains
(refnode, othernode)else
if(typeof refnode.comparedocumentposition == "function")elseelse
}while(node !== null);
return
false;
}}

4.插入文字

element.innertext = element.innertext;   //過濾掉了html標籤
function
getinnertext
(element)
function
setinnertext
(element, text)else
}

innertext會忽略行內樣式和指令碼， textcontent會像返回其它文字一樣返回。

5.滾動

scrollintoview

scrollintoviewifneeded(true) true盡量在中部

scrollbylines(5) 5行

scrollbypages(5) 5頁

DOM擴充套件

DOM擴充套件

DOM及其擴充套件

DOM的擴充套件

DOM擴充套件

DOM擴充套件

DOM及其擴充套件

DOM的擴充套件

相關推薦