看《Javascript+DOM编程艺术》的第一篇_javascript+dom+编程艺术

578

收藏 2018-10-22

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript Gallery</title>

</head>
<body>
<ul>

<li><a href="img/GUG.jpg" title="g">GUG</a></li>
<li><a href="img/rgt.jpg" title="r">RGT</a></li>
<li><a href="img/YHY.jpg" title="y">YHY</a></li>
<li><a href="img/ZGL.jpg" title="z">ZGL</a></li>

<img id="placeholder" src="img/123.jpg" alt="my gallery" width="400px" height="300px"/>
</ul>
</body>
</html>

function showpic(whichpic){
var source=whichpic.getAttribute("href");
//对src进行刷新，将它保存到source
//alert(source)
var placeholder = document.getElementById("placeholder");
//alert(placeholder)
placeholder.setAttribute("src",source);
}
childnodes:返回一个数组，数组包含给定元素节点的全体元素：element.childnodes.

nodeType:区分文档里的个个节点。node.nodeType

function showpic(whichpic){
var source=whichpic.getAttribute("href");
//对src进行刷新，将它保存到source
//alert(source)
var placeholder = document.getElementById("placeholder");
//alert(placeholder)
placeholder.setAttribute("src",source);

//title属性值将被提取并保存到text中
var text=whichpic.getAttribute("title");
//找到id=“description”的<p>元素，并把这个对象保存到变量description去
var description = document.getElementById("description");
//alert(description.childNodes[0].nodeValue);
//将description对象的第一个子节点的nodeValue属性值设置为变量text的值
description.firstChild.nodeValue = text;

}
function countBodyChildren(){
var body_element = document.getElementsByTagName("body")[0];
//输出body元素的子元素的总数
alert(body_element.childNodes.length);
//页面加载是调用countBodyChildren
window.onload=countBodyChildren;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript Gallery</title>

<style>
ul li{
margin-left: auto;
list-style: none;
}
</style>


      <script type="text/javascript" src="script/showpic.js">
/*function showpic(whichpic){
var source=getAttribute("href");
//对src进行刷新，将它保存到source
alert(source)
var placeholder = document.getElementById("placeholder");
alert(placeholder)
placeholder.setAttribute("src";source);
}*/
</script>
</head>
<body>
<ul>


<li><a href="img/GUG.jpg" title="g">GUG</a></li>
<li><a href="img/rgt.jpg" title="r">RGT</a></li>
<li><a href="img/YHY.jpg" title="y">YHY</a></li>
<li><a href="img/ZGL.jpg" title="z">ZGL</a></li>

<p id="description">Please,choose an images.</p>

<img id="placeholder" src="img/123.jpg" alt="my gallery" width="400px" height="300px"/>
</ul>
</body>
</html>

扫码加我拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

扫码加我 拉你入群

分享

扫码加好友，拉您进群

扫码加我拉你入群