HTML5の実戦とclassList属性の解析

黄舟

リリース： 2017-02-10 14:53:55

オリジナル

1829 人が閲覧しました

先ほど、HTML5 に新しく追加されたセレクター、つまり querySelector()、querySelectorAll()、getElementsByClassName() を紹介しました。これら 3 つはそれぞれ独自の機能を備えており、必要に応じて HTML5 の実戦や分析で関連するコンテンツを読み込むことができます。今回はclassList属性について紹介します。

classList 属性は具体的に何をするのでしょうか? ここでは classList をそのままにしておきます。複数のクラス名を持つ要素の中から、どのようにしてクラス名の 1 つを削除するかという問題を考え、Menglong は頭を悩ませ、最終的にそれを達成する方法を考え出しました。 li、meng、long の 3 つのクラス名のうち、meng を削除します。コードは以下の通りです

HTMLコード

<p class="li meng long">梦龙小站</p>

ログイン後にコピー

JavaScriptコード

//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];

//获取类名字符串并拆分成数组
var allClassName = p.className.split(" ");

//找到要删除的类名
var i, len, 
	pos = -1;

for(i=0, len = allClassName.length; i < len; i++){
	if(allClassName[i] == "meng"){
		pos = i;
		break;
	}
}

//删除类名
allClassName.splice(pos, 1);

alert(allClassName) //li,long

//将其余的类名拼成字符串并重新添加到元素的类名中
p.className = allClassName.join(" ");

ログイン後にコピー

プレビュー効果

HTML5の実戦とclassList属性の解析

要素クラスから「meng」を削除するには名前、上記のコードはすべて必須です。同様のアルゴリズムを使用してクラス名を置換し、クラス名が要素に含まれているかどうかを確認します。クラス名を追加する場合は、文字列を結合することで完了できますが、操作を簡素化するために、同じクラス名が複数回追加されないことを検出を通じて確認する必要があります。クラス名を削除するには、まず既存のクラス名を取得し、クラス名を削除する場所を見つけて削除する必要があります。

上記のメソッドから、単純な削除機能を実装するには、数行のコードを記述する必要があることがわかります。数行のコードを書きたくない場合は、ライブラリを導入してメソッドを使用する必要があります。図書館で。 HTML5 では、HTML5 の classList 属性を使用してこれらの手順を完了することができます。この classList 属性は、新しいコレクション型 DOMTokenList のインスタンスです。他の DOM コレクションと同様です。 DOMTokenList には、含まれる要素の数を示す length 属性があります。各要素を取得するには、item() メソッドまたは角かっこ構文を使用できます。さらに、この新しいタイプに対して定義されたメソッドを以下に示します。

1.remove(value)

remove(value)メソッドは、指定された文字列をリストから削除することを意味します。小さな例は次のとおりです:

HTMLコード

<p class="li meng long">梦龙小站</p>

ログイン後にコピー

JavaScriptコード

//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];

alert(p.classList)  //li meng long

p.classList.remove("meng") 

alert("p.className: " + p.className)  //p.className: li long

ログイン後にコピー

プレビュー効果

HTML5の実戦とclassList属性の解析

2.contains(value)

contains(value ) メソッドは、指定された値がリストに存在するかどうかを示します。存在する場合は "true" を返し、そうでない場合は "false" を返します。簡単な例は次のとおりです。

JavaScriptコード

<p class="li meng long">梦龙小站</p>

ログイン後にコピー

3、add(value)

add(value)メソッドは、リスト内の文字列をリストに追加することを意味します。すでに存在する場合は追加されません。小さな例は次のとおりです: HTMLコード

//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];

alert(p.classList.contains("meng")) //true

alert(p.classList.contains("menglong")) //false

ログイン後にコピー

JavaScriptコード

<p class="li meng long">梦龙小站</p>

ログイン後にコピー

プレビュー効果

4.toggle(value )

HTML5の実戦とclassList属性の解析 toggle(value) メソッドは、指定された値がリストにすでに存在する場合はそれを削除し、指定された値がリストに存在しない場合は追加します。小さな例は次のとおりです:

HTMLコード

//添加类名 menglong

//获取要删除类名meng的p
var p = document.getElementsByTagName("p")[0];

p.classList.add("menglong");

alert("p.className: " + p.className)  //p.className: li meng long menglong

ログイン後にコピー

JavaScriptコード

<p class="li meng long">梦龙小站</p>
梦龙小站

ログイン後にコピー

プレビュー効果

classList に関する小さな例これらの小さな方法が小さな例を通じて明確に実証および説明できることは誰もが示しています。 classList では、すべてのクラス名を削除するか、要素の class 属性を完全に書き換える必要がない限り、className 属性は不要となり、実用的なメソッドが多数付属しています。 classList 属性をサポートするブラウザには、Firefox 3.6 以降および Chrome が含まれます。

HTML5の実戦とclassList属性の解析ここではHTML5の実戦と分析のclassList属性を紹介します。少しずつの積み重ねが明日の成功になります。1日で少しずつHTML5を学べば、いつか必ず成功します。 Menglong Station をサポートしていただきありがとうございます。HTML5 に関する最新情報については、HTML5 の実践と分析に関する Menglong Station の最新情報にご注目ください。

上記は HTML5 の実戦と分析の classList 属性の内容です。その他の関連内容については、PHP 中国語 Web サイト (m.sbmmt.com) をご覧ください。