クリックすると文字が出るスクリプト

質問

function showIt(src) {
var child, parent, childNum = 0;
if ("B" == src.tagName) {
parent = src.parentNode;
for (var i=0; i < parent.childNodes.length; i++) {
if (parent.childNodes[i].nodeType != 1) { continue; }
if (childNum != 1) { childNum++; continue; }
else { child = parent.childNodes[i]; }
}
if (child != null && "LI" == parent.tagName && "UL" == child.tagName) {
parent.className = ("close" == parent.className ? "open" : "close");
child.className = ('expanded' == child.className ? 'none' : 'expanded');
}
}
}
このサイトのソースです。http://home.impress.co.jp/books/urawaza/tipsbook2/068/
ここのスクリプトがさっぱりわからないので詳しく説明していただけると嬉しいです。
少し例を言うとまずBというのはなんでしょうか？変数でもないようですし、タグのような気もしますが
タグに何かを代入というのはできるのでしょうか？
またparentNode,childNodesというのはなんでしょうか？手元の本には載っていませんでした。
parent.childNodesとなってますがparentは変数ですよね？変数のプロパティというのが
いまいちわかりません。
長くなってしまいましたがわかる範囲でけっこうですのでご回答していただければ幸いです。

回答No.4

noname#18558 · ベストアンサー

parentNodeは、"<LI>"という文字じゃなくて、DOMオブジェクトという階層を表すオブジェクトです。
この表現が難しいですね。
HTMLは文字で書きますが、オブジェクトという実態になるのです。
文字というのもまた、Stringというオブジェクトなのです。

オブジェクトとは何かと言われると、また別の話になるので割愛します。

お礼

ご回答ありがとうございます。
なるほどよくわかりました。
何度も回答本当にありがとうございました！

回答No.5

BLUEPIXY

>window.alert(parent)とやってもobjectとでるだけで
><LI>とでないのはどうしてでしょうか？
javascriptでは、基本型（というか本来型無しだけども）の他（参照型）は、皆objectです。
例えばいろんなモノを
alert(typeof(5))
とかやってみるといいかもしれません。
objectというのは、プロパティ（属性値）やメソッド（手続き：関数）等を包括して保持しているものです。
あるノードオブジェクトが
aNode.nodeName と問い合わせをされて、
その答えが "LI" と返ってきたらそれは、LI エレメントだったとわかります。
alert(unknownObject)した時に、なんと表示されるかは、
そのオブジェクトにそのオブジェクト独自のtoString()メソッドがあるかないかで違います。
独自のモノが無い場合、Object オブジェクトのtoString()が適用されて（つまり標準の場合）objectと表示されます。
だから、もし LI を表すオブジェクトがその文字列としての自己表現を求められてその返すものが <LI> になっていたらいたで、<LI>を表示する仕様になっていても悪くはありません。（むしろその方が親切かもしれません）
肝心なのは、それは単なるテキストではなくて（ＨＴＭＬでは単なるテキストだけれどもブラウザによって内部表現に変換されているとでも）値を保持していたり適用できるスタイルのプロパティを持っていたり、イベントに反応できるそうした複合したものを保持している（つまりオブジェクト）ということです。
（この説明の表現には、語弊があるかもしれません、そのまんま受け取らないように・あくまで説明としての説明ですので）

お礼

再度の回答ありがとうございます。
なるほどオブジェクトについてだいぶわかってきました。
文字を表示するtoString()メソッドがないからobjectと出ていたんですね。
何度も回答本当にありがとうございました！

補足

まだこのソースについて疑問点はありますが
長くなったので一度質問を締め切ろうと思います。
回答してくださった皆様方ありがとうございました！

回答No.3

noname#18558

まずは、プログラミングの基礎から学んだほうがいいかもしれませんね。
変数の意味がよく分かってらっしゃらないようなので。

