DOM扩展
(一)选择符API
1.selector API level1 IE8+
querySelector() “body” “#myDiv” “.selected” (取类为此的第一个元素)
querySelectorAll() 返回一个NodeList实例,返回的值实际上是带有所有属性和方法的NodeList,底层类似于一组元素快照,而非对文档进行搜索的动态查询。这样实现可以避免使用NodeList对象通常会引起的大多数性能问题。
2.selector API level2
function matchesSelector(element, selector){
if (element.matchesSelector) {
return element.matchesSelector(selector);
}else if(element.msMatchesSelector){ // ie9 ms
return element.msMatchesSelector(selector);
}else if(element.mozMatchesSelector){ //firefox moz
return element.mozMatchesSelector(selector);
}else if(element.webkitMatchesSelector){ //chrom safair webkit
return element.webkitMatchesSelector(selector);
}else{
throw new Error("Not Supported.");
}
}
(二)元素遍历(Element Traversal)
IE9+、F3.5、S4+、CH、O10+
对于元素之间的空格,IE9之前版本不会反回文本节点,而其他所有浏览器都会返回文本节点。
// childElementCount
// firstElementChild (不包括文本节点和注释)
// lastElementChild
// previousElementSibling
// nextElementSibling
var i,
len,
child = mydiv.firstElementChild;
while(child != mydiv.lastElementChild){
processChild(child); //不用判断if(child.nodeType==1)
child = child.nextElementSibling;
}
(三)HTML5
1.getElementsByClassName() 返回NodeList
元素上调用只会返回后代元素匹配的元素。
classList(新集合类型DOMTokenList的实例) F3.6+ Ch
非HTML5删除类名 : 类名分割充足 splice删除一项后join拼接
HTML5: classList
//element.classList.remove(“box2”);
//element.classList.add(“box3”);
//element.classList.toggle(“box3”);
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)
data-appid=“myid”
element.dataset.appid (取值 设置 判断有无)
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){
if (typeof refNode.contains == "function" // safari <= 522
&& (!client.engine.webkit || client.engin.webkit >= 522)) {
return refNode.contains(otherNode);
}else if(typeof refNode.compareDocumentPosition == "function"){
return !!(refNode.compareDocumentPosition(otherNode) & 16);
}else{ //旧版本Safari
var node = otherNode.parentNode;
do{
if (node === refNode) {
return true;
}else{
node = node.parentNode;
}
}while(node !== null);
return false;
}
}
4.插入文本
element.innerText = element.innerText; //过滤掉了html标签
function getInnerText(element){
return (typeof element.textContent == "string")?
element.textContent : element.innerText;
}
function setInnerText(element, text){
if(typeof element.textContent == "string"){
element.textContent = text;
}else{
element.innerText = text;
}
}
innerText会忽略行内样式和脚本, textContent会像返回其它文本一样返回。
5.滚动
scrollIntoView
scrollIntoViewIfNeeded(true) true尽量在中部
scrollByLines(5) 5行
scrollByPages(5) 5页