HTML5與類有關的擴充

TwIStOy 發布于2019-08-22 11:10 / 1021人閱讀

摘要：與類相關的擴充在開發領域得到廣泛采用后導致了一個很大的變化，即屬性用得越來越多，一方面可以通過它為元素添加樣式，另一方面還可以用它表示元素的語義。在對象上調用始終會返回與類名匹配的所有元素，在元素上調用該方法就只會返回后代元素中匹配的元素。

對于傳統HTML而言，HTML5是一個叛逆。所有之前的版本對JavaScript接口的描述都不過三言兩語，主要篇幅都用于定義標記，與JavaScript相關的內容一概交由DOM規范去定義。

而HTML5規范則圍繞如何使用新增標記定義了大量JavaScript API。其中一些API與DOM重疊，定義了瀏覽器應該支持的DOM擴展。

與類相關的擴充

HTML4在Web開發領域得到廣泛采用后導致了一個很大的變化，即 class 屬性用得越來越多，一方面可以通過它為元素添加樣式，另一方面還可以用它表示元素的語義。于是，自然就有很多JavaScript代碼會來操作CSS類，比如動態修改類或者搜索文檔中具有給定類或給定的一組類的元素，等等。為了讓開發人員適應并增加對class 屬性的新認識，HTML5新增了很多API，致力于簡化CSS類的用法。

getElementsByClassName() 方法

HTML5添加的 getElementsByClassName() 方法是最受人歡迎的一個方法，可以通過document 對象及所有HTML元素調用該方法。這個方法最早出現在JavaScript庫中，是通過既有的DOM功能實現的，而原生的實現具有極大的性能優勢。

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

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

調用這個方法時，只有位于調用元素子樹中的元素才會返回。在 document 對象上調用 getElementsByClassName() 始終會返回與類名匹配的所有元素，在元素上調用該方法就只會返回后代元素中匹配的元素。

使用這個方法可以更方便地為帶有某些類的元素添加事件處理程序，從而不必再局限于使用ID或標簽名。不過別忘了，因為返回的對象是 NodeList ，所以使用這個方法與使用 getElementsByTagName() 以及其他返回 NodeList 的DOM方法都具有同樣的性能問題。

支持 getElementsByClassName() 方法的瀏覽器有IE 9+、Firefox 3+、Safari 3.1+、Chrome和Opera 9.5+。

classList 屬性

在操作類名時，需要通過 className 屬性添加、刪除和替換類名。因為 className 中是一個字符串，所以即使只修改字符串一部分，也必須每次都設置整個字符串的值。比如，以下面的HTML代碼為例。

…

這個

元素一共有三個類名。要從中刪除一個類名，需要把這三個類名拆開，刪除不想要的那個，然后再把其他類名拼成一個新字符串。請看下面的例子。

//刪除“user”類
//首先，取得類名字符串并拆分成數組
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(“ ”);

為了從

元素的 class 屬性中刪除 “user” ，以上這些代碼都是必需的。必須得通過類似的算法替換類名并確認元素中是否包含該類名。添加類名可以通過拼接字符串完成，但必須要通過檢測確定不會多次添加相同的類名。很多JavaScript庫都實現了這個方法，以簡化這些操作。

HTML5新增了一種操作類名的方式，可以讓操作更簡單也更安全，那就是為所有元素添加 classList 屬性。這個 classList 屬性是新集合類型 DOMTokenList 的實例。與其他DOM集合類似， DOMTokenList 有一個表示自己包含多少元素的 length 屬性，而要取得每個元素可以使用 item() 方法，也可以使用方括號語法。此外，這個新類型還定義如下方法。

add(value) ：將給定的字符串值添加到列表中。如果值已經存在，就不添加了。

contains(value) ：表示列表中是否存在給定的值，如果存在則返回 true ，否則返回 false 。

remove(value) ：從列表中刪除給定的字符串。

toggle(value) ：如果列表中已經存在給定的值，刪除它；如果列表中沒有給定的值，添加它。

這樣，前面那么多行代碼用下面這一行代碼就可以代替了：

div.classList.remove(“user”);

以上代碼能夠確保其他類名不受此次修改的影響。其他方法也能極大地減少類似基本操作的復雜性，如下面的例子所示。

//刪除“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]);
}

有了 classList 屬性，除非你需要全部刪除所有類名，或者完全重寫元素的 class 屬性，否則也就用不到className 屬性了。

支持 classList 屬性的瀏覽器有Firefox 3.6+和Chrome。

鏈接

云服務器 GPU云服務器接口與類的區別有關倉庫的數據有關大數據的 asp有關的書

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91902.html

紅皮書（10）：DOM擴展

摘要：取得所有類中包含和的元素。類名的先后順序無所謂取得為的元素中帶有類名的所有元素焦點管理也添加了輔助管理焦點的功能。首先就是屬性，這個屬性始終會引用中當前獲得了焦點的元素。另外就是新增了方法，這個方法用于確定文檔是否獲得了焦點。選擇符API querySelector()方法 // 取得body元素 var tbody = document.querySelector(body);...

ASCH 2019-08-21 12:09 評論0 收藏0
《JavaScript高級程序設計》筆記：DOM擴展（十一）

摘要：取得所有類中包含和的元素。類名的先后順序無所謂取得為的元素中帶有類名的所有元素焦點管理也添加了輔助管理焦點的功能。首先就是屬性，這個屬性始終會引用中當前獲得了焦點的元素。另外就是新增了方法，這個方法用于確定文檔是否獲得了焦點。選擇符API querySelector()方法 // 取得body元素 var tbody = document.querySelector(body); ...

BenCHou 2019-08-21 10:22 評論0 收藏0
JavaScript DOM擴展——“HTML5”的注意要點

摘要：如他返回的對象是。方法，這個方法用于確定文檔是否獲得了焦點。另外，需要注意的是，該屬性插入元素并不會執行其中的腳本。在中，方法接收一個字符串，返回一個經過無害處理后的版本。屬性同樣的，在讀模式下返回調用它的元素及所有子節點的標簽。與類相關的擴充 getElementsByClassName()方法接收一個參數，即一個或多個類名的字符串。如： console.log(documen...

cppowboy 2019-08-19 17:14 評論0 收藏0