WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:childNodes[0]、nodeValue などについて

ひろ [WriteDate : Mon May 28 19:04:49 2001]

最近はDOMによる記述が増えているようですが、わからないことがたくさんあります。
document.getElementById("x").valueと
document.getElementById("y").childNodes[0].nodeValue

の違いや使い方がはっきりわかりません。

たぶん前者はフォーム関連のinput要素などのvalueのことじゃないかと思うんですが(?)、後者は???

childだから子要素の配列の何番目かの値かなとも思ったんですが…?です。

次のようなサンプルを作ったんですが、子要素の値は得られません。

<script type="text/JavaScript">
<!--
function valueFunc(){
    alert("id1 value: "+document.getElementById("id1").value);
    alert("id2 childNodes[0].nodeValue: "+document.getElementById("id2").childNodes[0].nodeValue+"\nid2 childNodes[1].nodeValue: "+document.getElementById("id2").childNodes[1].nodeValue+"\nid2 childNodes[2].nodeValue: "+document.getElementById("id2").childNodes[2].nodeValue);
}
//-->
</script>
</head>
<body>
<div><input type="text" value="あいうえお" id="id1"></div>
<div id="id2">かきくけこ
  <input type="text" value="さしすせそ">
  <span>たちつてと</span>
</div>
<div><button onclick="valueFunc()">click</button></div>


ween [WriteDate : Mon May 28 19:21:07 2001]

nodeValue の値は、ノードの型によって意味が異なります。
Text ノードや Comment ノードの場合は
その内容の文字列が nodeValue になりますが、
Element ノードの場合は一律に null になります。

value はその要素の value 属性ですね。
HTML の DOM では要素の属性がそのまま(一部例外有り)
Element ノードのプロパティとなります。


ひろ [WriteDate : Tue May 29 10:47:07 2001]

回答ありがとうございます。

>nodeValue の値は、ノードの型によって意味が異なります。

nodeの意味と数え方を取り違えてました。
ある要素の中身はテキストであろうが、タグであろうがそれぞれが1つのnodeになるわけですね。

でもまだいくつか質問があります。

>Text ノードや Comment ノードの場合は
>その内容の文字列が nodeValue になりますが、
>Element ノードの場合は一律に null になります。

Text ノードはその名のとおりですが、Comment ノードってどんな場合ですか。Element ノードはたぶん子要素のこと?ですか。

 もう1つは、上記の質問に関係あるかもしれませんが、私のサンプルで
childNodes[1].nodeValueは「null」で、childNodes[2].nodeValueが「 」なのはなぜでしょうか。


ween [WriteDate : Tue May 29 13:49:45 2001]

> ある要素の中身はテキストであろうが、タグであろうがそれぞれが1つのnodeになるわけですね。

HTML 文書を構成しうるほとんどのものが Node です。
要素も、属性も、コメントも、文書型宣言も Node といえます。
で、Node が持っている子Node のリストが childNodes です。
W3C の DOM では、文書全体を Node のツリー構造で表してると言えます。
そのルートになるのが Documentノード で、
JavaScript では document オブジェクトがこれに相当します。

> Text ノードはその名のとおりですが、Comment ノードってどんな場合ですか。Element ノードはたぶん子要素のこと?ですか。

<!-- 〜 --> もノードとして扱われ、追加したり削除したり参照したりできます。
ElementNode は子要素に限らず、
親要素も兄弟要素も getElementById() で取得した要素も、
HTML でいう「要素」にあたるものはみんな ElementNode です。

>  もう1つは、上記の質問に関係あるかもしれませんが、私のサンプルで
> childNodes[1].nodeValueは「null」で、childNodes[2].nodeValueが「 」なのはなぜでしょうか。

childNodes[1] は input 要素を指す ElementNode です。
で、childNodes[2] は何かというと、input 要素と span 要素の間の空白を指す TextNode です。
Mozilla や N6 の場合はソース中の改行やスペースをそのまま返すんですが
IE の場合はスペース一つを返すようです。
span 要素を指す ElementNode は childNodes[3] になります。


