はじめに
本記事では、JavaScriptでDOMツリーからHTMLの要素を取得する方法についてまとめていきたいと思います。
JavaScriptの初心者向けな内容あとなります。興味のある方はぜひ見て頂けると嬉しいです。
DOM、DOMツリーとは
DOMツリーからHTMLの要素を取得する方法を書いていく前に、簡単にDOMとDOMツリーについて触れておきます。
DOM（Document Object Model）とは、HTMLを解析してデータを作成する仕組みのことです。
HTMLやCSSがユーザーに閲覧されるまでの流れはご存じでしょうか。
HTMLファイルは単なる文字情報なので、そのまま表示してもユーザーにとって見にくいです。
その為、HTMLを解析してCSSやJavaScriptによる装飾を行った後に画面に映しています。
これを行っているのは、Googleやsafariなどの「ブラウザ」です。
HTMLは階層構造になっていて、この階層構造であるデータのことをDOMツリーやドキュメントツリーと呼びます。
このDOMツリーを操作してJavaScriptを動かしていきます。
HTMLの要素名やid、classといった属性の情報をもとにDOMツリーから取得し、CSSの変更、要素を増やしたり、削除したりできます。
HTMLの要素を取得しアラート表示する方法
DOMツリーから要素を取得する場合は大きく3つの方法があります。
- セレクタ名から取得
- id名から取得する
- class名から取得する
document.getElementById("id名")
document.getElementById("id名")は、DOMツリーから特定の要素を取得する際に使用するメソッドの1つ。引数に設定したidを持つ要素を取得します。
<p id="only">ひとつ</p>
document.getElementById("only") //オブジェクトを取得
let ninja = document.getElementById("only").innerHTML; //アラート表示させるため、変数に代入
alert(ninja); //ポップアップに「ひとつ」が表示される
document.getElementsByClassName("class名")
document.getElementsByClassName("class名")は、classを指定して取得する際に使います。
細かいですが、注意点としてgetElementsと複数形での記述となるのでお気を付けください。
idはHTMLの1つのページで1つだけしか存在できないユニークなものです。なのでdocument.getElementById("id名")は単数形の表示となります。このように覚えておけば、間違えることはないと思います。
こちらも以下のように記述し要素を取得します。
<p class="multi">ふたつ</p>
document.getElementsByClassName("multi"); //オブジェクトを取得
let ninja = getElementsByClassName("multi").innerHTML; //アラート表示させるため、変数に代入
alert(ninja); //ポップアップに「ふたつ」が表示される
document.querySelectorAll("セレクタ名")
document.querySelectorAll("セレクタ名")は、セレクタで取得する際に使います。
セレクタ名とは、CSSでスタイルを適用させるために指定をしている要素です。
HTML上で、引数に指定したセレクタにマッチするものをすべて取得します。
セレクタ名で頻繁に使用するのは、class名、id名、HTMLタグです。
書き方はCSSでセレクタを指定する際と同じで、以下の通りです。
<p id="only">ひとつ</p>
<p class="multi">ふたつ</p>
<h1 class="multi">みっつ</h1>
//class名がmultiの要素を指定する場合
document.querySelectorAll(".multi")
//id名がonlyの要素を指定する場合
document.querySelectorAll("#only")
//h1タグの要素を指定する場合
document.querySelectorAll("h1")
こちらもアラートに表示させる場合は、.innerHTMLを追記した上で変数に代入しalert()を使用しましょう。
また、querySelectorというメソッドも存在しており、この場合セレクタ目を指定した要素のうち一番最初に見つかった要素だけを取得します。
さいごに
今回の記事は以上となります。
コチラの忍者コードでは、JavaScriptの無料問題がたくさん用意されているので是非活用しましょう。
最後まで読んでいただきありがとうございました。