3

誰かがdocument.querySelectorAll("#tagContainingWrittenEls > *")、書かれたすべてのタグへの参照を取得するために使用することを提案しました。次に、それらすべてをループし、リスト内の各要素に対して and を実行して、情報を取得できます.tagName。.attributes

ただし、これは #tagContainingWrittenEls という名前のクラスがある場合にのみ実行できます。これは何かの方法だと思いました

4

2 に答える 2

7

このquerySelectorAll関数はセレクター文字列NodeListを受け取り、配列のように反復できる を返します。

// get a NodeList of all child elements of the element with the given id
var list = document.querySelectorAll("#tagContainingWrittenEls > *");

for(var i = 0; i < list.length; ++i) {
    // print the tag name of the node (DIV, SPAN, etc.)
    var curr_node = list[i];
    console.log(curr_node.tagName);

    // show all the attributes of the node (id, class, etc.)
    for(var j = 0; j < curr_node.attributes.length; ++j) {
        var curr_attr = curr_node.attributes[j];
        console.log(curr_attr.name, curr_attr.value);
    }
}

セレクター文字列の内訳は次のとおりです。

  • 構文は#nodeid、指定された ID を持つノードを参照します。ここでは、架空の idtagContainingWrittenElsが使用されています。あなたの id はおそらく異なる (そして短い) でしょう。
  • >構文は「そのノードの子」を意味します。
  • これ*は単純な「すべて」のセレクターです。

まとめると、セレクター文字列は、「「tagContainingWrittenEls」の ID を持つノードのすべての子を選択する」と述べています。

CSS3 セレクターのリストについては、http://www.w3.org/TR/selectors/#selectorsを参照してください。これらは、高度な Web 開発にとって非常に重要 (かつ便利) です。

于 2012-04-11T05:58:21.457 に答える
2

MDNによると、.querySelectorAll

指定されたセレクターのグループに一致するドキュメント内の要素のリストを返します（ドキュメントのノードの深さ優先の事前順序トラバーサルを使用）。返されるオブジェクトはNodeListです。

.querySelectorAllは、指定されたセレクターに一致する要素のリストを返します。

これは、CSSでスタイルを設定する方法と似ています。セレクターを作成し、これらのターゲット要素に適用するプロパティを入力すると、これらの要素がスタイル設定されます。

たとえば、CSSで、下<a>にあるすべての色を色でスタイル設定したいとします。あなたはこれを持っているでしょう：<li><ul>idlistred

ul#list li a{
    color:red;
}

事実上、すべてが赤に<a>変わります。<li><ul>idlist

同じセレクターを使用して、JavaScriptを介してこれらの同じ<a>要素を取得します

var anchors = document.querySelectorAll('ul#list li a');

これanchorsで、NodeList（配列のような構造）が含まれます。この構造に<a>は、の下<li>のすべて<ul>への参照が含まれます。aはとのようなものなので、ループすることができ、各アイテムはのアンダーの下にあります。idlistNodeListArray<a><li><ul>idlist

もちろん、コードの実行時にDOMにある要素のみを取得します。

于 2012-04-11T06:09:55.710 に答える