Snapshots

Fireworks

Coffee

Rose

Big Ben

现在需要改变.html文档的一些行为，比如点击链接时不是直接连接到该图片(另一个网页)，而是在网页的空白部分显示该图片。
   定义showPic.js
   function showPic(whicPic){
   var source=whicPic.getAttribute("href");
   var placeholder=document.
      getElementById("placeholder");
   placeholder.setAttribute("src",source);
}
//whicPic指的是页面中的链接
//函数的目的就是需要在placeholder设置所点链接href属性的图片
//在点击某个元素时，该元素会被保存为一个this对象，从而这样
//showPic（this）将该元素传入到该函数中。
#此时当点击元素时placeholder中会显示图片但是链接被点击的默认行为#还是会发生
//在每个元素中加入以下代码：onclick="showPic(this);return //false;"
//事件处理函数的工作机制：
//在给某个元素添加了事件处理函数之后一旦发生了预定的事件，相应的//javascript函数被调用，并返回一个结果true或者false。若为true则//事件处理函数认为链接被点击了，若为false事件处理函数认为链接没有被点//击。

对javascript函数功能进行扩展
1，childNodes属性
用于检索一个元素的所有子元素。返回一个数组，包含给定元素节点的所有子元素。
如获取body元素的所有子元素：
var body=document.getElementsByTagName("body")[0];
body.childNodes;
DOM为body元素提供了一个更为简单的使用方式：document.body;
document.body.childNodes;
2,nodeType属性
body元素中应该只有三个元素，h1，ul，img元素，但输出的数字却远大于此。这时因为文档树的的节点类型并非只有元素节点一种。childNodes包含了文档中其他的属性节点以及文本节点。
可以使用nodeType属性来区分文档中的各个节点类型，它返回的是一个数字
它共有12中可取值，其中只有3中是有价值的：
·元素节点的值为1
·属性节点的值为2
·文本节点的值为3

在文档末尾添加

Choose an image

,需要在选定某张图片时更改

元素的内容为相应的链接的title属性值。
nodeValue属性
如果需要改变某个文本节点的值，可以使用以下的方式node.nodeValue=.
但是：
var des=document.getElementById("description");
在这里得到的是id为description的

元素节点，而不是其中的文本节点。使用以下的方式：
des.childNodes[0].nodeValue;
firstChild和lastChild
访问第一个子节点和最后一个子节点可以分别使用firstChild和lastChild。相应的较为麻烦的方式：childNodes[0],childNodes[childNodes.length-1]
到这里showPic可以修改为：
function showPic(whicPic){
    var source=whicPic.getAttribute("href");
    var placeholder=document.
      getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var text=whicPic.getAttribute("title");
    var des=document.getElementById("description");
    des.firstChild.nodeValue=text;
}

预留退路
臭名昭著的弹出窗：
window.open(url,name,features);
eg：
window.open("",
"popup","width=320,height=480");
#test.js

function popUp(ref){
window.open(ref,"popup","width=320,height=480");
}

#test.html

阅读(1074) | 评论(0) | 转发(0) |

上一篇：DOM简单介绍

下一篇：javascript美术馆改进版

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6