js图片库（js dom 编程艺术第四章）

最新推荐文章于 2023-11-27 07:00:00 发布

ziyun0923

最新推荐文章于 2023-11-27 07:00:00 发布

阅读量777

点赞数

本文链接：https://blog.csdn.net/ziyun0923/article/details/52504514

版权

4.1标记

4.2javascript

4.3应用这个javascript函数：onclick

标记文档如下：

<body>
  <h1>Snapshots</h1>
  <ul>
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display" οnclick="showPic(this); return false;">Fireworks</a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee" οnclick="showPic(this); return false;">Coffee</a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose" οnclick="showPic(this); return false;">Rose</a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock" οnclick="showPic(this); return false;">Big Ben</a>
    </li>
  </ul>
  <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
</body>

.js函数代码

<script>
function showPic(whichpic) {
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);//等同于 placeholder.setAttribute=source
}
</script>

4.4对这个函数进行扩展

4.4.1childNodes属性

在一棵节点树上childNodes属性可以用来获取任何一个元素的所有子元素。

语法：element.childNodes

function countbodychildren(){
	var body_children=document.getElementsByTagName("body")[0];//[0]不可以漏
	alert(body_children.childNodes.length);
}
window.οnlοad=countbodychildren;

4.4.2nodeType属性

元素节点的nodeType属性值是1；

属性节点的nodeType属性值是2；

文本节点的nodeType属性值是3；

例

alert(body_children.nodeType);

结果：1

4.4.3在标记里增加一段描述

nodeValue属性：得到（和设置）一个节点的值；

function showpic(whichpic){
		var aaaa=whichpic.getAttribute("href");
		var iiii=document.getElementById("placeholder");
		iiii.setAttribute("src",aaaa);
		var text=whichpic.getAttribute("title");
		var description=document.getElementById("description");
		description.firstChild.nodeValue=text;
		//把description对象的第一个子节点的nodeValue属性值设置为变了text的值
		// childNodes[0]可写成firstChild;childNodes.length-1可写成lastChild
		}

ziyun0923

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js图片库（js dom 编程艺术第四章）

4.1标记4.2javascript4.3应用这个javascript函数：onclick标记文档如下： Snapshots Fireworks Coffee Rose Big Ben .js函数代码function
复制链接

扫一扫