javascript+dom 做javascript圖片庫

標籤：

廢話不多說 直接貼代碼   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JAVASCRPIT圖片的處理</title>
<script type="text/javascript">
function showpic(whichpic){
var source = whichpic.getAttribute("href");
var last = document.getElementById("last");
last.setAttribute("src", source);

var text=whichpic.getAttribute("title");
var decoration=document.getElementById("decoration");
decoration.firstChild.nodeValue=text;

}
</script>
<style type="text/css">
body{margin: 0px; padding: 0px; }
a{text-decoration: none;}
li{list-style-type: none;}
.man{}
.man ul{}
.man ul li{float: left; margin-bottom: 50px;}
.man ul li a{ padding: 0 50px};
.man img{display: block; }
p{font-size: 2em;}
</style>
</head>
<body>
<div class="man">
<h1>javascript圖片</h1>
<ul>
<li><a href="images/2.jpg" title="1" onclick="showpic(this); return false;">1</a></li>
<li><a href="images/3.jpg" title="2" onclick="showpic(this); return false;">2</a></li>
<li><a href="images/4.jpg" title="3" onclick="showpic(this); return false;">3</a></li>
<li><a href="images/6.jpg" title="4" onclick="showpic(this); return false;">4</a></li>
</ul>
<div style="clear:both"></div>
<img id="last" src="images/1.gif" title="5" >
<p id="decoration">目前這個值是5</p>
</div>

</body>
</html>

 

 

思路問題：1：建立一個javascript程式 ，通過getAttribute屬性擷取圖片的路徑（href）屬性值

             通過document.getElementById   預留位置 圖片的ID，然後根據擷取到得找個ID，通過setAttribute的屬性來修改預留位置圖片的位置，從而達到修改圖片的目的。就是把li a  標籤裡面的地址傳給預留位置  src屬性。 從而達到效果

2： 要想修改佔位圖片下面的P標籤裡面的文本值。首先  也是通過 getAttribute來  擷取 li a  屬性裡面的title  的值，然後根據  document.getElementById的 方式來擷取p 標籤的ID值，然後  根據 擷取到得P標籤的ID值   使用 firstChild.nodeValue的方式  把li  a 的值  付給P標籤的ID  從而達到目的

 

需要注意的屬性就是：

getAttribute：我們就可以利用getAttribute()方法把它的各種屬性的值查詢出來。getAttribute()方法不能通過document對象調用，這與我們此前介紹過的其他方法不同。我們只能通過一個元素節點對象調用它。

setAttribute:setAttribute()方法與它們有一個本質上的區別：它允許我們對屬性節點的值做出修改。類似於getAttribute()方法，setAttribute()方法也是一個只能通過元素節點對象調用的函數，但setAttribute()方法需要我們向它傳遞兩個參數：

firstChild.nodeValue:

假設我們已經有一個dom對象，其內容如
內容

在javascript中，我們為了獲得title的標籤和文本，一般需要這樣做
var title =dom.getElementsByTagName(”title”);
alert(title[0].nodeName);//得到“title”
alert(title[0].nodeValue)的時候，FF只能獲得#text，而IE只能得到null
後來查了很多資料，object text類型或者object element，本身也是一個結點
上例中“標題”不是一個簡單的常值內容，而是一個文本結點
它也有自己的nodeName，只是不該也不會用到
所以應該寫成：
alert(title[0].firstChild.nodeValue);//得到“標題”

另一方面，反過來想，產生一個文本的時候，也是用create_text_node方法
還使用了append_child把它添加在一個父結點下
說明它其實是一個結點，需要多使用一次firstChild 

 

javascript+dom 做javascript圖片庫