JavaScript DOM 学習 第 4 章 getElementByTagNames_基礎知識

getElementByTagNames (複数名であることに注意してください) は、いくつかのタグ要素を取得し、それらを順番に配列に保存します。これは非常に便利です。たとえば、前の章の TOCScript では、記事全体のすべての H3 と H4 を取得する必要があります。
この機能をノードのプロトタイプに追加したいと思っていますが、IE と Safari では機能しません。したがって、通常の関数としてのみ扱うことができます。


getElementByTagNames の使用には、次の 2 つのパラメータがあります:
1。カンマで区切られたタグ名の文字列。
2. オプションの開始要素。これらのタグが存在する場合は、その要素の子要素内で検索され、存在しない場合はドキュメント全体で検索されます。
この関数は、要求されたタグ名に基づいて、ソース コードに出現する順序で並べられた配列 (ノードのリストではなく) を返します。この並べ替えを行うには、ブラウザーがsourceIndexまたはcompareDocumentPositionをサポートしている必要があります。どちらもサポートされていない場合 (Safari)、getElementByTagNames() 関数を呼び出したときのタグ名の順序に従います。
例 1

コードのコピー コードは次のとおりです。

var headerList = getElementsByTagNames('h1 ,h2, h3,h4');

ここで、headerList は、ドキュメント内の H1 ～ H4 を含む配列であり、出現順に従ってソートされています。
例 2

コードをコピーします コードは次のとおりです。

var 要素 = document .getElementById( 'test');
var formFieldList = getElementsByTagNames('input,select,textarea',element);

ID test を持つすべての子要素に formFieldList が含まれるようになりました。 input、select、TEXTAREA を出現順に並べた配列。

コードをコピー コードは次のとおりです。

function getElementsByTagNames(list,obj) {
if (!obj) var obj = document;
var tagNames = list.split(',');
var resultArray = new Array(); tagNames.length ;i ) {
var tags = obj.getElementsByTagName(tagNames[i]);
for (var j=0;j resultArray.push(tags) [j] );
}
}
var testNode = resultArray[0];
if (!testNode) return [];
if (testNode.sourceIndex) .sort( function (a,b) {
return a.sourceIndex - b.sourceIndex;
(a ,b) {
return 3 - (a.compareDocumentPosition(b) & 6); 🎜>



コードをコピーします


コードは次のとおりです:


function getElementsByTagNames(list,obj)

{
if (!obj)var obj = document;

最初に開始要素 obj を定義します。指定されていない場合、デフォルトは document です。

コードをコピー

コードは次のとおりです。

var tagNames = list.split (', ');
var resultArray = new Array();

これらのタグ名はカンマで区切ります。配列を使用して結果を保存します。 コードをコピー

コードは次のとおりです。

for (var i=0) ;ivar tags = obj.getElementsByTagName(tagNames[i]);
for (var j=0;jresultArray. Push(タグ[j]);

} }
次に、最も単純な getElementByTagName() メソッドを使用してすべてのタグ名を反復処理し、結果を resultArray に渡します。ここで重要な点の 1 つは、getElementByTagName はノードのリストを返すため、array.concat() を使用して新しい配列を作成できないことです。要素を 1 つずつ押し込むのが、私が見つけた最良の方法です。

resultArray に格納されている必要なタグ名の要素へのポインターの配列を取得しますが、要素は指定したタグの順序で配置されます。もう一度整理する必要があります。

コードをコピーします コードは次のとおりです。

var testNode = resultArray[0]; 🎜>

さあ、仕分けを始めます。ブラウザがsourceIndexまたはcompareDocumentPositionをサポートしているかどうかを知る必要があり、次に取得した元のデータに対して何らかの検出を行います

コードをコピー コードは次のとおりです:

if (!testNode) return [];

ここに最初のノードがない場合 (つまり、結果に必要な要素がない場合) )、1 つの空の配列を返します。



背景: array.sort()
array.sort() メソッドにはオプションの関数パラメーターがあります。この関数は、2 つの要素 (a および b と呼ばれることが多い) を比較するために使用されます。この関数は、最初の値が最初に来る必要がある場合は負の値を返し、2 番目の値が最初に来る必要がある場合は正の値を返します。

sourceIndex
ブラウザがsourceIndexをサポートしている場合は、要素のsourceIndexに基づいて並べ替えます。 sourceIndex は、ソース コード内の要素のインデックス値を知るために使用できる Microsoft の非常に便利な拡張機能です。ページ上の最初の要素 () のインデックス値は 0、2 番目の要素 () は 1 などとなります。 sourceIndex は、getElementByTagName(*) 内の要素のインデックス値でもあります。

コードをコピー コードは次のとおりです。

if (testNode.sourceIndex) {
resultArray.sort(function (a,b) {
return a.sourceIndex - b.sourceIndex;
});
}

最初のものを使用しますelement sourceIndex 値は、2 番目の要素の sourceIndex を引いたものです。これが負の値の場合、最初の要素が最初にランク付けされます。正の値の場合、2 番目の要素が最初にランク付けされます。これがsort()に必要なものです。 resultArray 内の要素が、ドキュメント内の位置に基づいて並べ替えられるようになりました。

compareDocumentPosition
ブラウザが CompareDocumentPosition をサポートしている場合は、このメソッドを使用して並べ替えます。 CompareDocumentPosition は、レベル 3 のコア メソッドであり、ドキュメント内の 2 つのノードの位置を比較して、次の値を返します:

1 が見つかりません

2 が前にあります

4 in

8 には

が含まれます。16 には

が含まれます。 たとえば、タグが含まれており、別のタグの後に続く場合は、16 4=20 が返されます。

コードをコピーします コードは次のとおりです。

else if (testNode.compareDocumentPosition ) {
resultArray.sort(function (a,b) {
return 3 - (a.compareDocumentPosition(b) & 6);
});


us CompareDocumentPosition: 前後の値 2 と 4 のみに興味があります。したがって、結果を 6 と AND 演算し、結果は 2 または 4 になります (もちろん、要素を要素の前と要素の後に置くことはできないため、結果が 6 になることはありません)

If b が a にある場合この場合、4 が返されますが、sort() には負の数が必要です。 b が a の前にある場合、2 が返されますが、sort() には正の数が必要です。 sort() に正しい結果を与えるために、それらを 3 で減算します。これは 1 または -1 を取得するため、sort() は要素を正しく並べ替えることができ、resultArray 内の要素もドキュメント内に出現する順序で配置されます。

コードをコピーします コードは次のとおりです。

return resultArray; }

次に、resultArray を呼び出した関数に返します。ブラウザがsourceIndex配列またはcompareDocumentPosition配列をサポートしていない場合、並べ替えは行われないことに注意してください。

翻訳アドレス: http://www.quirksmode.org/dom/getElementsByTagNames.html
転載のために以下の情報を保管してください
著者: Bei Yu (tw: @rehawk)