>parent=src.parentNodeだとオブジェクトの内容?が入るだけで
変数にオブジェクトを入れているわけではないような気がするのですが
変数は、オブジェクトの参照を示します。
ここでは、parentという名前の変数に、src.parentNodeというオブジェクトの参照が入ります。
簡単に言うと、srcの親要素のオブジェクトです。

親とか子というのは、(X)HTMLは階層をもっています。
XML関連をお調べ下さい。

>何のオブジェクトか知る方法はないでしょうか？
何のオブジェクトか知る方法は難しいです。
しかし、プログラムする人にはおよそ何のオブジェクトかというのは想像がつくので問題ではないです。

初心者の方がこのプログラムを理解するのには敷居が高いと思います。
まずは、プログラムの基礎、JavaScriptの基礎をしっかり築いてからのほうがいいでしょう。

お礼

再度の回答ありがとうございます。
基礎ができていないというのは全くおっしゃるとおりで
一応初心者用の本は読んでたのですがなかなかこういうところまでは
解説しておらず四苦八苦しております。
変数がオブジェクトを参照するというのはなんとなくわかったのですが
parent.Nodeは親のノードの値を返すので<LI>という文字が入っているのかな？と思ったのですが違うようですね。
parentNodeでオブジェクトを表すと考えていいのでしょうか？
こんな初心者につきあっていただいて本当に感謝しております。

回答No.2

BLUEPIXY

ココで言うＢは、タグネームのことで
＞if ("B" == src.tagName) {
＞parent = src.parentNode;
<B>だったらその親のエレメントをparentに求めています。
ソースを見るとＨＴＭＬの方で
<LI>
　<B></B>
　<UL><LI></LI></UL>
</LI>
というような構造になっていますが、
この場合Ｂタグの親エレメントは、<LI>です。
そんな感じで、ＤＯＭを利用してエレメントの位置づけをして各エレメントの操作をしています。
＞parentNode,childNodesというのはなんでしょうか？
ＤＯＭで扱えるノードのプロパティです。
参考ＵＲＬを参考にしてください。

参考URL：

http://www.doraneko.org/misc/dom10/19981001/level-one-core.html

お礼

ご回答ありがとうございます。
この場合parent.Nodeというのは<lI>みたいですが
window.alert(parent)とやってもobjectとでるだけで
<LI>とでないのはどうしてでしょうか？
BLUEPIXY様には毎回答えていただいて本当に感謝しております。

回答No.1

noname#18558

質問者様が、どれくらいの知識を有してるのか分かりませんが、

このスクリプトの"B"というのは、単なる文字列です。
この行の意味は、この関数に渡された値(src)のtagNameというプロパティが"B"であるかどうかを判断しています。
代入(=)ではなく比較(==)です。

parent.childNodesというのは、
parentオブジェクトのchildNodesというプロパティを示しています。
おそらく、parentオブジェクトはDOMタイプでしょう。
ここでの意味は、parentの子の階層という意味です。
parentは、変数ですが実態はオブジェクトです。
parentはDOMオブジェクトタイプなので、そのchildNodesプロパティという意味です。

変数は、文字列や数値のほかにもオブジェクトをもつことができます。
まあ、文字列や数値もオブジェクトなんですが。
それらには、プロパティという属性を持ってますので、変数のプロパティというよりも、その変数が参照するオブジェクトのプロパティという表現が正しいでしょう。

お礼

ご回答ありがとうございます。
parentNodeというプロパティは親ノードのオブジェクトの内容を返す
と書いてありました。
それでいまいち意味がわからないのですが
parent=src.parentNodeだとオブジェクトの内容?が入るだけで
変数にオブジェクトを入れているわけではないような気がするのですが
違うのでしょうか？
いまいちこれが何をやっているのかがわからないです。
それと何のオブジェクトを指しているかwindow.alert(src)としたのですがobjectと出るだけみたいで何のオブジェクトか知る方法はないでしょうか？

補足

=と==を完全に見間違えてました(^^;
すいませんでした。