[JavaScript] DOMの操作方法 #JavaScript

はじめに

今回はDOMの操作方法について学習したため、備忘録として作成しています。

ノードの追加

createElementメソッド

要素を作成するメソッド
ノードを作成するだけのため、別途ドキュメントに追加する処理が必要

createElement

document.createElement(要素名)

createTextNodeメソッド

テキストノードを作成する
ノードを作成するだけのため、別途階層に追加する処理が必要

createTextNode

document.createTextNode(テキスト)

appendChildメソッド

指定された要素を現在の要素の最後の子要素として追加する

appendChild

要素オブジェクト.appendChild(追加する子ノード)

戻り値は子ノード

例題

空のリスト、ボタンを配置する
ボタンをクリックするとリストの項目が追加される
追加される文字列は"test"とする

例題

<body>
  <ul id="list"> 
  </ul>
<input id="button" type="button" value="Add!">
<script> 
const e = document.getElementById('button');
e.addEventListener('click', () => {
  const li = document.createElement('li');
  const text = document.createTextNode('test');
  li.appendChild(text);
  const listElement = document.getElementById('list');
  listElement.appendChild(li);
}, false);
</script>
</body>

ノードを置換する

replaceChildメソッド

newChildとoldChildを入れ替える（appemdChildとremoveChildを同時に行う）

例題

リストとボタンを配置
ボタンをクリックするとリストの子要素を置換する処理

例題

<body>
  <ul>
    <li id="oldList">old element</li>
  </ul>
<input id="button" type="button" value="Replace">
<script> 
const e = document.getElementById('button');
e.addEventListener('click', () => {
  const newList = document.createElement('li');
  newList.setAttribute('id', 'newList');
  const newText = document.createTextNode('new element');
  newList.appendChild(newText);
  const oldList = document.getElementById('oldList');
  const parentNode = oldList.parentNode;
  parentNode.replaceChild(newList, oldList);
}, false);
</script>
</body>

ノードの削除

removeChildメソッド

指定した子ノードを取り除く

例題

リストとボタンを設置
ボタンをクリックするとリストの子要素が最後のものから削除される

例題

<body>
  <ul id="list">
    <li>element1</li>
    <li>element2</li>
    <li>element3</li>
    <li>element4</li>
    <li>element5</li>
  </ul>
<input id="button" type="button" value="Remove!">
<script> 
const e = document.getElementById('button');
e.addEventListener('click', () => {
  const parentElement = document.getElementById('list')
  const elements = parentElement.getElementsByTagName('li')
  const removeIndex = elements.length - 1;
  parentElement.removeChild(elements[removeIndex]);

}, false);
</script>
</body>

エラーが発生する理由

HTMLのファイルダウンロードが終わった後の動き

HTMLページに記述されている内容をページの先頭から順にパース(解析)する
DOMツリーを構築

scriptタグがあると、パースをいったん停止してscriptタグの中の JavaScript のコードが実行される
これによりまだパースが行われていない場合nullになってしまう

エラーを回避する方法

HTMLページの末尾に記述する
JavaScript のコードを要素よりもあとへ、例えば HTML ページの末尾であるbodyの直前に記述すればエラーを回避できる
DOMContentLoadedイベントを利用する
headタグ内にscripタグを記述したい場合に利用できる
loadイベントを利用する
scriptタグでdefer属性を設定する
JavaScript のコードを記述した外部のファイルを読み込む場合にだけ利用できる

おわりに

今回はDOMの学習についてまとめました。