【JavaScript】要素の取得方法まとめ

ID名を指定して取得する。

• document.getElementById();

HTML

 id = "js-exsample"

javaScript

document.getElementById('js-exsample');

タグ名を指定して取得する。

• document.getElementsByTagName();

• element.getElementsByTagName();

HTML

<li>Sample2</li>

javaScript

document.getElementsByTagName('li');

クラス名を指定して取得する。

• document.getElementByClassName();

• element.getElementByClassName();

HTML

class="js-exsample"

javaScript

 document.getElementByClassName('js-exsample');

要素のname属性をもとに要素を取得する。

• document.getElementsByName();

HTML

<p>さんぷる<p>

javaScript

 document.getElementsByName('p');

子要素を取得する。

• .children('セレクタ')

HTML

<div id="parent">

     <p>さんぷる<p>

</div>

jQuery

$('#parent').children('p');

子要素の要素を含む子孫要素から取得する。

• .find('セレクタ')

HTML

<div id="parent">

     <p>さんぷる</p>

     <div id="child">

          <image class="image" src="sample.jpg"/>

     </div>

</div>

jQuery

$('#parent').find('.image');

子要素のうちn番目を取得する。

HTML

<div id="parent">

     <p>さんぷる1</p>

     <p>さんぷる2</p>

     <p>さんぷる3</p>

</div>

jQuery
最初を取得する

$('#parent p:first')

最後を取得する

$('#parent p:last')

2つ目を取得する

$('#parent p:nth-child(2)')

$('p').eq(1)

$('p:eq(1)')

※HTMLで要素が追加や削除された場合に順番が変更されるので注意！classを付与して値を取得する方がよいかも。