与类相干的扩大
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);
};
没斟酌兼容性
