素のJavaScriptでDOM操作する際、何を参照しているか、の判定で使えそうな情報をまとめました。
Object.prototype.toString.call(elements);
オブジェクトのクラス名(型)を取得するメソッド toString を call を使って呼び出します。
| DOM取得の書き方 | → toStringした結果 |
|---|---|
| element.getElementsByClassName() element.getElementsByTagName() |
[object HTMLCollection] 要素ノードのコレクション |
| document.forms document.images document.links document.anchors 他、embeds, plugins, scripts など |
→ [object HTMLCollection]
要素ノードのコレクションanchors は <a name=” “>～</a> で、aタグのリンクは links の方に格納されます。 （aタグのリンクは HTMLAnchorElement という名前なので少し混乱します。） |
| element.children | → [object HTMLCollection] 要素ノードのコレクション |
| document.getElementById() | → [object HTML【TagName】Element] 要素ノードそのもの |
| element.querySelector() | → [object HTML【TagName】Element] 要素ノードそのもの |
| element.querySelectorAll() | → [object NodeList] すべての種類のノードのコレクション … ということになるが、cssセレクタで検索しているので、実質、要素ノードのみのコレクションか。 |
| element.childNodes | → [object NodeList]
すべての種類のノードのコレクションelement.childNodes で取得したものを for文で回して確認すると、テキストノード → [object Text]要素ノード（エレメントノード） → [object HTML【TagName】Element] |
【TagName】
タグ名が入ります。
1文字目が大文字のものが入ることが多いようですが、いろんなパターンがありますね。
| p | [object HTMLParagraphElement] |
| a | [object HTMLAnchorElement] |
| br | [object HTMLBRElement] |
| i, b, em | [object HTMLElement] |
element.nodeType
主に使う値は以下でしょうか。
| 値 | 意味 |
|---|---|
| 1 | 要素ノード（エレメントノード） |
| 3 | テキストノード ※ element.children ではひっかからない。 element.childNodes で。 |
| 8 | コメントノード ※ element.children ではひっかからない。 element.childNodes で。 |
| 10 | 文書型宣言 document でとるとこれ。 <!DOCTYPE html> のことですね。 |
element.nodeName
要素ノードは【TagName】と同じようです。
テキストノードは #text 、コメントノードは #comment、文書型宣言は html でした。
nodeTypeの番号で判別すればいいような気がしました。