DOM - comcatetのメモ帳

DOM4
http://www.w3.org/TR/dom/
https://dom.spec.whatwg.org/
Selectors API Level 1 (SA1)
http://www.w3.org/TR/selectors-api/
DOM3 XPath (XPath)
http://www.w3.org/TR/DOM-Level-3-XPath/
HTML5
http://www.w3.org/TR/html5/
http://www.w3.org/TR/html51/
https://html.spec.whatwg.org/multipage/

• Element - Web API Interfaces | MDN
• Node - Web API Interfaces | MDN
• Document - Web APIs | MDN

ノード/要素を取得

メソッド	戻り値	仕様書	リンク
Document.getElementById("ID")	Element	DOM1	MDN
(Document/Element).getElementsByTagName("タグ名")	HTMLCollection	DOM4	MDN
(Document/Element).getElementsByTagNameNS("名前空間URI", "タグ名")	HTMLCollection	DOM4	MDN
(Document/Element).getElementsByClassName("クラス名")	HTMLCollection	DOM4	MDN
Document.getElementsByName("name属性")	LiveNodeList	HTML5	MDN
(Document/Element).querySelector("CSSセレクタ")	Element	SA1	MDN
(Document/Element).querySelectorAll("CSSセレクタ")	StaticNodeList	SA1	MDN
Document.evaluate("XPath", node, null, Type, null)	XPathResult	XPath	MDN MDN
Element.closest("CSSセレクタ")	Element	LS	MDN

プロパティ	説明	リンク
Node.previousSibling	直前の兄弟ノード	MDN
N_node.previousElementSibling	直前の兄弟要素	MDN
Node.nextSibling	直後の兄弟ノード	MDN
N_node.nextElementSibling	直後の兄弟要素	MDN
Node.parentNode	親ノード	MDN
Node.parentElement	親要素	MDN
Node.childNodes	子ノードのLiveNodeList	MDN
P_node.children	子要素のHTMLCollection	MDN
Node.firstChild	子ノードの一番最初	MDN
P_node.firstElementChild	子要素の一番最初	MDN
Node.lastChild	子ノードの一番最後	MDN
P_node.lastElementChild	子要素の一番最後	MDN
Node.ownerDocument	ノードが属するトップレベルのドキュメントオブジェクト	MDN

• N_node = NonDocumentTypeChildNode
• P_node = ParentNode

ノード/要素の情報（属性以外）

プロパティ	説明	リンク
Node.nodeType	ノードのノードタイプ	MDN
Node.nodeName	ノードの名前	MDN
Element.tagName	要素の名前	MDN
Element.namespaceURI	要素の名前空間URI	MDN
P_node.childElementCount	子要素の数	MDN
Node.baseURI		MDN
Node.nodeValue		MDN
Element.clientTop	上ボーダーの幅	MDN
Element.clientLeft	左ボーダーの幅	MDN
Element.clientWidth	ビュー（ボーダーより内側）の幅(*1)	MDN
Element.clientHeight	ビュー（ボーダーより内側）の高さ(*2)	MDN
Element.scrollWidth	スクロールビューの幅	MDN
Element.scrollHeight	スクロールビューの高さ	MDN
Element.scrollTop	スクロールビューの現在の縦スクロール値	MDN
Element.scrollLeft	スクロールビューの現在の横スクロール値	MDN

メソッド	戻り値	説明	リンク
Node.compareDocumentPosition(otherNode)	bitmask	otherNodeの位置	MDN
Node.contains(otherNode)	boolean	NodeがotherNodeを含むか	MDN
Node.hasChildNodes()	boolean	子供を持っているか	MDN
Node.isDefaultNamespace()	boolean		MDN
Node.isEqualNode(otherNode)	boolean	同じノードか	MDN
Node.lookupPrefix()			MDN
Node.lookupNamespaceURI()			MDN
Element.matches("CSSセレクタ")	boolean	セレクタに合致するか	MDN
Element.getBoundingClientRect()	DOMRect	要素のDOMRect	MDN
Element.getClientRects()	rectCollection	子要素のDOMRectのコレクション	MDN

