【JavaScript / DOM】要素ノードの取得 - getElementById / getElementBy* / querySelectorAll
JavaScript/DOMの要素ノードを取得する方法を解説します。
要素ノードの取得
JavaScriptのDOMは、HTMLドキュメントの要素ノードを取得できます。
取得にはタグ名や属性（idやclassなど）を指定します。
タグ名
タグ名を指定して要素ノードを取得できます。
取得した値は配列（厳密には異なる）のような値で指定したタグ名の要素ノードを全て格納しています。
そのため個別に要素ノードを取り出す必要があります。
基本構文
document.getElementsByTagName(タグ名)サンプル
<h1>JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
<p>主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>
<script type="text/javascript">
let elements = document.getElementsByTagName("p");
console.log(elements);
for( let element of elements ) {
console.log(element);
}
</script>HTMLCollection(2) [p, p]
<p>JavaScriptはプログラミング言語の１つです。</p>
<p>主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>id属性
id属性の値を指定して要素ノードを取得できます。
基本構文
document.getElementById(id属性値)サンプル
<h1 id="title">JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
<p>主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>
<script type="text/javascript">
let element = document.getElementById("title");
console.log(element);
</script><h1 id="title">JavaScriptとは</h1>class属性
class属性の値を指定して要素を取得できます。
取得した値は配列（厳密には異なる）のような値で指定したclass属性値の要素ノードを全て格納しています。
そのため個別に要素ノードを取り出す必要があります。
基本構文
document.getElementsByClassName(class属性値)サンプル
<h1 class="text">JavaScriptとは</h1>
<p class="text">JavaScriptはプログラミング言語の１つです。</p>
<p class="text">主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>
<script type="text/javascript">
let elements = document.getElementsByClassName("text");
console.log(elements);
for( let element of elements ) {
console.log(element);
}
</script>HTMLCollection(3) [h1.text, p.text, p.text]
<h1 class="text">JavaScriptとは</h1>
<p class="text">JavaScriptはプログラミング言語の１つです。</p>
<p class="text">主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>name属性
name属性を指定して要素を取得できます。
取得した値は配列（厳密には異なる）のような値で指定したname属性値の要素ノードを全て格納しています。
そのため個別に要素ノードを取り出す必要があります。
基本構文
document.getElementsByName(name属性値)サンプル
<h1 name="text">JavaScriptとは</h1>
<p name="text">JavaScriptはプログラミング言語の１つです。</p>
<p name="text">主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>
<script type="text/javascript">
let elements = document.getElementsByName("text");
console.log(elements);
for( let element of elements ) {
console.log(element);
}
</script>NodeList(3) [h1, p, p]
<h1 class="text">JavaScriptとは</h1>
<p class="text">JavaScriptはプログラミング言語の１つです。</p>
<p class="text">主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>CSSセレクター
CSSセレクター形式の指定方法で要素を取得できます。
基本構文
document.querySelectorAll(セレクター形式)サンプル
<h1 id="title">JavaScriptとは</h1>
<div class="box">
<p class="text">JavaScriptはプログラミング言語の１つです。</p>
</div>
<p class="text">主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>
<input type="text">
<script type="text/javascript">
let elements1 = document.querySelectorAll("#title");
console.log(elements1);
for( let element of elements1 ) {
console.log(element);
}
let elements2 = document.querySelectorAll(".box .text");
console.log(elements2);
for( let element of elements2 ) {
console.log(element);
}
let elements3 = document.querySelectorAll('[type="text"]');
console.log(elements3);
for( let element of elements3 ) {
console.log(element);
}
</script>NodeList [h1#title]
<h1 id="title">JavaScriptとは</h1>
NodeList [p.text]
<p class="text">JavaScriptはプログラミング言語の１つです。</p>
NodeList [input]
<input type="text">応用
要素ノードに対して、上記の要素ノードの取得メソッドを実行できます。
<h1>JavaScriptとは</h1>
<div class="box">
<p class="text">JavaScriptはプログラミング言語の１つです。</p>
<p>主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>
</div>
<div class="box">
<p>JavaScriptで記述したファイルをJSファイル（またはJavaScriptファイル）と呼びます。</p>
</div>
<p>ブラウザで動作するにはHTMLドキュメントからJSファイルを読み込みます。</p>
<script type="text/javascript">
let elements1 = document.getElementsByClassName("box");
console.log(elements1);
for( let element of elements1 ) {
let elements2 = element.querySelectorAll(".text");
console.log(elements2);
for( let e of elements2 ) {
console.log(e);
}
}
</script>HTMLCollection(2) [div.box, div.box]
NodeList [p.text]
<p class="text">JavaScriptはプログラミング言語の１つです。</p>
NodeList []このサンプルは初めにclass属性値がboxの要素ノードを取得します。
次にその要素の中のクラス属性値がtextの要素ノードを取得しています。
このように要素ノードに対してこれらのメソッドを実行すると、その子孫要素から検索し取得します。
注意点
HTML要素のロード前は要素ノードを取得できません。
HTMLドキュメントは上から読み込まれ実行されます。
そのため、次のような要素の読み込み前に取得するコードは、正常に取得することができません。
<script type="text/javascript">
let element = document.getElementById("title");
console.log(element);
</script>
<h1 id="title">JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>null要素ノードを正常に取得するには、要素が読み込まれた後に行う必要があります。
