JavaScript DOM 9.23(ガレージ2)
2241 ワード
この関数を拡張します.
ギャラリーの各画像のリンクにはティタール属性があります.この属性を取り出して、対応する画像と一緒にホームページに表示させることができます.tittle属性の値はget Attributeで簡単に入手できます.
childNodes属性
childNodes属性は、任意の要素のすべてのサブ要素を得るために使用できます.この要素のすべてのサブ要素を含む配列です.
このノードは元素のノードタイプを教えてくれます.要素ノードの値は1である. 属性ノードの値は2である. テキストノードの値は3である. 説明を追加
テキストノードを追加して、テキストの一部を表示します.画像を表示する時、この文字の値をターゲットファイルのtittleの値に置き換えます.
ステートメントを追加して、whichpicオブジェクトのtitle属性値を取得します.text変数を保存:
ノードの値を取得するためにnodeValueを使用します.
p要素に含まれるテキストは別のノードであり、p要素の最初のサブノードであるので、
first ChildとlastChildの属性:
nodeValueを使って完成しました.ある画像のリンクがクリックされると、このリンクのtittle属性値が抽出されてtext変数に保存されます. は、IDがdescriptionの要素として得られ、変数descriptionに保存される. は、descriptionオブジェクトの最初のサブ要素のnodeValue属性値を変数textの値に設定する.
ギャラリーの各画像のリンクにはティタール属性があります.この属性を取り出して、対応する画像と一緒にホームページに表示させることができます.tittle属性の値はget Attributeで簡単に入手できます.
var text = whichpic.getAttribute("tittle");
tittle属性の値を抽出するだけでは足りません.HTMLドキュメントに挿入する必要があります.いくつかの新しいDOM特性を使用する必要があります.childNodes属性
childNodes属性は、任意の要素のすべてのサブ要素を得るために使用できます.この要素のすべてのサブ要素を含む配列です.
element.childNodes
元素の全体的な部分がいくつあるかを調べることができます.入力された1つの配列を試しますので、length属性で要素の個数を知ることができます.element.childNodes.length
関数内部のalert関数は、関数がトリガされた時にのみ、檀の警告枠ができます.外部のalertは順番に実行されます.この関数がページにロードされる時に実行されたいなら、オンラインイベント処理関数を使う必要があります.window.onload = founction()
nodeType属性このノードは元素のノードタイプを教えてくれます.
node.nodeType
nodeTypeで返した値は、数字が英語文字列ではありません.nodeType属性は全部で12個の値がありますが、3つだけ使用価値があります.テキストノードを追加して、テキストの一部を表示します.画像を表示する時、この文字の値をターゲットファイルのtittleの値に置き換えます.
Choose an image.
jsでshowPic関数を修正します.ステートメントを追加して、whichpicオブジェクトのtitle属性値を取得します.text変数を保存:
var text = whichpic.getAttribute("title");
次にdescription要素を取得します.var description = document.getElementById("description");
nodeValue属性ノードの値を取得するためにnodeValueを使用します.
`node.nodeValue`
description.nodeValue
を使用して得られた値は、この段落に含まれるテキストではなく、nullを返します.p要素自体のnodeValue属性は空の値ですから.p要素に含まれるテキストは別のノードであり、p要素の最初のサブノードであるので、
description.childNodes[0].nodeValue
このようにして、第1のサブノードの属性値を取得する.first ChildとlastChildの属性:
node.firstChild node.childNodes[0]
node.lastChild node.childNodes[node.childNodes.length-1]
もっと短くて、しかも可読性があります.nodeValueを使って完成しました.
var description = document.getElementById("description");
var text = whichpic.getAttribute("tittle")
description.childNodes[0].nodeValue = text
// description.firstchild.nodeValue = text
三行コードの意味: