概要
前回の続き。
親・子・兄弟ノードの取得
取得した要素から見て「親」「子」「兄弟」ノードを取得する事も可能です。
| Method | Description |
|---|---|
| element.parentNode | elementの親ノードを取得する。 |
| element.childNodes | elementの子ノードを取得する。 |
| element.firstChild | elementの最初の子ノードを取得する。 |
| element.lastChild | elementの最後の子ノードを取得する。 |
| element.nextSibling | elementの次のノードを取得する。 |
| element.previousSibling | elementの前のノードを取得する。 |
上記の注意点として、「改行」や「空白」も取得してしまう点があります。
(あくまでも、ノードを取得するメソッドの為)
毎回それらを判別するのはすごく手間です。
その対策として、要素のみに限定して取得する、下記のメソッドも準備されています。
| Method | Description |
|---|---|
| element.children | elementの子要素を取得する。 |
| element.firstElementChild | elementの最初の子要素を取得する。 |
| element.lastElementChild | elementの最後の子要素を取得する。 |
| element.nextElementSibling | elementの次の要素を取得する。 |
| element.previousElementSibling | elementの前の要素を取得する。 |
| element.childElementCount | elementの子要素の数を返す。 |
カスタム属性の取得
DOM取得では、カスタム属性の値も取得する事が可能です。
| Method | Description |
|---|---|
| element.dataset.[dataName] | data属性名がdataNameの値を取得する |
DOMの作成
今までは、DOMノードの取得がメインでしたが、自分でDOMノードを作成する事も可能です。
| Method | Description |
|---|---|
| document.createElement | 要素ノードを作成する。 |
| document.createText | テキストノードを作成する。 |
| document.createComment | コメントノードを作成する。 |
DOMの挿入
作成したDOMノードや、既存のDOMノードに対して、ノードを挿入する事ももちろん可能です。
| Method | Description |
|---|---|
| element.appendChild(newElement) | newElementをelementの末尾に挿入する。 |
| element.insertBefore(newElement) | newElementをelementの先頭に挿入する。 |
DOMの属性の追加
DOMに属性を追加する事も容易に可能です。
| Property | Description |
|---|---|
| element.id = 'foo'; | elementに#fooを追加する。 |
| element.className = 'hoge' | elementに.hogeを追加する。 |
| element.style.color = 'red' | elmentのcolorを赤にする。 |
DOMの書き換え
innerHTMLを使えば「createElement」や「appendChild」を使わずともDOMの書き換えが可能です。
let content = document.getElementById(`content`);
content.innerHTML = `
<h1>Hello from innerHTML</h1>
`;
let getContent = content.innerHTML;
console.log(getContent);
innerHTMLは要素の中身の書き換えのみではなく、要素の中身の取得も可能です。
また、 textContent もinnerHTMLと同じ様な記述ができます。
innerHTMLとの違いは、タグを書いても文字列として判別されます。
ノードの置換
ノードとノードを入れ替える事もできます。
replaceChildを利用します。
document.replaceChild(newElement, oldElement);
ノードの削除
ノード自体を削除する事も可能です。
removeChildを利用します。
document.removeChild(element);
終わり
これである程度DOMの操作はできる様になったのではないでしょうか。
次回以降はもう少し細々した内容について調査したと思います。
続きは次回。