javaScript学习：图片库（2）拓展 

1         function show(pic){
2             var sour = pic.getAttribute('href');
3             var placeholder  = document.getElementById('pla');
4             placeholder.setAttribute('src',sour);
　　　　　　　　//当函数被触发时（点击图片链接），这个链接的‘title’被提取并且保存到变量text中
5             var text = pic.getAttribute('title');
　　　　　　　　//得到ID为‘description’的元素，并且将它赋值给变量description
6             var description = document.getElementById('description');
　　　　　　　　//把 图片链接的title值赋值给id为description的元素（即那个P元素）
7            description.firstChild.nodeValue=text;
8         }

以上是拓展后的JS语句，可以在点击图片链接时并且显示出图片链接的title值，

涉及到的语句有：

  • childNodes属性
    • 可以用来获取任何一个元素的所有子元素　　element.childNodes 　　
    • 是一个数组
    •         var BodyElement = document.getElementsByTagName('body')[0];
        console.log(BodyElement.childNodes);

       

  • nodeType属性
    • node.nodeType
    • BodyElement.nodeType

      　　

  • nodeValue属性
    • 用来得到（和更改）一个节点的值
    • node.nodeValue
    •  description.firstChild.nodeValue
      //更改value值的话就用 赋值=  语句

　　　　

当然在html里要加入一个id为‘description’的<p>元素

posted @ 2016-08-17 17:29  GodCe  阅读(146)  评论(0)  编辑  收藏  举报