JavaScript DOM 编程艺术学习笔记（一）：静态标记

最新推荐文章于 2024-05-03 11:47:20 发布

Vigal

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量918

点赞数 1

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

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

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScriptDOM编程艺术

学习笔记（一）：静态标记

DOM

DOM脚本程序设计：涵盖了使用任何一种支持DOM API的程序设计语言去处理任何一种标记文档的情况。
DOM是程序设计语言和标记文档之间的接口，它将文档表示成一棵节点树，每个节点都对应文档中的一个元素，以供程序设计语言处理。

网页的三个层次

结构层：HTML/XHTML-搭建文档结构
表示层：CSS-设置文档呈现效果
行为层：JavaScript/DOM-实现文档行为

对象

用户定义对象
内建对象：JavaScript语言里面的对象，如Array、Math、Date等。
宿主对象：浏览器提供的对象，如Window、Document等。

节点

元素节点：DOM树的骨架，每一个HTML标签都是一个元素节点。
文本节点：元素节点里面包含的文本内容。
属性节点：元素节点的属性单独看成一种节点，如：id、class属性。

注：一份文档中，每一个节点都是一个对象

DOM访问

1. 元素节点：

  element.getElementById("*id*")
  element.getElementByTagName("*tag_name*")
  element.getElementByClassName("*class_name*")

例1：document.getElementById(id), 在全文档搜索并返回ID值为id的元素；

例2：Jone.getElementByTagName(“chage”), 在Jone元素的子节点中，搜索元素title名字为”change”的元素，并返回一个数组。

2.属性节点：

element.getAttribute(attribute) 
element.setAttribute(attribute, value)

setAttribute函数中的attribute属性如果原element不存在，则首先创建该属性，再设置其中的值。

3. 文本节点：

node.nodeValue

注意：这里的node一定要是文本节点，它一般是一个元素几点的子节点。节点类型可以用node.nodeType来确定。元素节点值为1，属性节点值为2，文本节点值为3.

4. 子节点：

element.childNodes:返回全部子元素的数组
node.firstChild = node.childNodes[0]
node.lastChild = node.childNodes[node.childNoes.length - 1]

JavaScript设计原则

1. 平稳退化

考虑到浏览器不能加载JS的情况（如现阶段大多数的搜索引擎），用户仍能正常访问资源，只是损失了用户体验。

2. 渐进增强

从核心内容开始构建，然后逐渐加强内容。不应该用DOM技术或CSS来向网页上添加重要的内容。否则很难实现平稳退化。
例子：hijax

3. 结构与代码分离

标记文档中不要出现JS代码。使用class名，建立标记文档和JS脚本文件的桥梁，使JS和标记文档分离。

4. 兼容

考虑到不同版本的浏览器对JS的支持不同，使用DOM函数之前要进行对象检测。

5. 性能

DOM函数的本质是搜索。因此减少整个树的规模（减少标记），同时减少搜索次数（减少函数调用次数）会提升代码性能。

图片库代码实例

1.目标：

创建一个包含三个图片的图片库。

2. 文件路径：

.\images\Vigal.jpg（原图片）; .\images\small_Vigal.jpg （缩略图）
.\images\Meng.jpg（原图片）; .\images\small_Meng.jpg（缩略图）
.\images\Comic.jpg（原图片）; .\images\small_Comic.jpg（缩略图）
.\images\grey.jpg（默认图片）
.\script\myjs.js(JS脚本）
.\css\mycss.css
.\image gallery.html（HTML文档）

3. 代码：

HTML文档：

<!DOCTYPE html>
<html>
    <head>
        <title>Image Gallery</title>
        <link rel="stylesheet" type = "text/css" href = "css/mycss.css" />
    </head>
    <body>
        <h1>Snapshots</h1>
        <ul id = "imagegallery">
            <li>
                <a href = "images/Vigal.jpg" title = "Vigal" onclick = "showPic(this); return false;">
                    <img src = "images/small_Vigal.jpg" alt = "Vigal" />
                </a>
            </li>
            <li>
                <a href = "images/Comic.jpg" title = "Comic" >
                    <img src = "images/small_Comic.jpg" alt = "Comic" />
                </a>
            </li>
            <li>
                <a href = "images/Meng.jpg" title = "Meng" >
                    <img src = "images/small_Meng.jpg" alt = "Meng" />
                </a>
            </li>
        <img id = "Image" src = "images/gray.jpg" alt="gray" />
        <p id = "description">Choose a image</p>    

        <script src = "script/myjs.js"></script>
    </body>
</html>

JS脚本：

addLoadEvent(prepareGallery);  //文档加载完自动调用

function prepareGallery(){
    if(!document.getElementById) return false;  // 对象检测
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById("imagegallery")) return false;      // 兼容，即使后期删除文件JS也不会出错

    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");
    for(var idx = 0; idx < links.length; idx++){
        links[idx].onclick = function() {
            return !showPic(this);  // this是与onclick 方法相关联的元素
        } 
    }
}

function showPic(whichpic){
    if(!document.getElementById("Image")) return false;     
    var source = whichpic.getAttribute("href");
    var img = document.getElementById("Image");
    img.setAttribute("src", whichpic);
    if(document.getElementById("description")){
        var text = whichpic.getAttribute("title");
        var description = document.getElementById("description");
        description.firstChild.nodeValue = text;
    }
    return true;
}

//函数加载函数
funtion addLoadEvent(func){
    var oldonload = window.onload();
    if(typeof window.onload != "function"){
        window.onload = func;
    }else{
        window.onload = function{
            oldonload();
            func();
        }
    }
}