知識點(diǎn)
- 獲取節(jié)點(diǎn)
# 單個
gallery = document.getElementById('gallery');
# 數(shù)組
li_list = document.getElementsByTagname('li');
- 獲取屬性
<a href="static/images/fireworks.jpg" title="A fireworks display">Fireworks</a>
# 獲取
a_element = document.getElementsByTagName(a)[0];
a_href = a_element.getAttribute('href');
完整代碼
html文檔
imagegallery.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Image Gallery</title>
</head>
<link rel="stylesheet" type="text/css" href="static/css/layout.css" media="screen">
<body>
<h1>Snapshots</h1>
<!-- <a onclick="return false;">點(diǎn)擊下</a> -->
<div>
<ul id="imagegallery">
<li>
<a href="static/images/fireworks.jpg" title="A fireworks display">Fireworks</a>
</li>
<li>
<a href="static/images/coffee.jpg" title="A cup of black coffee">Coffee</a>
</li>
<li>
<a href="static/images/rose.jpg" title="A red, red rose">Rose</a>
</li>
<li>
<a href="static/images/bigben.jpg" title="The famous clock">Big Ben</a>
</li>
</ul>
</div>
<script type="text/javascript" src="static/js/showPic.js"></script>
<!-- <script type="text/javascript" src="static/js/showPic_copy.js"></script> -->
<!-- <script type="text/javascript">
function showPic(whichpic) {
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
}
</script> -->
</body>
</html>
css部分
layout.css
*{
margin:0;
padding:0;
}
body{
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1{
color: #333;
background-color: transparent;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
/*如何讓ul里面的li橫向排列燕差，并且居中呢？ul設(shè)置為text-align：center；li設(shè)置-display-inline即可*/
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
/*#imagegallery{
list-style: none;
}
#imagegallery li{
display: inline;
}
#imagegallery li a img{
border: 0;
}*/
js部分
showPic.js
function showPic(whichpic) {
if (!document.getElementById('placeholder')){
return true;
}
if (!document.getElementById('description')){
return false;
}
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
if (whichpic.getAttribute('title')){
var text = whichpic.getAttribute("title");
}
else{
var text = "";
}
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3){
// alert(description.firstChild.nodeValue);
description.firstChild.nodeValue = text;
// alert(description.firstChild.nodeValue);
}
return false;
}
function prepareGallery() {
if(!document.getElementById){
return false;
}
if(!document.getElementsByTagName){
return false;
}
if(!document.getElementById("imagegallery")){
return false;
}
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
links[i].onclick = function() {
return showPic(this);
// return showPic(this);
}
}
}
// <img id="placeholder" src="static/images/index.jpg" alt="my image gallery" />
// <p id="description"> choose a picture</p>
/*
1. 創(chuàng)建一個元素節(jié)點(diǎn)
document.creatElement(nodeName)
2. 元素節(jié)點(diǎn)插入到文檔樹中
parent.appendChild(nodeName)
3. 創(chuàng)建一個文本節(jié)點(diǎn)
document.createTextNode(text)
4. 文本節(jié)點(diǎn)插入到文檔樹中
parent = document.getElementById(parent)
parent.appendChild(nodeName)
5. 將一個元素節(jié)點(diǎn)插入到一已知節(jié)點(diǎn)前
parentElement = targetElement.parentNode
parentElement.insertBerfore(newElement, targetElement)
6. 目標(biāo)元素節(jié)點(diǎn)的后一個元素節(jié)點(diǎn)
next_brother_node = target.nextSibling
*/
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode; // 獲取targetElement的父元素節(jié)點(diǎn) parent
if(parent.lastChild == targetElement){ // 判定 parent節(jié)點(diǎn)的最后一個節(jié)點(diǎn)是不是target節(jié)點(diǎn)
parent.appendChild(newElement);
}
else{
parent.insertBefore(newElement, targetElement.nextSibling); //
}
}
function preparePlaceholder() {
if(!document.createElement){
return false;
}
if(!document.createTextNode){
return false;
}
if(!document.getElementById){
return false;
}
if(!document.getElementsByTagName){
return false;
}
var placeholder = document.createElement('img'); // 創(chuàng)建了一個img元素節(jié)點(diǎn)
placeholder.setAttribute('id', 'placeholder');
placeholder.setAttribute('src', 'static/images/index.jpg');
placeholder.setAttribute('alt', 'my image gallery');
var description = document.createElement('p');
description.setAttribute('id', 'description');
var desctext = document.createTextNode('choose an image'); // 創(chuàng)建了一個文本節(jié)點(diǎn)
description.appendChild(desctext);
var gallery = document.getElementById('imagegallery');
insertAfter(placeholder, gallery);
insertAfter(description, placeholder);
}
/*
這里學(xué)習(xí)的是
1. 獲取元素節(jié)點(diǎn) element.childNodes # 這里就是elemennt所有的節(jié)點(diǎn)都獲取到，不過這里獲取到是一個數(shù)組
2. 掌握節(jié)點(diǎn)的類型
2.1 node.nodeType
nodeType=1 : 元素節(jié)點(diǎn)
nodeType=2 : 屬性節(jié)點(diǎn)
nodeType=3 : 文本節(jié)點(diǎn)
2.2 node.nodeValue # 獲取node節(jié)點(diǎn)的值
2.3 針對 element.childNodes獲取到是一個數(shù)組，那么每次使用的使用都要使用索引來對每一個元素進(jìn)行使用
element.childNodes[0] <=> element.firstChild
element.childNodes[length-1] <=> element.lastChild
********************************************
description = document.getElementById("description"); # 獲取到一個元素節(jié)點(diǎn)
description.childNodes[0].nodeValue <=> description.firstChild.nodeValue = text; # 將description中的第一個節(jié)點(diǎn)屬性值賦值為 text變量
********************************************
*/
function countBodyChildren() {
var body_element = document.getElementsByTagName("body")[0]; // 獲取body元素[0] 的所有節(jié)點(diǎn)
var gallery = document.getElementById("imagegallery");
alert(body_element.childNodes.length); // 獲取節(jié)點(diǎn)的長度
// for (var i = 0; i < body_element.length; i++) {
// alert(i.nodeType)
}
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}
else{
window.onload = function(){
oldonload();
func();
}
}
}
// addLoadEvent(countBodyChildren);
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
// window.onload = countBodyChildren;
