JavaScript DOM 编程之扩展篇

1.选择符API    ①querySelector(),接受一个css选择符，返回一个元素    ②querySelectorAll(),接受一个css选择符，返回元素集合    ③matchesSelector(),接受一个css选择符，如果匹配成功，返回true2.元素遍历  对于元素之间的空格，各个浏览器返回不一，为了弥补此类问题，定义了一下属性    ①childElementCount：返回子元素（不包括文本节点和注释）的个数。    ②firstElementChild：指向第一个子元素；firstChild 的元素版。    ③lastElementChild：指向最后一个子元素；lastChild 的元素版。    ④previousElementSibling：指向前一个同辈元素；previousSibling 的元素版    ⑤nextElementSibling：指向后一个同辈元素；nextSibling 的元素版。3.HTML5     ①通过class名称来查找元素document.getElementsByClassName();    ②classList属性是一个DOMTokenList实例，可以操作class        a.add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了        b.contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。        c.remove(value)：从列表中删除给定的字符串        d.toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它        eg：遍历class元素的值            var div = document.getElementsByClassName("green")[0];            // alert(className[0].tagName);     // div            for(var i = 0, len = div.classList.length; i < len; i++) {                alert(div.classList.item(i));               }        e.原理            function deleteClass(ele, delClassName) {                var classNames = ele.className.length > 0 ? ele.className.split(/\s+/) : [],                    i, len, pos;                if(classNames.length > 0) {                    for(i = 0, len = classNames.length; i < len; i++) {                        if(classNames[i] == delClassName) {                            pos = i;                            break;                        }                    }                    classNames.splice(i, 1);    // 删除指定值                    ele.className = classNames.join(" ");                   }            }            var div = document.getElementsByClassName("green")[0];            deleteClass(div, "green");            deleteClass(div, "black");    ③焦点管理        a.document.activeElement返回获取焦点的元素        b.document.hasFocus()判断某个元素是否获得焦点    ④HTMLDocument的变化        a.document.readyState属性，判断文档是否加载完毕,返回值为loading或者complete        b.兼容模式  document.compatMode == "CSS1Compat" 表示标准模式，其他表示混杂模式        c.document.head 表示获取head元素    ⑤字符集属性,浏览器尚未完全支持        a.document.charset 表示获取charset        b.document.defaultCharset 表示获取浏览器默认字符    ⑥自定义属性,浏览器尚未完全支持        a.在html中设置  <div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>        b.设置    ele.dataset.appId = 123456; // set        c.获取    alert(ele.dataset.appId);    ⑦插入标记        a.innerHTML属性       读模式下，返回它的子元素字符串；写模式下，完全覆盖它的子元素的DOM字符串        a.outerHTML属性       读模式下，返回它以及它的子元素字符串；写模式下，完全覆盖它以及它的子元素的DOM字符串        c.insertAdjacentHTML()方法，在指定位置添加html文本            1)"beforebegin"，在当前元素之前插入一个紧邻的同辈元素；            2)"beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；            3)"afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；            4)"afterend"，在当前元素之后插入一个紧邻的同辈元素。        4.内存与性能问题   不推荐频繁操作    ⑧scrollIntoView问题       通过滚动浏览器窗口或者某个容器元素，调用元素就可以出现在视口中4.专有扩展    ①文档模式   document.compatMode    ②children属性 只包含元素节点，忽略空白节点    ③contains()方法，判断某个节点是否为某个节点的后代节点        eg: 判断两个节点的前后关系            function contains(refNode, otherNode){                if (typeof refNode.contains == "function" &&(!client.engine.webkit || client.engine.webkit >= 522)){                    return refNode.contains(otherNode);                // compareDocumentPosition返回一个掩码                    // 无关(1)、居前(2)、居后(4)、包含(8)、被包含(16)                } else if (typeof refNode.compareDocumentPosition == "function"){                    return !!(refNode.compareDocumentPosition(otherNode) & 16);                } else {                    var node = otherNode.parentNode;                    do {                        if (node === refNode){                            return true;                        } else {                            snode = node.parentNode;                        }                    } while (node !== null);                    return false;                }            }            alert(contains(document.documentElement, document.body));   // true    ④插入文本   innerText属性和outerText属性，和innerHTML和outerHTML属性类似