はじめに
Javascriptを学ぶ上で欠かせないDOMについて、基礎的な部分を固めたいのでまとめました。
学習サイトやなんやらでJavaScriptの文法的な基礎を学んだ後、次は？みたいな人（わたし）が多いと思います。
そんな方のステップアップに繋がるのがDOMなのかなーと思ってるので、DOM操作に慣れていければいいなと。
目次
DOMとは
DOMで何ができるようになるのか
要素の取得をする
要素取得のメソッド
要素にアクセスして変更を加える
クラスを操作する
DOMとは
「Document Object Model」の略です。
HTMLはHTML文章と呼ばれることもあり、文章=Document。
つまりHTML(XMLなども)オブジェクトとして扱い、それを操作するためのモデルです。
その操作をすることを
DOM API や DOM と呼びます。
DOMで何ができるようになるのか
- JavaScriptを使ってHTMLの情報を取得・変更・イベントの登録などができる
DOMによって、JavaScriptで動的なページを作ることができるようになるということですね。
要素の取得をする
Google Chromeの検証モード内のConsole上で確認していきます。
HTML情報全て取得する
document
コンソールに入力してエンターを押すと、#documentという、HTMLファイル内の情報全てを取得することができます。
検証モード内のElementsの内容と一緒です。
headタグやbodyタグなど
document.body
と入力することで取得できます。
bodyタグ内の要素
document.body.children
childrenとは子要素のことで、bodyの中の子要素全てを配列のような形(HTMLCollectin)で取得することができます。
要素取得のメソッド
querySelector
document.querySelector()
このquerySelectorメソッドを使用し、HTML内のタグ、id、classなどを指定することでも取得することができます。
h1タグで取得しても、idで指定しても、同じ要素が取得できます。
ちなみにquerySelectorは、上から探して最初に見つかった要素ひとつを取得するので
リストが複数あっても、一番上しか取得できていないのが分かりますね。
querySelectorAll
document.querySelectorAll()
対してquerySelectorAllは指定した要素全てを取得します。
NodeListと呼ばれる、配列のような形で取得できます。
ちなみにDOMでは要素のことをnode(ノード)と呼びます。(詳しい説明はここでは割愛)
要素にアクセスして変更を加える
innerHTML
innerHTMLは要素の中身にアクセスすることができます。例えば、h1タグの中身、今回でいうと"DOM操作"という文字列ですね。
const h1 = document.querySelector('h1')
h1.innerHTML
上のように、取得した要素をいったん変数に入れておくと楽です。
これで"DOM操作"という文字列が取得できていることが分かります。
このh1.innerHTMLの中身を書き換えます。
h1.innerHTML = '書き換えた'
すると、ブラウザ上の文字列が書き換わります。
また、innerHTMLはタグを認識するので、innerHTML内に＜span＞などを記述してCSSなどを指定することもできます。
h1.innerHTML = '書き換えた<span style="color:red">かもね</span>'
このように、スタイルが適用されます。
textConetent
textContentも要素の中身にアクセスするのですが、こちらはタグなどを無視したテキスト情報のみにアクセスします。
h1.textContent
spanタグの中身は無視されています。
style
styleは文字通り要素のスタイルにアクセスし、変更することができます。
const ul = document.querySelector('ul')
ul.style.color = 'green'
ulのstyleを変更してみました。
複数要素を取得した場合
querySelectorAllで要素全てを取得した場合のアクセス方法
添字指定
const li = document.querySelectorAll('li')
li[1].style.textDecoration = 'underline'
上記のようにtext-decorationの指定などはプロパティ名がそのまま使えないものがあるので注意しましょう。
配列に格納されているので、添字を指定することでアクセスできました。
ループ文
複数要素全てにアクセスするには、ループ文が有効です。
li.forEach(node => node.style.color = 'purple')
querySelectorAllで取得してきた場合は、NodeListに格納されるので、そのひとつ(node)ずつにアクセスすればよいです。
これでli要素全てに適用できました。
クラスを操作する
要素の変更のほかに、ノードに対するクラス情報も取得してそれらを操作することができます。
classList
classListにアクセスし、その要素のクラス情報を取得します。
addメソッドでクラスを追加することができます。
const h1 = document.querySelector('#title')
h1.classList.add('text-size')
elementsを確認すると、h1タグの中にtext-sizeというクラスが追加されています。
もちろんこの新しく付与されたクラスにプロパティが指定してあればそれが適用されます。
またremoveメソッドを用いることで、クラスを除去したり
toggleメソッドではそれが呼ばれるたびにクラスを追加したり除去したりといったことができるようになります。