Node.compareDocumentPosition()の戻り値の説明

• Node.compareDocumentPositionが素晴らしい - hogehoge @teramako

戻り値はビットマスク。

名前	値	説明
DOCUMENT_POSITION_DISCONNECTED	1	otherNodeはNodeから切り離されてる
DOCUMENT_POSITION_PRECEDING	2	otherNodeはNodeより前にある
DOCUMENT_POSITION_FOLLOWING	4	otherNodeはNodeより後ろにある
DOCUMENT_POSITION_CONTAINS	8	otherNodeはNodeを内包している（先祖である）
DOCUMENT_POSITION_CONTAINED_BY	16	otherNodeはNodeに内包されてる（子孫である）
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC	32	実装依存。同一ドキュメントに存在しない場合など

要素の属性

プロパティ	説明	リンク
Element.id	要素のID属性	MDN
Element.className	要素のクラス属性	MDN
Element.classList	要素のクラス属性のDOMTokenList	MDN
Element.attributes	要素の属性のNamedNodeMap	MDN

メソッド	戻り値	説明	リンク
Element.hasAttributes()	boolean	何らかの属性の有無	MDN
Element.hasAttribute("属性名")	boolean	属性の有無	MDN
Element.hasAttributeNS("名前空間URI", "属性名")	boolean	属性の有無	MDN
Element.getAttribute("属性名")	文字列	属性値を取得	MDN
Element.getAttributeNS("名前空間URI", "属性名")	文字列	属性値を取得	MDN
Element.setAttribute("属性名", "値")	-	属性を設定	MDN
Element.setAttributeNS("名前空間URI", "属性名", "値")	-	属性を設定	MDN
Element.removeAttribute("属性名")	-	属性を削除	MDN
Element.removeAttributeNS("名前空間URI", "属性名")	-	属性を削除	MDN

ノード/要素の内容

プロパティ	説明	リンク
Node.textContent	自身のテキストデータ or 全ての子孫ノードの全テキスト	MDN
Element.innerHTML	全ての子孫ノードの全HTML	MDN
Element.outerHTML	自身と全ての子孫ノードの全HTML	MDN

メソッド	戻り値	説明	リンク
Node.appendChild(child)	child	childノードをnodeの最後の子供ノードとして追加	MDN
Element.insertAdjacentHTML(pos, html)	-	Elementの4つのpos位置のどこかにhtmlテキストを挿入	MDN
Node.removeChild(child)	child	childノードをDOMツリーから切り離す	MDN
Node.insertBefore(ins, ref)	ins	insノードをrefノードの前に挿入	MDN
Node.replaceChild(newNode, oldNode)	oldNode	子ノードの置換	MDN
C_node.remove()	-	ノードを削除	MDN
C_node.before(ins, ...)	-	insノードを前に挿入	MDN
C_node.after(ins, ...)	-	insノードを後に挿入	MDN
C_node.replaceWith(new, ...)	-	ノードを置換	MDN

• C_node = ChildNode - Web APIs | MDN

その他

Node.cloneNode() - Web APIs | MDN
Node.normalize() - Web APIs | MDN
Element.shadowRoot - Web APIs | MDN
Element.undoManager
Element.undoScope
attachShadow - Web APIs | MDN
Element.animate()
Element.find()
Element.findAll()
Element.getAnimations()
Element.getDestinationInsertionPoints()
Element.requestFullscreen() - Web APIs | MDN
Element.scrollIntoView() - Web APIs | MDN

EventTarget.addEventListener() - Web APIs | MDN
EventTarget.removeEventListener() - Web APIs | MDN
EventTarget.dispatchEvent() - Web APIs | MDN

Element.setPointerCapture() - Web APIs | MDN
Element.releasePointerCapture() - Web APIs | MDN
Element.requestPointerLock() - Web APIs | MDN

---

---

*1 スクロールバーは含まない

*2 スクロールバーは含まない