JavaScript DOM扩展——“HTML5”的注意要点

与类相关的扩充

getElementsByClassName()方法

接收一个参数，即一个或多个类名的字符串。如：

console.log(document.getElementsByClassName("info danger")); //HTMLCollection

他返回的对象是NodeList。

classList属性

该属性是DOMTokenList 的实例。主要的方法有：

• add(value)

• contaiin(value)

• remove(value)

• toggle(value)

如：

var p = document.querySelector(".info");
p.classList.add("danger");
console.log(p.classList.contains("danger")); //true
console.log(p.className); //info danger
p.classList.remove("info");
console.log(p.classList.contains("info")); //false
console.log(p.className); //danger
p.classList.toggle("helloWorld");
console.log(p.className); //danger helloWorld

如果不用classList属性，则需要通过className属性来操作。如：

以下面的代码为例：

<div id="divId" class="bd user disabled"></div>

js部分如下：

//删除 user 类
var div = document.getElementById("divId");

//首先取得类名并拆分成数组
var classNames = div.className.split(/\s+/);

var pos = -1,
    i,
    len;
for (i = 0, len = classNames.length; i < len; i++) {
    if (classNames[i] == "user") {
        pos = i;
        break;
    }
}

classNames.splice(i, 1);

div.className = classNames.join(" ");

console.log(div.className); //bd disabled

焦点管理

document.activeElement属性

这个属性会引用Dom中当前获得了焦点的元素。元素获得焦点的方式有页面加载、用户输入（Tab键）和在代码中调用focus()方法如：

var x = setTimeout(echo, 0);
function echo () {
    var data = document.activeElement;
    var newP = document.createElement("p");
    newP.appendChild(document.createTextNode(data));
    document.body.appendChild(newP);
    var y = setTimeout(echo, 1000);
}

以上代码会write当前获得焦点的元素；文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间则为null。

document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。如：

var btn = document.getElementById("btn");
btn.focus();
document.write(document.hasFocus()); //true

HTMLDocument的变化

readyState属性

该属性可能有两个值：loading（正在加载文档）；complete（加载文档完毕）用法是套用if条件语句：

document.write(document.readyState); //loading

var x = setTimeout(print, 2000);
function print () {
    document.write(document.readyState); //complete
}

compatMode属性（兼容模式）

这个属性就是为了告诉开发人员浏览器采用了哪种渲染模式。标准模式下为CSS1Compat；混杂模式下为BackCompat如：

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

head属性

引用文档的head元素，可以结合使用这个属性和另一种后备方法。

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

字符集属性

charset属性和defaultCharset属性

前者为文档中实际使用的字符集；后者为文档默认的字符集应该是什么；如：

if (document.charset != document.defaultCharset) {
    document.write('自定义字符集：' + document.charset); //自定义字符集：UTF-8
}

自定义数据属性

dataset属性和data-name形式的属性

前者是用来访问自定义属性的值；后者则是添加非标准属性的格式；如：

var p = document.getElementById("pId"); //获得属性
p.dataset.appid = "123"; //设置自定义属性的值
p.dataset.appId = "321"; //设置自定义属性的值
document.write(p.attributes[p.attributes.length - 2].nodeName); //data-appid
document.write(p.attributes[p.attributes.length - 1].nodeName); //data-app-id

插入标记

通过DOM操作对要插入大量新的HTML标记下非常麻烦；使用插入标记技术则更加方便。

innerHTML属性

在读模式下，该属性返回HTML标记；如：

var div = document.getElementById("content");
console.log(div.innerHTML); //chrome会原原本本的返回文档的格式，包括缩进：
        // <p>this is a <strong>paragraph</strong> with a list follwing it.</p>
        //     <ul>
        //         <li>Item 1</li>
        //         <li>Item 2</li>
        //         <li>Item 3</li>
        //     </ul>

在写模式下，该属性则根据指定创建新的DOM树，然后会用这个DOM树完全替换掉原先的所有子节点；如：

var newP = document.createElement("p");
newP.innerHTML = "<i>good ...</i>";
document.body.appendChild(newP);

不通的浏览器返回的文本格式会有所不同，不要指望所有浏览器返回的值完全一样。

如果设置的值没有HTML标签，那么结果就是设置纯文本。

另外，需要注意的是，该属性插入script元素并不会执行其中的脚本。但在IE8及更早的中，元素script被指定为defer属性以及位于“有作用域的元素”之后才会执行。

大多数浏览器都支持插入style元素，但IE8及更早的版本则需要前置一个“有作用域的元素”。

不支持innerHTML属性的元素有：col、colgroup、frameset、head、html、style、table、tbody、thead、tfoot和tr。

在IE8中，window.toStaticHTML()方法接收一个HTML字符串，返回一个经过无害处理后的版本。

outerHTML属性

同样的，在读模式下返回调用它的元素及所有子节点的HTML标签。在写模式下，会创建新的DOM子树，然后用这个DOM子树完全替换调用元素。如：

var div = document.getElementById("content");
div.outerHTML = "<p>hello there</p>"; //该属性直接用p元素替换了div元素

innerHTML与outerHTML两者的区别如下：

var div = document.getElementById("content");
console.log(div.innerHTML);
console.log(div.outerHTML);
// [L] testingjs.js:2 
//         <p>this is a <strong>paragraph</strong> with a list follwing it.</p>
//             <ul>
//                 <li>Item 1</li>
//                 <li>Item 2</li>
//                 <li>Item 3</li>
//             </ul>
     
// [L] testingjs.js:3 <div id="content">
//         <p>this is a <strong>paragraph</strong> with a list follwing it.</p>
//             <ul>
//                 <li>Item 1</li>
//                 <li>Item 2</li>
//                 <li>Item 3</li>
//             </ul>
//     </div> 

div.innerHTML = "<p>end</p>";
console.log(div.innerHTML);
console.log(div.outerHTML);
// [L] testingjs.js:22 <p>end</p> 
// [L] testingjs.js:23 <div id="content"><p>end</p></div> 

insertAdjacentHTML()方法

该方法接收两个参数：一个是要插入的位置；另一个是要插入的HTML文本。第一个参数可选择以下值：

• beforebegin：在当前元素之前插入一个相邻的同辈元素；

• afterend：在当前元素之后插入一个相邻的同辈元素；

• beforeend：在最后一个子元素之后再插入一个新的子元素；

• afterbegin：在第一个子元素之前再插入一个新的子元素；

如下：

var div = document.getElementById("content");
console.log(div.outerHTML); //<div id="content"><p>para</p></div> 

div.insertAdjacentHTML("beforebegin", "<p>new para</p>");
console.log(div.parentNode.outerHTML); //<p>new para</p><div id="content"><p>para</p></div>

div.insertAdjacentHTML("afterend", "<p>another para</p>");
console.log(div.parentNode.outerHTML); //<p>new para</p><div id="content"><p>para</p></div><p>another para</p>

div.insertAdjacentHTML("afterbegin", "<p>new child para</p>");
console.log(div.outerHTML); //<div id="content"><p>new child para</p><p>para</p></div>

div.insertAdjacentHTML("beforeend", "<p>another child para</p>");
console.log(div.outerHTML); //<div id="content"><p>new child para</p><p>para</p><p>another child para</p></div>

scrollIntoView()方法

该方法可以在所有HTML元素上调用，如果给这个方法传入true，或者不传入参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入FALSE，调用元素会尽可能全部出现在视口中。如：

document.body.onclick = function view() {
    var p = document.getElementById("pId");
    var sH = window.innerHeight;
    p.style.height = sH + "px";
    console.log(sH);

    p.scrollIntoView(false);
};

没考虑兼容性