JavaScript DOM 9.23(ガレージ2)

2241 ワード

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