【JavaScript】要素の取得方法をまとめてみた！

はじめに

JavaScriptで要素の取得方法についてよく忘れてしまうので備忘録としてまとめてみました。一部jQueryを用いた要素の取得方法についても記載しています。

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.getElementsByClassName();

• element.getElementsByClassName();
   

HTML

class="js-exsample"

javaScript

 document.getElementsByClassName('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を付与して値を取得する方がよいかも。