Webページを開発する場合、多くの場合、同じクラス名、つまり同じクラスの要素を持つ要素を操作する必要があります。昨日筆記試験を受けましたが、関連する質問に答えませんでした。
JavaScriptページにクラステストでノードを取得します
そこで、関連する情報をいくつか収集し、より良いと思う2つの方法をリストしました。欠点も必要です。誰もがそれらを批判し、修正することを願っています。あなたがより良い方法を持っているなら、私はあなたがそれを共有できることを願っています。
ソリューション1ジェレミーキュースソリューション
ジェレミー・キュースおじさんは、本「JavaScript Domプログラミングアート」（第2版）（英語：DOM Scripting-Web Design with Document Object Model）の3番目と4番目のセクションでGetElementsByClassメソッドについて語り、このプロパティをサポートしないブラウザにこの方法を適用する方法について話しました（IE7およびIE8およびIE8とIE8のDEST。抜粋はここにあり、いくつかの場所に変更があります。
HTML5 DOMに新しいメソッドが追加され、クラス属性のクラス名を介して要素にアクセスできるようになりました。この方法は比較的新しいため、一部のDOM実装にはまだありませんので、使用する場合は注意してください。まず、この方法が私たちに役立つものを見て、次にこの方法を確実に使用する方法について話し合いましょう。
getElmentsByTagnameメソッドと同様に、getElementsByClassNameは1つのパラメーターのみを受け入れます。これはクラス名です。
コードコピーは次のとおりです。
getelementsbyclassname（class）
このメソッドの返品値は、getElementsByTagnameにも似ており、どちらも同じクラス名を持つ要素の配列です。次のコード行は、クラス名「sale」のすべての要素を含む配列を返します。
コードコピーは次のとおりです。
document.getElementsByClassName（ "sale"）
この方法を使用して、複数のクラス名を持つ要素を見つけます。複数のクラス名を指定するには、文字列パラメーターのスペースでクラス名を分離するだけです。たとえば、次のコード行を<script>タグに追加します。
コードコピーは次のとおりです。
Alert（document.getElementsByClassName（ "Sale Qualty"）。長さ）;
完全なコード
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title>ショッピングリスト</title>
</head>
<body>
<h1>何を購入するか</h1>
<p>このようなものを購入することを忘れないでください。</p>
<ul id = "purchase">
<li>豆の薄い</li>
<li>チーズ</li>
<li>ミルク</li>
</ul>
<スクリプト>
Alert（document.getElementsByClassName（ "Sale Qualty"）。長さ）;
</script>
</body>
</html>
「重要な」クラス名と「販売」クラス名の両方を持っている要素は1つだけであるため、1つの要素のみが一致することを示す警告ボックスに1が表示されます。要素のクラス属性でさえ、クラス名の順序はパラメーターで指定された「重要な販売」ではなく「販売重要」であることに注意してください。クラス名の実際の順序は重要ではないだけでなく、要素がより多くのクラス名を持っていても問題ではありません。 getElementsByTagnameを使用するように、getElementsByClassNameを使用して、getElementByidを組み合わせて使用することもできます。 ID購入のある要素内のテストリスト項目が含まれているクラス名の数を知りたい場合は、最初にその特定のオブジェクトを見つけることができます。
コードコピーは次のとおりです。
var Shopping = document.getElementById（ "購入"）;
var Sales = Shopping.getElementsByClassName（ "sale"）;
このように、販売アレイには、「購入」リストにある「販売」クラスの要素のみが含まれています。次のコード行を実行すると、販売アレイに2つの項目が含まれていることがわかります。
コードコピーは次のとおりです。
アラート（sales.length）;
このGetElmentsByClassNameメソッドは非常に便利ですが、新しいブラウザー（Safari 3.1、Chorme、Firefox 3、Opera 9.5以上）のみがサポートしています。この欠点を補うために、DOMスクリプトプログラマーは、既存のDOMメソッドを使用して独自のGetElementsByClassNameを実装する必要があります。ほとんどの場合、それらの実装プロセスは、新しいブラウザや古いブラウザに適用できる次のGetElementsByとともにほぼ類似しています。
コードコピーは次のとおりです。
function getElementsByClassName（node、className）{
if（node.getElementsByClassName）{
node.getElementsByClassName（className）;
}それ以外{
var results = [];
var elems = node.getElementsByTagname（ "*"）;
for（var i = 0; i <elems.length; i ++）{
if（elems [i] .classname.indexof（classname）！= -1）{
結果[results.length] = elems [i];
}
}
結果を返します。
}
}
GetElementsByClassName関数は、2つのパラメーターを受け入れます。最初のノードは、DOMツリーの検索開始点を表し、2番目のクラス名は検索するクラス名です。適切なgetElementsByClassName関数がすでに着信ノードに存在する場合、この新しい関数は対応するノードリストを直接返します。 GetElementsByClassName関数が存在しない場合、新しい関数はすべてのタグをループし、対応するクラス名を持つ要素を探します。
この方法の欠点は、複数のクラス名に適用されないことです。
この関数を使用して、買い物リストを取得する以前の操作をシミュレートする場合は、次のように書くことができます。
コードコピーは次のとおりです。
var Shopping = document.getElementById（ "購入"）;
var Sales = Shopping.getElementsByClassName（Shopping、 "Test"）;
console.log（sales）;
したがって、記事の冒頭で問題を解決するために、使用されるコードは次のとおりです。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title>ショッピングリスト</title>
</head>
<body>
<h1>何を購入するか</h1>
<p>このようなものを購入することを忘れないでください。</p>
<ul id = "purchase">
<li>豆の薄い</li>
<li>チーズ</li>
<li>ミルク</li>
</ul>
<スクリプト>
function getElementsByClassName（node、className）{
if（node.getElementsByClassName）{
node.getElementsByClassName（className）;
}それ以外{
var results = [];
var elems = node.getElementsByTagname（ "*"）;
for（var i = 0; i <elems.length; i ++）{
if（elems [i] .classname.indexof（classname）！= -1）{
結果[results.length] = elems [i];
}
}
結果を返します。
}
}
var body = document.getElementsByTagname（ "Body"）[0];
var Sales = getElementsByClassName（Body、 "Sales"）;
console.log（sales）;
</script>
</body>
</html>
ソリューション2ロバートナイマンソリューション
一致するDOM要素を検索するには多くの方法がありますが、本当に効率的ではありません。ジェレミー・キュースおじさんの方法の欠点の1つは、複数のクラス名に使用できないことです。 2008年、ロバート・ナイマンは記事で彼自身のソリューションを提供しました。2008、Anno 2008年究極のGetelementsbyClassName。 2008年に、彼はいくつかのコードを変更し、多くの新しい機能を追加しました。
1.現在のブラウザがGetElementsByClassName関数をサポートしている場合、ネイティブ関数が呼び出されます。
2.現在のブラウザがそれをサポートしている場合は、XPathを使用します。 // Xiaofeiyu：ブラウザに組み込まれているXMLドキュメントを見つける強力な方法ですが、ブラウザのサポートは統合されていません
3。注文に関係なく、複数のクラス名の検索をサポートします。
4.ネイティブノデリストではなく、実際のノードアレイを返します。 // xiaofeiyu：ネイティブのgetelementsbyclassnameメソッドは、長さと数のインデックスプロパティを備えたアレイに非常に似ているノデリストオブジェクトを返しますが、配列ではなく、ポップアンドプッシュに固有のメソッドを使用することはできません。ノデリストオブジェクトを配列に変換できる方法：
コードコピーは次のとおりです。
mylist = array.prototype.slice.call（mynodelist）
これはロバートおじさんの方法です。私はまだ理解していないことのいくつかを理解していません。私はそれらを勉強した後にそれを更新します。
コードコピーは次のとおりです。
/*
Robert Nyman、http：//www.robertnyman.comによって開発されました
コード/ライセンス：http：//code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function（className、tag、elm）{
if（document.getElementsByClassName）{
getElementsByClassName = function（className、tag、elm）{
elm = elm ||書類;
var elements = elm.getelementsbyclassname（classname）、
nodename =（tag）？ new regexp（ "// b" + tag + "// b"、 "i"）：null、
returnElements = []、
現在;
for（var i = 0、il = elements.length; i <il; i+= 1）{
current = elements [i];
if（！nodename || nodename.test（current.nodename））{
returnements.push（current）;
}
}
ReturnElements;
};
}
else if（document.evaluate）{
getElementsByClassName = function（className、tag、elm）{
tag = tag || "*";
elm = elm ||書類;
var classes = classname.split（ ""）、
classestocheck = ""、
xhtmlnamespace = "http://www.w3.org/1999/xhtml"、
namespaceresolver =（document.documentelement.namespaceuri === xhtmlnamespace）？ xhtmlnamespace：null、
returnElements = []、
要素、
ノード;
for（var j = 0、jl = classes.length; j <jl; j+= 1）{
classestocheck + = "[contains（concat（ ''、@class、 ''）、 '" + classes [j] + "'）]";
}
試す {
要素= document.evaluate（ ".//" + tag + classestocheck、elm、namespaceresolver、0、null）;
}
catch（e）{
要素= document.evaluate（ ".//" + tag + classestocheck、elm、null、0、null）;
}
while（（node = elements.iteratenext（）））{
returnements.push（node）;
}
ReturnElements;
};
}
それ以外 {
getElementsByClassName = function（className、tag、elm）{
tag = tag || "*";
elm = elm ||書類;
var classes = classname.split（ ""）、
classestocheck = []、
要素=（tag === "*" && elm.all）？ elm.all：elm.getelementsbytagname（タグ）、
現在、
returnElements = []、
マッチ;
for（var k = 0、kl = classes.length; k <kl; k+= 1）{
classestocheck.push（new regexp（ "（^| // s）" + classes [k] + "（// s | $）"））;
}
for（var l = 0、ll = elements.length; l <ll; l+= 1）{
current = Elements [l];
match = false;
for（var m = 0、ml = classestocheck.length; m <ml; m+= 1）{
match = classestocheck [m] .test（current.classname）;
if（！match）{
壊す;
}
}
if（match）{
returnements.push（current）;
}
}
ReturnElements;
};
}
return getElementsByClassName（className、tag、elm）;
};