JavaScript DOM 9.23(ガレージ2)

この関数を拡張します.
ギャラリーの各画像のリンクにはティタール属性があります.この属性を取り出して、対応する画像と一緒にホームページに表示させることができます.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つだけ使用価値があります.

要素ノードの値は1である.

属性ノードの値は2である.

テキストノードの値は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

三行コードの意味:

ある画像のリンクがクリックされると、このリンクのtittle属性値が抽出されてtext変数に保存されます.

は、IDがdescriptionの要素として得られ、変数descriptionに保存される.

は、descriptionオブジェクトの最初のサブ要素のnodeValue属性値を変数textの値に設定する.