JavaScript DOM编程艺术学习笔记（二）：动态标记
JavaScript DOM编程艺术学习笔记（二）：动态标记
动态标记与静态标记
静态标记：如setAttribute，没有改变文档的物理内容，只是浏览器呈现时发生改变。
动态标记：改变文档物理内容，改变DOM节点树。
元素访问
方法：
element.getElementById(id);
element.getElementByTagName(tag_name);
element.getAttribute(attribute);
element.setAttribute(attribute, value);
element.nodeValue;
属性：
parent.childNodes // 返回全部子元素的数组
parent.firstChild
parent.lastChild
child.previousSibling
child.nextSibling
child.parentNode
创建元素
document.createElement(nodeName) // 创建元素节点
document.createTextNode(text) // 创建文本节点
插入到DOM树中
parent.appendChild(child) //在最后添加子元素
parent.insertBefore(newElement, targetElement)
自定义函数：insertAfter(newElement, targetElement)
Ajax 初步
- 以上动态标记方法，是在页面初始化时，已经完成创建。在交互的过程中利用JS重新排列。
- 如果想要得到原来并不存在于初始页面的数据（如从远程服务器请求数据），则需要使用Ajax技术。
- 创建对象：
var request = new XMLHttpRequest();
if(request){
request.open("GET", link, true);
request.onreadystatechange = function() {
if(request.readyState == 4){
var txt = document.createTextNode(request.responseText);
...
}
};
request.send(null);
}else{
alert("error");
}
项目一：图片库改进实例
改进之处：
原HTML文档中的
和 元素仅仅依赖于showPic函数，因此应该在加载showPic函数时自动添加这两个元素。
注意：
- 当使用一个元素的时候，检察是否存在，数组长度是否为零。
- 当使DOM函数的时候，检察兼容性。
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.inserBefore(newElement,targetElement.nextSibling)
}
}
function preparePlaceholder(){
var placeholder = document.createElement("img");
var description = document.createElement("p");
var text = document.createTextNode("Choose an image");
var gallery = document.getElementById("imagegallery");
placeholder.setAttribute("id", "Image");
placeholder.setAttribute("src", "images/gray.jpg");
placeholder.setAttribute("alt", "gray");
insterAfter(placeholder, gallery);
description.setAttribute("id", "description");
description.appendChild(text);
insertAfter(description, placeholder);
}
function prepareGaller(){}
function showPic(whichpic){...}
function addLoadEvent(func){...}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);项目二：图片库动态效果
- 时间触发器：
var event = setTimeout(“function”, interval);
触发器清除：
cleartTimeout(event); - 元素位置属性：
var x_pos = element.style.left;
var y_pos = element.style.top; - 编程思想：
- 函数抽象，封装：moveElement（”elemID”, x_pos, y_pos, interval)
- 时间冲突检测。
- 标记文档中，只应用于JS的部分，应该由JS代码生成。符合平稳退化原则。
- 代码实现：
(1)HTML标记文档：
<html lang = "en">
<head>
<meta charset = "utf-8" />
<title>Image Gallerytitle>
<link rel = "stylesheet" href = "div.css" media = "screen"/>
head>
<body>
<h1>Image Galleryh1>
<p>There are three images in total.p>
<ol id = "linklist">
<li>
<a href = "1.jpg">1.jpga>
li>
<li>
<a href = "2.jpg">2.jpga>
li>
<li>
<a href = "3.jpg">3.jpga>
li>
ol>
<script src = "Auto.js">script>
body>
html>（2）JS文档：
function initHTML(){
var div = document.createElement("div"); // 创建图片窗口
var img = document.createElement("img"); // 创建默认图片
div.setAttribute("id", "slideshow");
img.setAttribute("src", "123.jpg");
img.setAttribute("id", "preview");
div.appendChild(img);
document.body.appendChild(div);
}
function mouseOver(){
var list = document.getElementById("linklist");
var links = list.getElementsByTagName("a");
links[0].onmouseover = function(){
moveElement("preview", -200,0,30); // 每张图片的大小是200px*200px
}
links[1].onmouseover = function(){
moveElement("preview", -400, 0, 30);
}
links[2].onmouseover = function(){
moveElement("preview", -600, 0, 30);
}
}
function moveElement(elementID, final_x, final_y, interval){
var element = document.getElementById(elementID);
if(!element.style.left){ // 访问前检测是否存在，同时初始化
element.style.left = "0px"; // 0px是图片在div窗口的绝对位置
}
if(!element.style.top){
element.style.top = "0px";
}
var xpos = parseInt(element.style.left);
var ypos = parseInt(element.style.top);
var dist = 0;
if(element.moment){
clearTimeout(element.moment); // 清除上一次的事件，防止事件冲突。
}
if(xpos > final_x){
dist = Math.ceil((xpos - final_x) / 10); // 加速滑动效果
xpos = xpos - dist;
}
if(xpos < final_x){
dist = Math.ceil((final_x - xpos) / 10);
xpos = xpos + dist;
}
if(ypos > final_y){
dist = Math.ceil((ypos - final_y) / 10);
ypos = ypos - dist;
}
if(ypos < final_y){
dist = Math.ceil((final_y - ypos) / 10);
ypos = ypos + dist;
}
element.style.left = xpos + "px";
element.style.top = ypos + "px";
var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
element.moment = setTimeout(repeat,interval); // setTimeout的第一个参数类型是字符串
}
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(initHTML);
addLoadEvent(mouseOver);
(3)css文档
#slideshow{
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
#preview{
position: absolute;
}