JS学习10（DOM扩展）

选择符API

这个API存在的主要目的就是让JS原生支持CSS查询。

querySelector()

这个方法接收一个CSS选择符，返回与该模式匹配的第一个元素或null。

var body = document.querySelector("body");

querySelectorAll()

这个方法同样接收一个CSS选择符，以静态NodeList的形式返回所有匹配的元素。

var strongs = document.querySelectorAll("p strong");
strong = strongs[i];
strong = strongs.item(i);

matchesSelector()

接收一个CSS选择符，并返回调用元素与该选择符是否匹配。

if (document.body.matchesSelector("body.page1")){
    //true
}

元素遍历

由于空白text类型节点的问题，childNodes里面会包含空的文本节点。这导致遍历元素很不方便。于是有了这几个属性，它们都只返回真正的元素：

• childElementCount
• firstElementChild
• lastElementChild
• previousElementSibling
• nextElementSibling

这样一来遍历元素就不用判断节点类型了：

var i, 
    len,
    child = element.firstElementChild;
while(child != element.lastElementChild){
    processChild(child);     
    child = child.nextElementSibling;
}

HTML5

与类相关的扩充

getElementsByClassName()
接收一个或多个类名，返回动态NodeList。

var selected = document.getElementById("myDiv").getElementsByClassName("username current");

classList
这个是便于大家添加，删除类名的，之前使用className属性获得的是一个字符串，每次要改变都得找出要改的那个，删除或改变，再拼出新的字符串。有了这个属性就方便多了。
classList是新的类型DOMTokenList的实例。提供了4个方法：

• add(value)
• contains(value)
• remove(value)
• toggle(value) 如果存在就删除，不存在就添加

div.classList.add("current");
div.classList.toggle("user");
div.classList.remove("user");
if (div.classList.contains("bd")) {

}

焦点管理

添加了document.activeElement属性，这个属性始终引用DOM中当前获得焦点的元素。默认情况下，当文档刚刚加载完成时，这里面保存的是body元素，加载过程中是null。
添加了document.hasFocus()方法，用于确定元素是否获得焦点。

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button);   //true
alert(document.hasFocus());  //true

HTMLDocument的变化

readyState属性
指示文档是否加载完成，有两个可能的值：loading和complete。

if (document.readyState == "complete"){    
}

兼容模式
区分渲染页面的模式是标准的还是混杂的。属性为document.compatMode。标准模式时值为CSS1Compat，混杂模式时为BackCompat。

if (document.compatMode == "CSS1Compat"){
    alert("Standards mode");
} else {
    alert("Quirks mode");
}

head属性
像body一样可以直接访问了document.head。

var head = document.head || document.getElementsByTagName("head")[0];

字符集属性

HTML5新增了几个与文档字符集有关的属性
charset表示文档中实际使用的字符集，默认为UTF-16，可以通过

<meta charset="UTF-8">

来设置，或者响应头部，或者在JS中直接设置这个属性。

alert(document.charset);
alert(document.defaultCharset);

另一个属性是defaultCharset，代表根据默认浏览器设置，字符集应该是什么。

自定义数据属性

使用data-加自定义名，可以定义自己的节点特性，在JS里使用dataset访问，这个属性的值是一个DOMStringMap的一个实例，也就是一个键值对的映射。访问时不用带data-前缀。

var div = document.getElementById("myDiv");
var appId = div.dataset.appId;
var myName = div.dataset.myname;
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
alert(div.dataset.myname);
alert(div.dataset.appId);
//就算原来没有写在DOM里的也可以设置,会同步到DOM里
div.dataset.haha = "hahaha";
alert(div.dataset.haha);

插入标记

使用插入标记，可以直接插入HTML字符串来构建DOM树。
innerHTML
在读模式下，返回与调用元素所有子节点对应的HTML标记的字符串。
在写模式下则会根据指定的值创建新的DOM树，然后替换调用元素所有子节点。

alert(document.body.innerHTML);
var div = document.getElementById("myDiv");
div.innerHTML = "<p>balalala</p><button>balalala</button>";

虽然绝大部分浏览器不支持在innerHTML中添加script节点，但是IE8是支持的，虽然有些特殊，要插入在有作用域的元素后。而且通过onclick等事件插入可执行的代码也是可能的。所以为了安全，在使用innerHTML时一定要注意安全。
style元素是被支持的。在IE8中有些特殊，要插入在有作用域的元素后。

//style元素是被支持的。在IE8中有些特殊，要插入在有作用域的元素后。
//失败
div.innerHTML = "<style type=\"text/css\">body {background-color: red; }</style>";
//成功
div.innerHTML = "_<style type=\"text/css\">body {background-color: red; }</style>";
//成功
div.innerHTML = "<input type=\"hidden\"><style type=\"text/css\">body {background-color: red; }</style>";

outerHTML
这个就是不止替换子元素，调用元素本身也被替换。
insertAdjacentHTML()
这个方法是在指定位置插入HTML文本，可以指定的位置有4个：

• before begin：在当前元素之前插入一个同辈元素
• after begin：插入在当前元素的所有子元素之前，作为当前元素的子元素
• beforeend：插入在当前元素的所有子元素之后，作为当前元素的子元素
• afterend：在当前元素之后插入一个同辈元素

element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");

内存与性能问题
在使用这个几个方法替换节点时，节点如果有一个事件处理程序或者引用了其他对象作为属性，这些东西可能还在内存中。所以最好先手动删除这些。
不过在插入新元素时，这个方法不管在编写上还是执行上都比我们使用DOM操作要高效的多，在执行这个方法时会创建一个HTML解析器，这个通常时浏览器级别的C++代码。
但是创建和销毁HTML解析器是要开销的，所以尽量减少调用次数，将字符串一次拼好在调用。

scrollIntoView()

div.scrollIntoView();
这个就是让屏幕滚动到这个元素所在的位置让大家能看见。传入true则尽量元素顶部与屏幕平齐，传入false则尽量多显示元素。
把当前元素设置为焦点也可以达到这个效果。

专有拓展

这些都是各个浏览器自己实现的，有的很普遍，有的很不普适。

文档模式

决定了可以使用什么功能，IE5，IE7，IE9等。
可以强制浏览器以什么方式渲染，通过HTTP头部的 X-UA-Compatible或meta标签。

<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">

其中IEVersion可以是Edge、EmulateIE9、EmulateIE8、EmulateIE7、9、8、7、5。
JS里也可以获取，IE中才有貌似。

var mode = document.documentMode;

children属性

只返回元素子节点，没有乱七八糟的文本节点

var childCount = element.children.length;

contains()方法

一个节点是不是另一个的后代

alert(document.documentElement.contains(document.body)); //true

插入文本

innerText

<div id="content">
    <p>This is a <strong>paragraph</strong> with a list following it.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul> 
</div>

对content使用innerText读：

This is a paragraph with a list following it.
Item 1
Item 2
Item 3

写的话就覆盖所有子节点，且会进行HTML编码去掉HTML标签避免生成多个节点。这个可以用来过滤用户输入哦。
有的浏览器不支持这个，但是支持textContent。

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;
    }
}

outerText
读时与innerText一样，写时覆盖调用节点。