1. ホーム
  2. ジャバスクリプト

[解決済み】JavaScriptで親の子要素を探す

2022-04-12 19:12:33

質問

純粋なjavascriptのみを使用して、特定の親要素の(クラスまたはIDを持つ)子要素を見つけるための最も効率的な方法は何でしょうか。jQueryや他のフレームワークは使用していません。

この場合、私は 子1 または 子2 DOM ツリーには複数の 子1 または 子2 クラスの要素をツリーで表示します。の要素だけが欲しいのです。

    <div class="parent">
        <div class="child1">
            <div class="child2">
            </div>
        </div>
    </div>

解決方法は?

その children プロパティは、このように、要素の配列を返します。

parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]

の代替となるものがあります。 querySelector のように document.getElementsByClassName('parent')[0] ということです。


編集:今思えば、単に querySelectorAll の子孫を取得するために parent というクラス名を持つ child1 :

children = document.querySelectorAll('.parent .child1');

qS と qSA の違いは、後者が返すのは すべて がセレクタにマッチする要素を返すのに対し、前者はそのような要素のうち最初のものだけを返します。