javascript 图片库（javascript Dom）

最新推荐文章于 2022-06-26 21:17:05 发布

dream_hai

最新推荐文章于 2022-06-26 21:17:05 发布

阅读量935

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/dream_hai/article/details/52143539

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

把超链接的onclick函数返回值为false，可以防止用户被带到目标链接窗口。

1、index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>javascript 图片库</title>
</head>
<script type="text/javascript" src="script/show.js"></script>
<body>
<h1>javascript 图片库</h1>
<ul>
	<li>
		<a href="image/image (1).jpg" title="A fireworks dispaly" οnclick="show(this); return false;">fireworks</a>
	</li>
	<li>
		<a href="image/image (2).jpg" title="A cup of black coffee" οnclick="show(this); return false;" >Coffee</a>
	</li>
	<li>
		<a href="image/image (3).jpg" title="A red rose" οnclick="show(this); return false;">Rose</a>
	</li>
	<li>
		<a href="image/image (4).jpg" title="The Famous clock" οnclick="show(this); return false;">clock</a>
	</li>
</ul>
<img id="placeholder" src="image/placeholder.jpg" alt="我的图片库" />
</body>
</html>

当点击链接时，因为onclick事件处理函数所触发的 JavaScript 代码返回的值是ture，onclick事件函数就认为这个链接被点击了，反之，如果返回值是false，onclick事件函数就认为这个链接没有被点击。所以在 javascript代码里增加一条return false；语句，就可以防止用户被带到目标链接窗口。

function show(whichpic){
	var source = whichpic.getAttribute("href");
	var place = document.getElementById("placeholder");
	place.setAttribute("src",source);
}

childNodes属性

window.onload = conutBodyChlidren;
function conutBodyChlidren(){
	var body_element = document.getElementsByTagName('body')[0];
	alert(body_element.childNodes.length);
	alert(body_element.nodeType);
}

根据html文件结构，body元素应该只有3个子元素，一个h1元素，一个ul元素，一个img元素，可是该函数返回的数字远远大于此，是因为文档树的节点类型并非只有元素节点一种。事实上，文档里几乎每一样东西都是节点，甚至连空格和换行符都会被解释为节点，而它们也全都包含在childNodes属性所返回的数组中。

nodeType可以获得节点的属性

nodeType属性总共有12种可取值，但其中仅有3种具有实用价值。

1、元素节点的nodeType属性值是1.

2、属性节点的nodeType属性值是2.

3、文本节点的nodeType属性值是3.

var description = document.getElementById("description");
	
	//alert(description.childNodes.length);
	//description.childNodes[0].nodeValue = text;
	description.firstChild.nodeValue = text;
	//description.lastChild.nodeValue = text;