DOM扩展实例代码教程

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 = myp.firstElementChild;
            while(child != myp.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页