您的位置：首页 > Web前端 > JavaScript

JavaScript DOM编程艺术学习笔记（二）：动态标记

2015-08-26 09:53 549 查看

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&l
4000
t;/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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript dom html
相关文章推荐
新的分享
章节导航