メインコンテンツまでスキップ

DOM API

ここで紹介するDOM APIとは、JavaScriptからDOMを操作するためのものです。 DOM APIを用いて、DOM要素の取得・作成・追加などを行いうことができます。

Document​

document.getElementsByTagName​

指定したタグの要素をDOMから全て取得します。
取得した結果は配列ではなくHTMLCollectionというオブジェクトであることに注意。

const h1Collection = document.getElementsByTagName("h1")
console.log(h1Collection)

document.getElementsByClassName​

指定したタグの要素をDOMから全て取得します。
取得した結果は配列ではなくHTMLCollectionというオブジェクトであることに注意。

const hogeCollection = document.getElementsByClassName("hoge")
console.log(hogeCollection)

document.getElementById​

指定したタグの要素をDOMから１つ取得します。

関数名が単数系であることに注意。

idの意味から1つのみ取得することは自明。

const fuga = document.getElementById("fuga")
console.log(fuga)

document.createElement​

指定したタグのHTML要素(後述のElement)を作ります。

const p = document.createElement('p')
console.log(p)
備考

ちなみに、これはただ要素を作成して変数に入れただけなので、 実際に表示させるには後々紹介する Element.append() などと合わせて使う必要があります。

Element​

Elementの主な機能と使い方を説明します。

Element.children​

その要素の子要素が入っている。書き換えできない。

HTMLCollectionという特殊なオブジェクトであり、配列ではないことに注意が必要。

Element.textContent​

その要素の持つテキスト（文字列）が入っている。書き換え可能。

Element.append()​

自身の子要素のリスト（children）に対し引数に渡したElementまたは文字列を末尾追加する。

Element.remove()​

要素を削除します。

EventTarget.addEventListener()​

EventTargetとなっている通り正確にはElementの機能ではない。ただしElementはEventTargetの一種なので使うことができる。なのでここで紹介しておく。

イベントの種類と実行させたい関数を渡すことで、その種類のイベントが発生した際にその関数を実行することができる。

const button = document.getElementById('button')

button.addEventListener('click', function() {
  alert('hello! I get click event!')
})

value​

inputやtextareaなどの一部のElementに存在するプロパティ。
入力した文字列などが入っている。

let textarea = document.getElementById("input")
console.log(textarea.value)