はじめに
突然ですが、皆さんJavaScriptは好きですか？
好き嫌いはあると思いますが、JavaScriptを使えるようになると、動きをつけたり、ソースを裏から表示させたりなど、あらゆることに活かすことができます。
そこで今回は、基本中の基本のDOMメソッドで、HTML上のタグやIDを指定してJavaScriptからアクションするやり方を紹介します。ご存知の方も多いと思いますが、ご覧頂ければ嬉しいです。
DOMとは
DOMとは、The Document Object Model (DOM) の略で、WEBドキュメントのためのプログラミングインターフェイスです。
ページ内のドキュメントストラクチャや、スタイル、コンテンツを変更することが可能です。
また、DOMは、ドキュメントをnodesやobjectsとして表現します。
よく使うDOMメソッド
それでは、実際にみていきましょう。
html上で、id、class、タグ(p、h1、h2、formなど)を指定、取得するときによく使用するのが、以下の３つではないでしょうか。
document.getElementById()
document.querySelector()
document.querySelectorAll()
１つづつみていきましょう。
➀ document.getElementById()
HTML上のidを指定します。
例えば、
<div id=”formId”>
<h1>Form Section</h1>
<p>This is form section</p>
<form>
form content
</form>
</div>
上記のようなソースがHTML上にあるとします。
※const のあとは任意の名前をつけましょう
const formId = document.getElementById(‘formId’)
console.log(formId) ← コンソールログで確認してみると
“<div id=”formId”>
<h1>Form Section</h1>
<p>This is form section</p>
<form>
form content
</form>
</div>”
のように、idのformの中身をごっそり取得することができます。
➁ document.querySelector()
こちらについては、idのほかに、Tag、classなど、指定できる要素はかなり多いです。
getElementByIdとは、記述が少し変わり、
idなら ⇒ #idName
classなら ⇒ .className
tagなら ⇒ div, p など
となり、Classなら『.』を、IDなら『#』を先頭につけてあげます。
さらに、スペシフィックに指定したいときは
idと、tag nameの場合
const headingOne = document.querySelector(‘#formId h1’)
と指定、記述します。
console.log(headingOne) ← コンソールログで確認してみると
“<h1>Form Section</h1>”
指定した h1が取得できました。
このように『document.querySelector()』は、取得できる要素が
➀よりも多いので使い勝手がかなりよいことがわかります。
➂ document.querySelectorAll()
最後にAllについて解説します。
querySelectorにAllが付いた形になります。
例えば、いくか同じタグを指定したいとき
<ul class=”lists”>
<li class=”list-01″>List 01</li>
<li class=”list-02″>List 02</li>
<li class=”list-03″>List 03</li>
<li class=”list-04″>List 04</li>
</ul>
この場合、ulではなく、liのlist-01～list-02を指定、取得したいとき
単純に➁のメソッドでやると、
document.querySelector(“.lists li”)
<li class=”list-01″>List 01</li>
１番目の要素しか取得できません。
では、どうやって全てを取得するのかそこで登場するのが、Allです。
document.querySelectorAll(“.lists li”)
“
NodeList(4) [li.list-01, li.list-02, li.list-03, li.list-04]
0: li.list-01
1: li.list-02
2: li.list-03
3: li.list-04
length: 4
[[Prototype]]: NodeList
“
と取得されました。
あれ？ でもなんか余計なものまでくっついてきてるぞ？そうなんです、これだとNode扱い、いわゆるPC側のリストとして取得されてしまいます。
これをHTML上と同じ表現で取得したい場合は、ループ処理が必要です。
ループ処理はその名の通り、同じ処理をループさせる(繰り返す)ことです。
この場合、.lists liを繰り返し処理すると、(今回は、ループ処理の詳しい説明ははぶきます)
lists.forEach(list => {
console.log(list)
})
“
<li class=”list-01″>…</li>
<li class=”list-02″>…</li>
<li class=”list-03″>…</li>
<li class=”list-04″>…</li>
“
このようにlist itemsのみ取得することができました。
おわりに
以上、３つのDOMメソッドを紹介しましたが、このようにJavaScriptでHTMLの要素を取得することはそんなに難しくない、むしろ簡単なことがわかっていただけましたでしょうか。
次回は、JavaScriptで取得したHTMLの要素にstyleをつけていきます。
少しでも参考になれば幸いです。
よろしければ「いいね」を押してください！
読み込み中...
