問題の核心 DOM 中に空白文字が存在すると、コンテントツリーの操作が予想外に困難なものとなります。 Mozilla では、元のドキュメントのテキストコンテント中の空白文字は全て DOM 中にも表現されます(タグ内部の空白文字は除く)。(これはエディタがドキュメントの体裁を保存できるようにしたり CSS の white-space: pre が機能するようにするために内部的に必要です。) これが意味するのは: 空白文字のみを含むテキストノードが存在し、 始めや終わりに空白文字を持つテキストノードがある。 つまり、以下のドキュメントの DOM ツリーは下の画像のようになるということです ("\n" は改行を表しています): <!-- My document --> <html> <head> <title>My Document</title> </head> <body> <h1>Head
![DOM 中の空白文字 - Web API | MDN](https://cdn-ak-scissors.b.st-hatena.com/image/square/e51bd6dc33a667d35eb4146698a198e55ff92d6e/height=288;version=1;width=512/https%3A%2F%2Fdeveloper.mozilla.org%2Fstatic%2Fimg%2Fopengraph-logo.72382e605ce3.png)