//知识点概览:
//parentNode属性、lastChild属性、appendChild方法、insertBefore方法、nextSiling属性
//
//自编写的insertAfter函数:在现有元素后插入一个新元素
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
//在已有元素前插入一个新元素:parentElement.insertBefore(newElement,targetElement)
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function preparePlaceholder() {
if (!document.createElement) return false;
if (!document.createTextNode) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","images/placeholder.gif");
placeholder.setAttribute("alt","my image gallery");
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("Choose an image");
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
insertAfter(placeholder,gallery);
insertAfter(description,placeholder);
}
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) 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);
}
links[i].onkeypress = links[i].onclick;
}
}
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
//把那些在页面加载完毕执行时,执行的函数创建为一个队列
//例:addLoadEvent(firstFunction);addLoadEvent(secondFunction)
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {WW
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
//页面加载的时候执行这个函数
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
JS编程艺术笔记(3)-动态创建标记
最新推荐文章于 2024-03-31 22:40:13 发布