Html5 常見的新增API詳解

1. getElementsByClassName()方法

getElementsByClassName()方法接收一個參數，即一個包含一或多個類名的字符串，返回帶有指定類的所有元素的NodeList。傳入多個類名時，類名的先后順序不重要。

//取得所有類中包含"username"和"current"的元素，類名的先后順序無所謂
var allCurrentUsernames = document.getElementsByClassName("username current");
//取得ID 為"myDiv"的元素中帶有類名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");

2. classList 屬性

• add(value)：將給定的字符串值添加到列表中。如果值已經存在，就不添加了。
• contains(value)：表示列表中是否存在給定的值，如果存在則返回true，否則返回false。
• remove(value)：從列表中刪除給定的字符串。
• toggle(value)：如果列表中已經存在給定的值，刪除它；如果列表中沒有給定的值，添加它。

//刪除"disabled"類
div.classList.remove("disabled");
//添加"current"類
div.classList.add("current");
//切換"user"類
div.classList.toggle("user");
//確定元素中是否包含既定的類名
if (div.classList.contains("bd") && !div.classList.contains("disabled")) {
    //執行操作
)
//迭代類名
for (var i = 0, len = div.classList.length; i < len; i++) {
    doSomething(div.classList[i]);
}

3、自定義數據屬性

HTML5 規定可以為元素添加非標准的屬性，但要添加前綴data-，目的是為元素提供與渲染無關的信息，或者提供語義信息。這些屬性可以任意添加、隨便命名，只要以data-開頭即可。來看一個例子。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

//本例中使用的方法僅用於演示
var div = document.getElementById("myDiv");
//取得自定義屬性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//設置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
//有沒有"myname"值呢？
if (div.dataset.myname) {
	alert("Hello, " + div.dataset.myname);
}

4、outerHTML 屬性

outerHTML 屬性和innerHTML 有點類似；

在讀模式下，outerHTML 返回調用它的元素及所有子節點的HTML 標簽。在寫模式下，outerHTML會根據指定的HTML 字符串創建新的DOM 子樹，然后用這個DOM子樹完全替換調用元素。下面是一個例子。

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

var oBox = document.getElementById('content');
// 讀模式下，返回的和innerHTML類似，只不過包括了div本身；
console.log(oBox.innerHTML);

使用outerHTML 屬性以下面這種方式設置值：

oBox.outerHTML = "<p>This is a paragraph.</p>";

這行代碼完成的操作與下面這些DOM 腳本代碼一樣：

var p = document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph."));
oBox.parentNode.replaceChild(p, oBox);

結果，就是新創建的<p>元素會取代DOM 樹中的<div>元素。

5、insertAdjacentHTML()方法

插入標記的最后一個新增方式是insertAdjacentHTML()方法。它接收兩個參數：插入位置和要插入的HTML 文本。第一個參數必須是下列值之一：

• "beforebegin"，在當前元素之前插入一個緊鄰的同輩元素；
• "afterbegin"，在當前元素之下插入一個新的子元素或在第一個子元素之前再插入新的子元素；
• "beforeend"，在當前元素之下插入一個新的子元素或在最后一個子元素之后再插入新的子元素；
• "afterend"，在當前元素之后插入一個緊鄰的同輩元素。

注意，這些值都必須是小寫形式。第二個參數是一個HTML 字符串（與innerHTML 和outerHTML的值相同），如果瀏覽器無法解析該字符串，就會拋出錯誤。以下是這個方法的基本用法示例。

//作為前一個同輩元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
//作為第一個子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");
//作為最后一個子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");
//作為后一個同輩元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");