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文档中的<p>和<img> 元素仅仅依赖于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标记文档:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<title>Image Gallery</title>
<link rel = "stylesheet" href = "div.css" media = "screen"/>
</head>
<body>
<h1>Image Gallery</h1>
<p>There are three images in total.</p>
<ol id = "linklist">
<li>
<a href = "1.jpg">1.jpg</a>
</li>
<li>
<a href = "2.jpg">2.jpg</a>
</li>
<li>
<a href = "3.jpg">3.jpg</a>
</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;
}