JavaScript

JavaScriptで直下の子要素を取得する

More than 3 years have passed since last update.

jQueryで直下の子要素を取得する時の備忘録。

jQueryの場合children()を使う方法か、子孫セレクタを使うかと思います。

<ul id="hoge">

<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

例えば<ul id="hoge">の下にある<li>を取得して、クリックした時に何か処理をする時は、


/* cssの子孫セレクタを使って */
$('#hoge > li').click(function(){
~~処理~~
})

/* children()を使って */
var findLi = $('#hoge').children();

findLi.click(function(){
~~処理~~
})

こんな感じに調べると思います。

これをJavaScriptでやると


var findUl = document.getElementById('hoge'),
findLi = findUl.children;

for (var i = 0; i < findLi.length; i++){
findLi[i].onclick = function(){
~~処理~~
}
}

まず調べたい要素の子ノードを取得してそれをforを使って一つ一つ調べるって方法です。

childNodesというものもあるのですが、これだと<li>内のテキストやタグとかもすべて返すので処理が複雑になります。

もとから更に中のタグに対して何か処理するならchildeNodesを使ったほうが早いのかな?・・・多分w


直下の要素を探すならfind()ではなくchildren()の方がいいとご指摘を受けましたので修正しました。



追記

find()の代替方や、直下の要素以外を探す方法をJavaScriptでやるにはどうするのかなと調べてみたました。

例えば、こんなHTMLがあったとして


<div class="box">
<h2>見出し1</h2>
<div>
<img src="photo1.jpg" alt="" />
<p>テキストテキストテキストテキスト</p>
</div>
</div>

<div class="box">
<h2>見出し2</h2>
<div>
<img src="photo2.jpg" alt="" />
<p>テキストテキストテキストテキスト</p>
</div>
</div>

<div class="box">
<h2>見出し3</h2>
<div>
<img src="photo3.jpg" alt="" />
<p>テキストテキストテキストテキスト</p>
</div>
</div>

<div class="box">
<h2>見出し4</h2>
<div>
<img src="photo4.jpg" alt="" />
<p>テキストテキストテキストテキスト</p>
</div>
</div>

<div class="box">
<h2>見出し5</h2>
<div>
<img src="photo5.jpg" alt="" />
<p>テキストテキストテキストテキスト</p>
</div>
</div>

<div class="box">の中にある<div>を探したい場合、jQueryだと


/* cssのセレクタを使って*/
$('.box div')

/* find()を使って */
$('.box').find('div')

これをJavaScriptでやると


var hoge = document.getElementsByClassName('box');

for(var i = 0; i < hoge.length; i++){
/* getElementsTagNameを使う*/
findDiv1 = hoge[i].getElementsByTagName('div');

/* childrenを使って要素の番号を指定する*/
findDiv2 = hoge[i].children[1]);
}

jQueryだとchildren()とかをメソッドチェーンでつなげて無理やりとかって方法でもできなくはないですがJavaScriptだと結構めんどくさい(;・∀・)


結論

結論として、操作したい要素そのものか、操作したい要素を囲む要素にIDとかを指定して極力階層が深くならないようにするのが一番ですねw