91
77

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScript DOM操作再入門②

Last updated at Posted at 2016-07-04

概要

前回の続き。

親・子・兄弟ノードの取得

取得した要素から見て「親」「子」「兄弟」ノードを取得する事も可能です。

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の操作はできる様になったのではないでしょうか。
次回以降はもう少し細々した内容について調査したと思います。

続きは次回。

91
77
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
91
77

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?