DOM
要素の取得

IDで

document.getElementById('uniqueID')

検索します

<div id="uniqueID"></div>

与えられたIDを持つ要素が存在する限り、 document.getElementByIdはその要素だけを返します。それ以外の場合はnullを返しnull 。

注： IDは一意でなければなりません。複数の要素が同じIDを持つことはできません。

クラス名で

document.getElementsByClassName('class-name')

検索します

<a class="class-name">Any</a>
<b class="class-name">tag</b>
<div class="class-name an-extra-class">with that class.</div>

既存の要素に指定されたクラスが含まれていない場合は、空のコレクションが返されます。

例：

<p class="my-class">I will be matched</p>
<p class="my-class another-class">So will I</p>
<p class="something-else">I won't</p>

var myClassElements = document.getElementByClassName('my-class');
console.log(myClassElements.length); // 2
var nonExistentClassElements = document.getElementByClassName('nope');
console.log(nonExistentClassElements.length); // 0

タグ名による

document.getElementsByTagName('b')

検索します

<b>All</b>
<b>of</b>
<b>the b elements.</b>

指定されたタグ名を持つ要素が存在しない場合、空のコレクションが返されます。

CSSセレクタによる

次のHTMLコードを検討する

<ul>
  <li id=“one” class=“main”>Item 1</li>
  <li id=“two” class=“main”>Item 2</li>
  <li id=“three” class=“main”>Item 3</li>
  <li id=“four”>Item 4</li>
</ul>

上記のHTMLコードに基づいて、以下のDOMツリーが構築されます

                      ul
    
                      |
    
     |          |         |         |
    
    li         li        li        li
     |          |         |         |
Item 1        Item 2    Item 3    Item 4

CSSセレクタの助けを借りて、DOMツリーから要素を選択することができます。これは、 querySelector()とquerySelectorAll()の2つのjavascriptメソッドを使用して実行できます。

querySelector（）メソッドは、指定されたCSSセレクタに一致する最初の要素をDOMから返します。

document.querySelector('li.main')

クラスがmainである最初のli要素を返します

document.querySelector('#two')

idがtwoの要素を返す

注：要素が見つからない場合、 nullが返されます。セレクタ文字列にCSS擬似要素が含まれている場合、戻り値はnullになりnull 。

querySelectorAll（）メソッドは、指定されたCSSセレクタに一致するすべての要素をDOMから返します。

document.querySelectorAll('li.main')

クラスがmainであるすべてのli要素を含むノードリストを返します。

注 ：要素が見つからない場合、空のノードリストが返されます。セレクタ文字列にCSS擬似要素が含まれている場合、返されるelementListは空になります

クエリセレクタ

最新のブラウザ[1]では、 sizzle.js （jQueryで使用）と同じように、CSSのようなセレクタを使用してドキュメント内の要素をクエリすることができます。

querySelector

クエリーに一致するドキュメントの最初のElementを返します。一致するものがなければnull返しnull 。

// gets the element whose id="some-id"
var el1 = document.querySelector('#some-id');
 
// gets the first element in the document containing "class-name" in attribute class
var el2 = document.querySelector('.class-name');
 
// gets the first anchor element in the document
var el2 = document.querySelector('a');
 
// gets the first anchor element inside a section element in the document
var el2 = document.querySelector('section a');

querySelectorAll

クエリーに一致するドキュメント内のすべての要素を含むNodeListを返します。一致しない場合、空のNodeList返します。

// gets all elements in the document containing "class-name" in attribute class
var el2 = document.querySelectorAll('.class-name');
 
// gets all anchor elements in the document
var el2 = document.querySelectorAll('a');

// gets all anchor elements inside any section element in the document
var el2 = document.querySelectorAll('section a');