2022/10/31

DOM操作について

JavaScript

要素の取得

html要素,head要素,body要素の取得

document.documentElement;
document.head;
document.body;

親子のノードを取得

子ノード全て

document.body.childNodes; // NodeList

ノードリストとは

最初の子ノード

document.body.firstChild;

最後の子ノード

document.body.lastChild;

親ノード

document.body.parentNode;

兄弟ノード

document.head.nextSibling;
document.head.previousSibling;

親子の要素のみを取得

子要素全て

document.body.chirdren; // HTMLCollection

HTMLCollectionとは

最初の子要素

document.body.firstElementChild;

最後の子要素

document.body.lastElementChild;

親要素

document.body.parentElement;

兄弟要素

document.head.nextElementSibling;
document.head.previousElementSibling;

特定の要素を取得

子孫ノードから当てはまる要素1つ

cssセレクターで指定する

document.querySelector('#hoge'); // id="hoge"の要素
document.querySelector('.hoge'); // class="hoge"の要素
document.querySelector(':checked'); // checkedがついている要素

子孫ノードから当てはまる要素全て

document.querySelectorAll('.hoge'); // class="hoge"のもの全て

祖先ノードから最初に当てはまる要素1つ

document.closest('html');

指定のcssセレクタにマッチするかどうか

// ↓document.bodyはcssセレクタの'body'にマッチするか
document.body.matches('body'); // true

特定のノードを含むかどうか

*引数はノードを直接入れる必要あり

document.body.contains(document.body); // true
document.body.contains(document);// false

要素（DOM）の変更

innerHTML

中身を全て入れ替える

document.body.innerHTML = '<h1>Hello!</h1><div>I am Tom</div>'

要素を足したい時(文字列連結+=を使う)

document.body.innerHTML = '<h1>Hello!</h1><div>I am Tom</div>';
document.querySelector('div').innerHTML += '<div>I am 30years old</div>';

↑一度divの中身を空にしてから中身を入れ替えているので少し効率が悪い

insertAdjacentHTML

要素を付け足す

document.body.innerHTML = '<h1>Hello!</h1><div>I am Tom</div>';
document.querySelector('div')
	.insertAdjacentHTML('挿入場所','<p>I am 30 years old.');

挿入場所の指定方法

セキュリティ上、上記2つのメソッドは気を付ける必要あり（XSS攻撃）

ノードを作って挿入する

ノードを作る

let p = document.createElement('p');
p.textContent = 'hello';

ノードを挿入する(文字列の挿入でも使える)

append

document.querySeloctor('div').append(p);
<div>
	I am Tom
ここ
</div>

prepend

document.querySeloctor('div').prepend(p);
<div>
ここ
	I am Tom
</div>

before

document.querySeloctor('div').before(p);
ここ
<div>
	I am Tom
</div>

after

document.querySeloctor('div').after(p);
<div>
	I am Tom
</div>
ここ

appendはXSS対策されている

DOMの変更（追加）は極力ノード挿入メソッドを使う！

要素の複製

対象ノードのみ複製(default)

let p = document.createElement('p');
p.append('I am Tom');
let p2 = p.cloneNode();
document.querySelector('div').append(p2);
↓↓↓
<div>
	I am Tom
	<p></p>
</div>

子孫ノードまで複製(引数にtrue)

let p = document.createElement('p');
p.append('I am Tom');
let p2 = p.cloneNode(true);
document.querySelector('div').append(p2);
↓↓↓
<div>
	I am Tom
	<p>I am Tom</p>
</div>

要素の削除

remove

<div>
	I am Tom
	<p>I am Tom</p>
</div>
document.querySelector('p').remove();

↓↓↓
<div>
	I am Tom
</div>

要素の置き換え

replaceWith

<div>
	I am Tom
	<p>I am Tom</p>
</div>
document.querySelector('p').replaceWith('<h1>hoge</h1>');

↓↓↓
<div>
	I am Tom
	<h1>hoge</h1>
</div>

• Tweet