DOM操作(要素の取得, 追加, 削除)

Javascriptでプログラミングしていると、HTMLの各要素を直接操作したいときがでてきます。そんな時に必要なのが、DOM操作の知識です。ここでは、基本的なDOM操作方法(要素の取得、追加、削除)を解説します。

要素の取得

メソッド 説明 戻り値
document.getElementById(id) idで要素を取得 Element
document.getElementsByClassName(name) classで要素を取得 HTMLCollection
document.getElementsByName(name) name属性で要素を取得 NodeList
document.getElementsByTagName(name) タグ名で要素を取得 HTMLCollection
document.querySelector(selectors) セレクターで要素(最初の1つ)を取得 Element
document.querySelectorAll(selectors) セレクターで要素(複数)を取得 NodeList

HTMLCollectionとNodeListは、ほぼ同じものです。ともに、 forEach を持ってないので、要素のループ処理を行いたい場合、以下のようにします。

const elements = document.getElementsByTagName('div')
Array.prototype.forEach.call(elements, element => {
  console.log(element)
})

ノードウォーキング

あるノードを基点に別ノードを取得する方法です。

プロパティ 説明
element.parentNode 親要素
element.firstElementChild 最初の子要素
element.lastElementChild 最後の子要素
element.children 子要素リスト
element.previousElementSibling 1つ前の要素
element.nextElementSibling 1つ後の要素

firstChild というのもあります。こちらは最初の 子ノード を返します。ノードは以下のようなものを含みます。

  • ノード
    • 要素(ノード)
    • 属性ノード
    • 文字列ノード

つまり、要素(ノード)以外に文字列ノードなども含まれます。

HTML要素の書き換え

innerHTML でHTML要素にアクセスできます。

element.innerHTML = '<div>xxxxx</div>'

属性操作

メソッド 説明
element.getAttribute(name) 指定属性を取得
element.setAttribute(name, value) 指定属性を設定
element.removeAttribute(name) 指定属性を削除

要素の作成, 追加, 削除

メソッド 説明
document.createElement(name) 指定タグで要素を作成
node.insertBefore(newElement, referenceElement) referenceElementの前にnewElementを追加
node.appendChild(newElement) 最後の子要素として追加
node.removeChild(child) 子ノードを削除

利用例

<ul id="list">
  <li>かきくけこ</li>
  <li>さしすせそ</li>
</ul>
const element = document.getElementById('list')

// 最初の子要素として追加
const liFirst = document.createElement('li')
liFirst.textContent = 'あいうえお'
element.insertBefore(liFirst, element.firstChild)

// 最後の子要素として追加
const liLast = document.createElement('li')
liLast.textContent = 'たちつてと'
element.appendChild(liLast)
<ul id="list">
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
  <li>たちつてと</li>
</ul>
わくわくBank.
フリーランスのエンジニアとして活動してます。ここでは、ソフトウェア開発で必要とされる技術、用語、概念を整理しています。