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

沒考慮兼容性