－－－－－－－－－－－－－－－－－开始－－－－－－－－－－－－－－－－－
电影天堂
选择一张图片
h1{ color: #333; } a{ color: gray; font-weight: bold; text-decoration: none; } ul{ padding: 0; } li{ float: left; padding: 1em; list-style-type: none; } img{ display: block; clear: both; } //首先封装一个函数, 参数whicpic代表一个元素的节点，即指向某个图片的a元素 function showPic(whichpic){ //获取某个图片的href属性 var source = whichpic.getAttribute("href"); //获取占位符图片的节点 var placeholder = document.getElementById("placeholder"); //使用setAttribute对placeholder元素的src属性进行刷新 placeholder.setAttribute("src" , source); //one more thing:在前换图片的时候，将占位符图片下面的文字内容切换为对应图片的title //首先获取图片对应的title属性 var text = whichpic.getAttribute("title"); //获取图片描述的节点 var description = document.getElementById("description"); //实现文本的切换 //首先要获取到description中的文本，需要先获取这个文本节点再获取这个文本节点的值,并把text的值赋值给它 description.firstChild.nodeValue = text; //也可以用firstchild：description.firstChild.nodeValue }1.首先获取图片的href属性：
whichpic.getAttribute("href")3.然后设置占位符图片的 src属性:
placeholder.setAttribute("src" , source)标签的 nodeValue
var text = whichpic.getAttribute("title")
var description = document.getElementById("description")
description.firstChild.nodeValue = text
其中可以通过childNode获取节点的所有子节点，并且用nodeType属性进行判断：1代表元素节点、2代表属性节点、3代表文本节点，因为本例
标签只有一个子节点，所以可以用fistChild，或者childNode[0]来获取，获取节点后再用nodeValue获取节点的属性值。
这只是初级的一个例子，所以函数处理事件嵌套在 HTML代码中，并且为了阻止点击链接的默认行为（跳转到一个新的页面），后面还要返回给它一个 false。
点击事件绑定在HTML代码中，很笨重，下一篇中将做升级。
example 电影天堂
选择一张图片
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
