摘要：如他返回的對(duì)象是。方法，這個(gè)方法用于確定文檔是否獲得了焦點(diǎn)。另外，需要注意的是，該屬性插入元素并不會(huì)執(zhí)行其中的腳本。在中，方法接收一個(gè)字符串，返回一個(gè)經(jīng)過無害處理后的版本。屬性同樣的，在讀模式下返回調(diào)用它的元素及所有子節(jié)點(diǎn)的標(biāo)簽。

接收一個(gè)參數(shù)，即一個(gè)或多個(gè)類名的字符串。如：

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

他返回的對(duì)象是NodeList。

該屬性是DOMTokenList 的實(shí)例。主要的方法有：

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屬性來操作。如：

以下面的代碼為例：

js部分如下：

//刪除 user 類
var div = document.getElementById("divId");

//首先取得類名并拆分成數(shù)組
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

這個(gè)屬性會(huì)引用Dom中當(dāng)前獲得了焦點(diǎn)的元素。元素獲得焦點(diǎn)的方式有頁面加載、用戶輸入（Tab鍵）和在代碼中調(diào)用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);
}

以上代碼會(huì)write當(dāng)前獲得焦點(diǎn)的元素；文檔剛剛加載完成時(shí)，document.activeElement中保存的是document.body元素的引用。文檔加載期間則為null。

document.hasFocus()方法，這個(gè)方法用于確定文檔是否獲得了焦點(diǎn)。如：

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

該屬性可能有兩個(gè)值：loading（正在加載文檔）；complete（加載文檔完畢）用法是套用if條件語句：

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

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

這個(gè)屬性就是為了告訴開發(fā)人員瀏覽器采用了哪種渲染模式。標(biāo)準(zhǔn)模式下為CSS1Compat；混雜模式下為BackCompat如：

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

引用文檔的head元素，可以結(jié)合使用這個(gè)屬性和另一種后備方法。

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

前者為文檔中實(shí)際使用的字符集；后者為文檔默認(rèn)的字符集應(yīng)該是什么；如：

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

前者是用來訪問自定義屬性的值；后者則是添加非標(biāo)準(zhǔn)屬性的格式；如：

var p = document.getElementById("pId"); //獲得屬性
p.dataset.appid = "123"; //設(shè)置自定義屬性的值
p.dataset.appId = "321"; //設(shè)置自定義屬性的值
document.write(p.attributes[p.attributes.length - 2].nodeName); //data-appid
document.write(p.attributes[p.attributes.length - 1].nodeName); //data-app-id

通過DOM操作對(duì)要插入大量新的HTML標(biāo)記下非常麻煩；使用插入標(biāo)記技術(shù)則更加方便。

在讀模式下，該屬性返回HTML標(biāo)記；如：

var div = document.getElementById("content");
console.log(div.innerHTML); //chrome會(huì)原原本本的返回文檔的格式，包括縮進(jìn)：
        // 
this is a paragraph with a list follwing it.
        //     

        //         
Item 1
        //         
Item 2
        //         
Item 3
        //     

在寫模式下，該屬性則根據(jù)指定創(chuàng)建新的DOM樹，然后會(huì)用這個(gè)DOM樹完全替換掉原先的所有子節(jié)點(diǎn)；如：

var newP = document.createElement("p");
newP.innerHTML = "good ...";
document.body.appendChild(newP);

不通的瀏覽器返回的文本格式會(huì)有所不同，不要指望所有瀏覽器返回的值完全一樣。

如果設(shè)置的值沒有HTML標(biāo)簽，那么結(jié)果就是設(shè)置純文本。

另外，需要注意的是，該屬性插入script元素并不會(huì)執(zhí)行其中的腳本。但在IE8及更早的中，元素script被指定為defer屬性以及位于“有作用域的元素”之后才會(huì)執(zhí)行。

大多數(shù)瀏覽器都支持插入style元素，但I(xiàn)E8及更早的版本則需要前置一個(gè)“有作用域的元素”。

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

在IE8中，window.toStaticHTML()方法接收一個(gè)HTML字符串，返回一個(gè)經(jīng)過無害處理后的版本。

同樣的，在讀模式下返回調(diào)用它的元素及所有子節(jié)點(diǎn)的HTML標(biāo)簽。在寫模式下，會(huì)創(chuàng)建新的DOM子樹，然后用這個(gè)DOM子樹完全替換調(diào)用元素。如：

var div = document.getElementById("content");
div.outerHTML = "
hello there
"; //該屬性直接用p元素替換了div元素

innerHTML與outerHTML兩者的區(qū)別如下：

var div = document.getElementById("content");
console.log(div.innerHTML);
console.log(div.outerHTML);
// [L] testingjs.js:2 
//         
this is a paragraph with a list follwing it.
//             

//                 
Item 1
//                 
Item 2
//                 
Item 3
//             
     
// [L] testingjs.js:3 

//         
this is a paragraph with a list follwing it.
//             

//                 
Item 1
//                 
Item 2
//                 
Item 3
//             
//     
 

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

該方法接收兩個(gè)參數(shù)：一個(gè)是要插入的位置；另一個(gè)是要插入的HTML文本。第一個(gè)參數(shù)可選擇以下值：

beforebegin：在當(dāng)前元素之前插入一個(gè)相鄰的同輩元素；

afterend：在當(dāng)前元素之后插入一個(gè)相鄰的同輩元素；

beforeend：在最后一個(gè)子元素之后再插入一個(gè)新的子元素；

afterbegin：在第一個(gè)子元素之前再插入一個(gè)新的子元素；

如下：

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

div.insertAdjacentHTML("beforebegin", "
new para
");
console.log(div.parentNode.outerHTML); //
new para
para

div.insertAdjacentHTML("afterend", "
another para
");
console.log(div.parentNode.outerHTML); //
new para
para
another para

div.insertAdjacentHTML("afterbegin", "
new child para
");
console.log(div.outerHTML); //
new child para
para

div.insertAdjacentHTML("beforeend", "
another child para
");
console.log(div.outerHTML); //
new child para
para
another child para

該方法可以在所有HTML元素上調(diào)用，如果給這個(gè)方法傳入true，或者不傳入?yún)?shù)，那么窗口滾動(dòng)之后會(huì)讓調(diào)用元素的頂部與視口頂部盡可能平齊。如果傳入FALSE，調(diào)用元素會(huì)盡可能全部出現(xiàn)在視口中。如：

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

沒考慮兼容性