成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

HTML5與類有關(guān)的擴(kuò)充

TwIStOy / 1066人閱讀

摘要：與類相關(guān)的擴(kuò)充在開發(fā)領(lǐng)域得到廣泛采用后導(dǎo)致了一個(gè)很大的變化，即屬性用得越來越多，一方面可以通過它為元素添加樣式，另一方面還可以用它表示元素的語義。在對(duì)象上調(diào)用始終會(huì)返回與類名匹配的所有元素，在元素上調(diào)用該方法就只會(huì)返回后代元素中匹配的元素。

對(duì)于傳統(tǒng)HTML而言，HTML5是一個(gè)叛逆。所有之前的版本對(duì)JavaScript接口的描述都不過三言兩語，主要篇幅都用于定義標(biāo)記，與JavaScript相關(guān)的內(nèi)容一概交由DOM規(guī)范去定義。

而HTML5規(guī)范則圍繞如何使用新增標(biāo)記定義了大量JavaScript API。其中一些API與DOM重疊，定義了瀏覽器應(yīng)該支持的DOM擴(kuò)展。

與類相關(guān)的擴(kuò)充

HTML4在Web開發(fā)領(lǐng)域得到廣泛采用后導(dǎo)致了一個(gè)很大的變化，即 class 屬性用得越來越多，一方面可以通過它為元素添加樣式，另一方面還可以用它表示元素的語義。于是，自然就有很多JavaScript代碼會(huì)來操作CSS類，比如動(dòng)態(tài)修改類或者搜索文檔中具有給定類或給定的一組類的元素，等等。為了讓開發(fā)人員適應(yīng)并增加對(duì)class 屬性的新認(rèn)識(shí)，HTML5新增了很多API，致力于簡(jiǎn)化CSS類的用法。

getElementsByClassName() 方法

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

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

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

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

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

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

classList 屬性

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

…

這個(gè)

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

//刪除“user”類
//首先，取得類名字符串并拆分成數(shù)組
var classNames = div.className.split(/s+/);
//找到要?jiǎng)h的類名
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);
//把剩下的類名拼成字符串并重新設(shè)置
div.className = classNames.join(“ ”);

為了從

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

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

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

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

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

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

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

div.classList.remove(“user”);

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

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

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

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

鏈接

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/91902.html

相關(guān)文章

  • 紅皮書（10）：DOM擴(kuò)展

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

    ASCH 評(píng)論0 收藏0

  • 《JavaScript高級(jí)程序設(shè)計(jì)》筆記：DOM擴(kuò)展（十一）

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

    BenCHou 評(píng)論0 收藏0

  • JavaScript DOM擴(kuò)展——“HTML5”的注意要點(diǎn)

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

    cppowboy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<