はじめに
今回は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の学習についてまとめました。