2017.01.23 [月] NodeList と HTMLCollection と Node.appendChild() と
JavaScriptを書いていると、Chrome Developer Toolsのコンソールに「Nodeが…」なんてエラーを、たびたび戴きます。
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
「appendChild使うときは、Nodeじゃないとダメだよ」
その都度、Googleで調べたり書き直したりして対処していたのですが、すぐに忘れてしまうので備忘録として書いておきます。
目次
Nodeとは
Node（ノード）
NodeとはHTMLの中にあるすべてをNode（節-ふし）という単位で区切ったインターフェースのことを言います。
HTMLの要素はもちろん、テキストや属性、コメントにいたるすべてがNodeになります。
Nodeの種類には、12種類あり、主なものは下の表の太字「Document（ドキュメント）」「Element（要素）」「Attr（属性）」「Comment（コメント）」「Text（テキスト）」などです。
| インターフェース | 解説 | 定数 | タイプ |
|---|---|---|---|
| Element | エレメント、要素。HTMLタグを表します。 | ELEMENT_NODE | 1 |
| Attr | アトリビュート、属性。HTMLタグ内の属性。 | ATTRIBUTE_NODE | 2 |
| Text | テキストノード、タグ以外の文字データや、空白・タブ・改行（＝ホワイトスペースノード）。 | TEXT_NODE | 3 |
| CDATASection | CDATA セクション | CDATA_SECTION_NODE | 4 |
| EntityReference | エンティティリファレンス | ENTITY_REFERENCE_NODE | 5 |
| Entity | エンティティ | ENTITY_NODE | 6 |
| ProcessingInstruction | 処理命令 | PROCESSING_INSTRUCTION_NODE | 7 |
| Comment | <!--から-->で囲まれたコメント | COMMENT_NODE | 8 |
| Document | HTML文書全体を表します。JavaScriptでは、documentオブジェクト。 | DOCUMENT_NODE | 9 |
| DocumentType | ドキュメントタイプ | DOCUMENT_TYPE_NODE | 10 |
| DocumentFragment | ドキュメントフラグメント | DOCUMENT_FRAGMENT_NODE | 11 |
| Notation | ノーテーション | NOTATION_NODE | 12 |
