DOMにおける空白ノードの疑問

javascriptのDOM要素を取得するさい、レシーブオブジェクトで指定した要素の子ノードを取得したいとき、

var s = document.getElementById("itii");
//id="itii"の子要素を取得、
var sChildNode = s.childNodes;
var sChildren = s.children;

二種類あるchildNodesとchildrenのどちらかを利用します。
後者であるchildrenは、IEのどの版か忘れましたが対応していないそうです。
しかし前者のchildNodesと違い空白のノードを取得しないのですが、childNodesは、空白のノードまで取得してしまいます。HTML中の改行であったり空白であったりが空白ノードとして認定されるそうなのですが、
この改行と空白がノードになる条件が良くわかりません。つまり、①HTMLのどの部分を指して改行なのか、②空白の個数などが、そのまま空白のノードの数となるのか、③半角キーの空白と全角キーの空白では、空白ノードの数が変わるのかという疑問があるのです。

HTMLのどの部分を指して改行なのか、というのは、

<tag>
(中略)
</tag>←ココ

なのか、

<tag>←ココ
(中略)
</tag>←ココ(つまり二つ)

なのか、

<tag>←ココ
(中略)
</tag>

<tag>
(中略)
ココ→</tag>

なのか、ということです。

行動規範の内容に同意します

回答2件

Node#childNodes

Node#childNodes は全ての子ノードを返します。
「全て」とは「要素ノード」「コメントノード」「テキストノード」等、あらゆるノードを含みます。

3.4. インタフェース Node - DOM Standard 日本語訳

ParentNode#children

ParentNode#children は子ノード群の内、要素ノードだけを返します。
(つまり、ParentNode#children はホワイトスペースノードだけを除外するわけではありません。)

3.2.6. mixin ParentNode - DOM Standard 日本語訳

この手の仕様は実際にコードを書いて挙動を検証すると理解しやすいと思います。
子ノードにホワイトスペースノード、テキストノード、要素ノード、コメントノード等、あらゆるノードを置いて結果をコンソールに出力すれば理解できるでしょう。

ホワイトスペースノード (White space node)

DOM においてはホワイトスペースノードはただのテキストノードです。
そこにテキストがあるならどんな文字であれ、テキストノードと解釈されます。

ただし、IE8 - にはホワイトスペースノードを読み飛ばしてDOMを構築する仕様があり、この挙動がクロスブラウザを難しくしていました。
ホワイトスペースノードを含むDOMにおいては IE8- と他のブラウザで Node#childNodes が参照するインデックスに違いが出てしまいます。
IE9 でホワイトスペースノードもテキストノードとして読みとるように更新された為、現在ではこの問題は解消されています。
https://blogs.msdn.microsoft.com/ie/2010/09/13/interoperable-html-parsing-in-ie9/

Re: aaaaaaaa さん

投稿2016/12/15 15:53

編集2016/12/16 09:45

think49

総合スコア18162

think49

2016/12/16 09:50

ホワイトスペースノードの説明を追記しました。

aaaaaaaa

2016/12/22 10:41

ご回答有難うございました。 IE11にて <body id="body"> <div id="superParent"> <p id="parent"> <span id="child">あいうえお</span> </p> </div> <script type="text/javascript"> //空白ノードの挙動を調べたかったが、思った通りの表示にならない。 var s = document.getElementById("body"); var sChildNodes = s.childNodes; for(var i=0; i<sChildNodes.length; i++){ console.log("ノード:",sChildNodes[i].nodeName); } </script></body> としてみたとろ、コンソール画面に、ノード: #text ノード: DIV ノード: #text ノード: SCRIPT と表示されました。 https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM 上記ページのカラフルな図のように、表示されるのかと思っておりましたがブラウザが違うためか、上手くできなかったようです。空白ノードもテキストノードの一部とのことですが、画面には、それなりに空白ノードを作ったのですが二つの#textしかありませんし、spanやpも表示されていないようです。これは、どうすると正しく表示できるのでしょうか。

think49

2016/12/22 14:04

childNodesが取得するのは「子ノード」です。 body要素から見てp要素はdiv要素(子要素)の更に子となる孫要素なので childNodes では直接参照できません。 document.body.childNodes[1].childNodes でこれらは参照できます。

aaaaaaaa

2016/12/27 10:50 編集

ご返答有難うございます。仰るとおりにしたところ、 http://fast-uploader.com/file/7038301026511/ の以上のようになりました。重ね重ね申し訳ないのですが、一つ質問させてください。返答を参考に以下のようにしたところ http://jsdo.it/rrrrrrrr/Cjeu 上記のとおりとなったのですが、bodyの孫であるpどころかspan、新たに追加したbもコンソール画面に表示されるようになっています。console.log(sChildNodes[i], sChildNodes[i].childNodes);は、bodyのchildNodesのchildNodesをbodyのchildNodesの数だけ表示するわけですが、てっきり、body div pまでしか表示されないものと思っておったのですが、spanや新しく追加したbもコンソール画面に表示されています。これは何故なのでしょうか。

think49

2016/12/26 14:01 編集

▼ボタンを押して要素を展開していけば、いくらでも子要素を辿って表示することが出来ます。 Windows エクスプローラでフォルダツリーを見ている気持ちで見るとイメージしやすいでしょうか。 SSを見る限りではdiv>p>spanは全て展開されているので見えているだけではないでしょうか。 ▼ボタンを押して閉じれば期待通りの表示になると思います。階層の深さは横軸の位置で決まっているので一段下にインデントすれば、子要素を展開している、と判断すれば良いと思います。

aaaaaaaa

2016/12/27 10:55

なるほど、最後まで辿るわけなのですね。ご回答有難うございました。

行動規範の内容に同意します

とりあえず、Firefoxに関してはこうです。

Mozilla では、元のドキュメントのテキストコンテント中の空白文字は全て DOM 中にも表現されます(タグ内部の空白文字は除く)。

DOM 中の空白文字 - ウェブデベロッパーガイド | MDN

さて。
じゃあ、定義はどうなんだと調べてみたところ泥沼にハマりましたのでご報告します。

まずDOMlevel3にisElementContentWhitespaceというアトリビュートがありました。

isElementContentWhitespace of type boolean, readonly, introduced in DOM Level 3

Returns whether this text node contains element content whitespace, often abusively called 'ignorable whitespace'.
Document Object Model Core

適当訳すると、『テキストノードが、しばしば「無視してよい空白」と誤用されるelement content whitespaceかどうかを返します』でしょうか。

じゃあこのelement content whitespaceとは何かを調べてみると、

[element content whitespace] A boolean indicating whether the character is white space appearing within element content (see [XML], 2.10 "White Space Handling").

XML Information Set (Second Edition)

element contentに含まれる空白である、と。

じゃあ、element contentとはなんぞや。

[Definition: An element type has element content when elements of that type MUST contain only child elements (no character data), optionally separated by white space (characters matching the nonterminal S).]

Extensible Markup Language (XML) 1.0 (Fifth Edition)

『ある要素が、（文字を除く）子要素のみを持たなくてはいけない時、その要素はelement contentを持つ。ただし、空白によって区切られてもよい』とのこと。
つまり、isElementContentWhitespaceである空白とは、これのことではないかなあ、と。
で、この後に (characters matching the nonterminal S) の S が定義されてまして、