4

私のコードに従ってください：

<div onclick="/*Here I would like to select the child element with the class 'vxf'*/">
   <div class="abc"></div>
   <div class="cir"></div>
   <!--... other elements-->
   <div class="vxf"></div>
   <!--... other elements-->
</div>
<div onclick="/*Here I would like to select the child element with the class 'vxf'*/">
   <div class="abc"></div>
   <div class="cir"></div>
   <!--... other elements-->
   <div class="vxf"></div>
   <!--... other elements-->
</div>

純粋なjavascriptでクラス「vxf」を持つ子要素を選択する方法は?

4

3 に答える 3

16

thisハンドラーに渡します...

onclick="clickHandler(this)"

...そして、ブラウザの互換性を最大限に高めるには、子ノードを調べます。

function clickHandler(element) {
    var child;
    for (child = element.firstNode; child; child = child.nextSibling) {
        if (child.className && child.className.match(/\bvxf\b/)) {
            break; // Found it
        }
    }
    // ...
}

(または、一致するすべての子が必要な場合は、ループを続けて配列を構築します。)

最近のほとんどのブラウザーでは、別の方法として、一致する子要素を (querySelector最初のものを見つけるために) または(リストを取得するために) 使用することができます。querySelectorAll残念ながら、これにはちょっとしたコツが必要です。

function clickHandler(element) {
    var child, needsId;
    needsId = !element.id;
    if (needsId) {
        element.id = "TEMPID____" + (new Date()).getTime();
    }
    child = document.querySelector("#" + element.id + " > .vxf");
    if (needsId) {
        element.id = "";
    }
    // ...
}

直接の子 (子孫ではない) のみが必要なため、ゲームをプレイするid必要があります。残念ながら、左側に何かがないと子コンビネーターを使用できません (element.querySelector("> .vxf");動作しません)。

それが直接の子か子孫かを気にしないのであれば、もちろん、はるかに簡単です。

function clickHandler(element) {
    var child = element.querySelector(".vxf");
    // ...
}
于 2013-09-22T12:08:37.657 に答える
2

のonclickで使用するだけthis.getElementsByClassName('vxf')[0]で、要素が得られます。このフィドルdivを参照してください。

于 2013-09-22T12:10:06.637 に答える
1

HTML5で使用できますdocument.querySelector('.vxf')

他の回答で指摘されているようdocument.getElementsByClassName('vxf')に、この特定の要件にも使用できますが、document.querySelector()anddocument.querySelectorAll()メソッドを使用すると、より複雑なセレクターを提供できるため、より強力になるため、将来的に検討する価値があります。

詳しくはこちらをご覧ください。

于 2013-09-22T12:08:21.200 に答える