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>
