・DOM、Node、Element
DOMは基本的なインターフェースの提供とツリー構造を作っている。
DOMを構成する単位がNodeで、Nodeは文字列やコメントなども含まれる。Nodeの中でタグの部分がElementと呼ばれる。
Elementは、階層でElement、HTMLElement、HTML*Element
のように継承しそれぞれインターフェースを持っている。
・型の調べ方
|
1 2 |
let el = document.getElementById("a"); alert(Object.prototype.toString.call(el)); |
・タグ、要素
要素＝<開始タグ 属性>内容<終了タグ>
・要素取得
HTML*Element = document.getElementById(id)
idで要素を取得
HTMLCollection = document.getElementsByTagName(name)
タグ名で要素を取得
HTMLCollection = document.getElementsByClassName(name)
classで要素を取得
NodeList = document.getElementsByName(name)
name属性で要素を取得
HTML*Element = document.querySelector(selectors)
CSSセレクターで要素(最初の1つ)を取得
NodeList = document.querySelectorAll(selectors)
CSSセレクターで要素(複数)を取得
・NodeListとHTMLCollection
NodeList： 取得後更新しない。
HTMLCollection： 取得後更新する。
for … of で回す
|
1 2 3 4 |
let d = document.getElementsByTagName('div'); for (let e of d) { alert(e.textContent); } |
・要素取得(親子関係)
HTML*Element = el.parentNode
親要素
HTML*Element = el.firstElementChild
最初の子要素
HTML*Element = el.lastElementChild
最後の子要素
HTMLCollection = el.children
子要素リスト
HTML*Element = el.previousElementSibling
1つ前の要素
HTML*Element = el.nextElementSibling
1つ後の要素
・要素操作
HTML*Element = document.createElement(タグ)
指定タグで要素を作成
parentNode.insertBefore(newNode, referenceNode)
referenceNodeの前にnewNodeを追加
parentNode.appendChild(newNode)
最後にnewNodeを追加
parentNode.removeChild(childNode)
childNodeを削除
・内容操作
string = el.innerHTML
タグが解析される。
string = el.textContent / el.innerText
タグが解析されない。取得するとタグはなくなり、設定するとタグは文字列になる。
textContentと、innerTextの違い。
textContentは改行コードなどは維持され、innerText変換されるなどいくつかある。
・属性操作
string = el.getAttribute(name)
属性を取得
el.setAttribute(name, value)
属性を設定
el.removeAttribute(name)
属性を削除
bool = el.hasAttribute(name)
属性を持っているかどうか
・classList
string = el.className
classの確認
el.classList.add(name)
classの追加
el.classList.remove(name)
classの削除
el.classList.toggle(name)
classのOn/Off
bool = el.classList.contains(name)
class有無