DOM（Document Object Model）は、HTMLやXMLの文書が読み込まれるとブラウザが作成するプログラミングインターフェースです。 ウェブページは基本的に、DOMによってノードやオブジェクトとして表現されたドキュメントです。
このチュートリアルでは、JavaScriptを使ってDOMの異なるノード（HTML要素）にアクセスする方法を学びます。
Get Element By ID
documentgetElementById()メソッドは、入力として要素IDを受け取り、DOM要素を表すElementオブジェクトを返します。
<div>🦄</div>では、上記の<div>要素を、そのIDを使って取得する方法を説明します:
const unicorn = document.getElementById('unicorn');IDは大文字小文字を区別し、HTML文書全体で一意です。 そのため、このメソッドは常に1つの要素を返します。 一致する要素がない場合は、nullを返します。
注意：
getElementById()メソッドを呼び出す際に、ID文字列の前に#の記号を付けないでください。
タグ名で要素を取得
getElementsByTagName() メソッドは、複数の要素にアクセスするために使用されます。 タグ名を入力として受け取り、タグ名に一致するすべてのDOM要素をHTMLCollectionとして返します。
<p>🐱</p><p>🐰</p><p>🐯</p><p>🐧</p>すべての<p>要素にアクセスするJavaScriptコード：
const animals = document.getElementsByTagName('p');このメソッドは、一度に1つのタグ名しか検索しません。 しかし、タグ名として*を渡すと、DOM内のすべての要素を取得することができます。
const allNodes = document.getElementsByTagName('*');名前で要素を取得
getElementsByName()name 属性で要素のコレクションを取得し、NodeList オブジェクトを返します。
<input type="text" name="email"><input type="tel" name="phone"><input type="date" name="dob">名前がemailの要素をすべて取得してみましょう:
const emails = document.getElementsByName('email');注意。 固有でなければならない
id属性とは異なり、複数のHTML要素が同じname属性を持つことができます。
クラス名で要素を取得
classgetElementsByClassName().を除いて）渡すだけで、与えられたクラス名を持つすべてのDOM要素のHTMLCollectionを返してくれます。
<div class="bird owl">🦉</div><div class="bird">🐦</div><div class="bird eagle">🦅</div><div class="animal cat">🐱</div>すべてのbirdを取得してみましょう:
const birds = document.getElementsByClassName('bird');このメソッドは、スペースで区切られた複数のクラス名も受け付けます。 birdeagleの両方のクラスを持つ要素をすべて取得してみましょう。
const eagle = document.getElementsByClassName('bird eagle');Query Selector
querySelector() メソッドは、CSSセレクタに基づいてDOMから要素を取得することができる、2つのモダンなJavaScriptメソッドのうちの1つです。 CSSセレクタを渡すだけで、指定したセレクタにマッチする最初の要素を取得します。 一致するものがない場合は、nullが返されます。 以下に例を示します:
const email = document.querySelector('#signup input');Query Selector All
指定したセレクタにマッチする要素のリストを選択したい場合は、querySelectorAll() メソッドを使用してください。 このメソッドは、複数のCSSセレクタを入力として受け取り、指定したセレクタにマッチするDOM要素のリストであるNodeListを返します。 上記のHTMLマークアップから、クラスがbirdanimalであるすべての要素を選択してみましょう：
関数の連鎖
複数の関数を連鎖させて、別の要素内の要素を検索することもできます。 まず、getElementById()querySelector()を使って1つの要素を選択し、次に別の関数を連鎖させて要素内を検索する必要があります。
<form> <input type="text" name="email"> <input type="tel" name="phone"> <input type="date" name="date-of-birth"></form>IDがsignupinput要素を取得します。
const inputs = document.getElementById('signup').getElementsByTagName('input');// ORconst inputs = document.querySelector('#signup').querySelectorAll('input');HTMLCollectionとNodeListのトラバース
上記で説明したほとんどのメソッド（ただし、getElementById()querySelector()HTMLCollectionNodeListとして返します。
HTMLCollectionforEach()map()で繰り返し処理することはできません。
const inputs = document.getElementById('signup').getElementsByTagName('input');// iterate over HTMLCollectionArray.from(inputs).forEach(element => { console.log(element);}); NodeListforEach() メソッドを使用して要素の反復処理を行うことができます。
const inputs = document.querySelector('#signup').querySelectorAll('input');//iterate over NodeListinputs.forEach(element => { console.log(element);});おわりに
以上が、JavaScriptを使ったDOM要素の取得方法です。 id属性、HTMLタグ名、nameclass属性、CSSセレクタなど、DOM要素にアクセスするためのさまざまな方法を学んできました。 また、これらのメソッドが返す要素の一般的なコレクションを反復処理する方法についても説明しました。
✌️ この記事を気に入っていただけましたか？ Twitterで@attacomsianをフォローしてください。 また、LinkedInやDEVでもフォローできます。 RSSフィードを購読してください。
👋 もしあなたが私の記事を読んで楽しんでくれて、これからも無料のチュートリアルを作り続けることをサポートしたいと思ってくれたら、☕ Buy me a coffee (cost $5) .