JavaScript DOM学習第四章getElemenntByTagNames

4766 ワード
getElementByTagNamesはいくつかの要素を獲得して、彼らの順序によって一つの配列に保存します.これは非常に有用です.例えば、前の章のTOCScriptでは、すべての記事の中のH 3とH 4を取得する必要があります.
nodeのプロトタイプにこの機能を入れたいですが、IEとSafariの中ではだめです.だから彼を普通の関数としか思えません.
使用
getElementByTagNamesには二つのパラメータがあります.
1、コンマで区切られた名前文字列.
2、任意の開始要素.存在する場合は、これらの要素の中からこれらのタグを検索します.存在しない場合はドキュメント全体で検索します.
この関数は、要求された配列(ノードリストではなく)に従って、ソースコードにおける彼らの出現順に並べられます.この並べ替えには、ブラウザがsourceIndexまたはcompredocument Positionをサポートする必要があります.全部サポートしていないなら、getElemenntByTagNames()関数を呼び出した時の名前の順にします.
実例1

   var headerList = getElementsByTagNames('h1,h2,h3,h4');
今はheader Listというのは文書にH 1-H 4の配列が含まれています.彼らの出現順に並べられています.
実例2
 
  
var element = document.getElementById('test'); 
  
var formFieldList = getElementsByTagNames('input,select,textarea',element);
現在のform FieldListはIDがtestの要素の下に含まれているすべてのサブ要素の中のinputであり、select、TEXTAREAの配列であり、それらが現れる本の順に並べられています.
 
  
function getElementsByTagNames(list,obj) { 
  
    if (!obj) var obj = document; 
  
    var tagNames = list.split(','); 
  
    var resultArray = new Array(); 
  
    for (var i=0;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) { 
  
        resultArray.sort(function (a,b) { 
  
                return a.sourceIndex - b.sourceIndex; 
  
        }); 
  
    } 
  
    else if (testNode.compareDocumentPosition) { 
  
        resultArray.sort(function (a,b) { 
  
                return 3 - (a.compareDocumentPosition(b) & 6); 
  
        }); 
  
    } 
  
    return resultArray; 
  
}
説明
 
  
function getElementsByTagNames(list,obj) 
  
{ 
  
if (!obj)var obj = document;
最初に開始要素objを定義します.もし与えられなかったら、デフォルトはdocumentです.
 
  
var tagNames = list.split(','); 
  
var resultArray = new Array();
これらの名前をコンマで区切ります.結果を1つの配列で保存します.
 
  
for (var i=0;ivar tags = obj.getElementsByTagName(tagNames[i]); 
  
for (var j=0;jresultArray.push(tags[j]); 
  
} 
  
}
今はすべての名前を遍歴して、一番簡単なgetElementByTagNameの方法で結果をreult Arayに伝えます.ここの一つのポイントは、getElementByTagNameがノードリストに戻ってくるので、array.co ncat()を使って新しい配列を作ることができません.元素を一つずつ押し込むのが一番いい方法です.
必要な(名前の要素のポインタ配列が)reultArayに格納されているが、これらの要素はやはり私たちが与えた(順番に)並べられている.私たちはもう少し順番を組みたいです.

   var testNode = resultArray[0];
今から並べ替えを始めます.私たちはブラウザがsourceIndexまたはcompredocument Positionをサポートしているかどうかを知る必要があります.そして、私たちは得られた元のデータについていくつかの検査をします.

   if (!testNode) return [];
ここに最初のノードがないと(つまり、結果に必要な要素がないということです)、空の配列を返します.
背景:array.sort()
array.sort()メソッドにはオプション関数のパラメータがあります.この関数は、2つの要素(aとbと呼ばれることが多い)を比較するために使用されます.最初の関数が前にあるべきなら、負の値を返します.二つ目が前にあるべきなら、正の値を返します.
sourceIndex
ブラウザがsourceIndexをサポートするなら、要素のsourceIndexによって並べ替えます.sourceIndexはマイクロソフトの非常に有用な拡張であり、ソースコードのインデックス値を知るために使用されます.ページ種の最初の要素()の索引値は0、2番目の()は1などです.sourceIndexもgetElementByTagName(*)の要素のインデックス値です.
 
  
if (testNode.sourceIndex) { 
  
resultArray.sort(function (a,b) { 
  
return a.sourceIndex - b.sourceIndex; 
  
}); 
  
}
最初の要素のsourceIndex値から2番目の要素のsourceIndexを引いて、負の値なら、最初の要素は前に並べます.正の値なら、2番目の要素は前に並べます.これはsort()が必要です.現在のreult Arayの要素は、彼らがドキュメント内の位置によって並べ替えられています.
compredocument Position
ブラウザがcompredocument Positionをサポートするなら、この方法で並べ替えます.compredocument Positionはlevel 3のコア方法であり、彼は2つのノードのドキュメント内の位置を比較して、値を返します.
1見つけられませんでした
2前です
4後です
8含める
16が含まれています
例えば、一つのラベルが含まれていて、もう一つのラベルの後ろにあると、16+4=20に戻ります.
 
  
else if (testNode.compareDocumentPosition) { 
  
resultArray.sort(function (a,b) { 
  
return 3 - (a.compareDocumentPosition(b) & 6); 
  
}); 
  
}
私たちはcompredocument Positionの値の中の2、4だけに興味があります.前か後です.結果と6を演算します.結果は2または4になります.
bがaの後であれば4に戻るが、sort()は負の数が必要である.bはaの前にあれば2に戻るが、sort()は正数が必要である.sortに正しい結果をあげるために彼らを3で減らします.このようにして1または-1を得ると、sort()は元素を正確に並べられます.また、reult Arayの要素も文書種の出現順に並べられます.
 
  
return resultArray; 
  
}
その後、私たちはその関数を呼び出してくれるためにresultArayを返します.ブラウザがsourceIndexまたはcompredocument Position配列をサポートしていない場合は並べ替えがないと覚えてください.
翻訳住所:http://www.quirksmode.org/dom/getElementsByTagNames.html
転載は以下の情報を保留してください.
北玉(tw:@rehawk)
react中の非同期レンダリング