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.previousElementSibling1つ前の要素
element.nextElementSibling1つ後の要素

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>

要素の幅、高さ、線幅

よかったらシェアしてね!
目次