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

最新推荐文章于 2022-01-07 13:42:08 发布

Vigal

最新推荐文章于 2022-01-07 13:42:08 发布

阅读量786

点赞数

分类专栏： JavaScript 文章标签： javascript dom html

本文链接：https://blog.csdn.net/CsWangtian/article/details/47998969

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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;
}

Vigal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM编程艺术学习笔记（二）：动态标记

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

扫一扫

专栏目录