ween [WriteDate : Tue May 29 14:24:58 2001]

> ある要素の中身はテキストであろうが、タグであろうがそれぞれが1つのnodeになるわけですね。

HTML 文書を構成しうるほとんどのものが Node です。
要素も、属性も、コメントも、文書型宣言も Node といえます。
で、Node が持っている子Node のリストが childNodes です。
W3C の DOM では、文書全体を Node のツリー構造で表してると言えます。
そのルートになるのが Documentノード で、
JavaScript では document オブジェクトがこれに相当します。

> Text ノードはその名のとおりですが、Comment ノードってどんな場合ですか。Element ノードはたぶん子要素のこと?ですか。

<!-- 〜 --> もノードとして扱われ、追加したり削除したり参照したりできます。
ElementNode は子要素に限らず、
親要素も兄弟要素も getElementById() で取得した要素も、
HTML でいう「要素」にあたるものはみんな ElementNode です。

>  もう1つは、上記の質問に関係あるかもしれませんが、私のサンプルで
> childNodes[1].nodeValueは「null」で、childNodes[2].nodeValueが「 」なのはなぜでしょうか。

childNodes[1] は input 要素を指す ElementNode です。
で、childNodes[2] は何かというと、input 要素と span 要素の間の空白を指す TextNode です。
Mozilla や N6 の場合はソース中の改行やスペースをそのまま返すんですが
IE の場合はスペース一つを返すようです。
span 要素を指す ElementNode は childNodes[3] になります。


ひろ [WriteDate : Tue May 29 17:50:24 2001]

ご説明ありがとうございました。Nodeの意味がだいたいつかめたと思います。

>で、childNodes[2] は何かというと、input 要素と span 要素の空白を指す TextNode です。

空白ですか。なるほど。インラインタグの直前に空白があるからですね。子の空白が1つのnodeになってしまったんですね。(つまりルール違反ですね。^ ^;) あらためて勉強になります。


ひろ [WriteDate : Tue May 29 17:54:06 2001]

もしご存知ならDOMについてわかりやすく書いたサイトを教えてもらえませんか。


ween [WriteDate : Wed May 30 08:29:43 2001]

DOM 関連のサイトってほとんど Java で XML 文書を扱うものなんですよね。
僕も以前自分が勉強するのに探したことあるんですけれども
HTML を扱う JavaScript 向けのサイトは見つけられず、
結局 W3C の仕様書と格闘してしまいました。
ブラウザ側の実装状況がまだ仕様に充分に追いついていないので
そういうサイトが出てくるのはこれからなんでしょうね。
仕様自体に策定進行中の部分もあるし。

というわけで、残念ですが僕は仕様書へのリンクしかはれません…すみません。
読み方のコツさえわかればどうにかなると思います。

DOM Level1 仕様書 (邦訳)
http://www.doraneko.org/misc/dom1/cover.html

DOM Level2 仕様書 他 (英語)
http://www.w3.org/DOM/DOMTR


あと、JavaScript のサンプルコードだけで解説とか全くないんですが
以下のようなものがあります。

Mozilla's DOM Sample Project
http://cgi.din.or.jp/~hagi3/JavaScript/JSTips/Mozilla/idl.cgi?idl=w3c2_5&smp=y


DOM2 は勧告が昨年11月ということもあって
IE では未サポートのものが多いです。
ご自分でサンプル書かれるなら
Mozilla か N6 で試したほうがいいかと思います。
# とはいえバグもあるので動作結果を過信はできないんですが。


ひろ [WriteDate : Thu May 31 08:59:15 2001]

貴重なご意見ありがとうございました。今後の参考にさせていただきます。

>DOM 関連のサイトってほとんど Java で XML 文書を扱うものなんですよね。

やっぱりそうでしたか。私も探したことがあったんですが、XMLのページばかりでちんぷんかんぷんでしたので投稿したのですが….

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]
ChaichanPAPA's World