Client-side Javascript的主要目的是脚本化web page内容, 把静态的HTML转换成交互式的web应用程序. Scripting Document的主要内容:

  • DOM的基本架构;

  • 怎样从Document query和select元素(Element);

  • 怎样遍历(Traverse)Document, 怎么查找任何一个document元素的祖先(ancestors),兄弟(siblings),子孙(descendant);

  • 怎样query和set document元素的属性;

  • 怎样query,set和modify document的内容;

  • 怎样通过creating,inserting和deleting节点(node)来改变document的结构;

  • HTML form怎样工作;

  1. DOM概要

    DOM是表示和操作HTML和XML的基本API, HTML和XML文档的嵌套元素用DOM表示成对像树，HTML文档(document)包含表示HTML标签(tag)和元素(element)的节点(node)和表示文本字符串的节点(node), HTML document也包含表示声明(comments)的节点.

    
  
    Sample Document
  
  
    
    An HTML Document
    
    
    This is a simple document.

    Scripting Document 笔记(1)_第1张图片

从上图树的根是Document Node，表示整个文档; 表示HTML元素的节点是HTML Node; 表示文本的是Text Node, Document, Element和Text是Node的子类.

Scripting Document 笔记(1)_第2张图片



从上面的类层次图，需要注意的是Document和Element,HTMLDocument和HTMLElement之间是有区别的, Document要么表示HTML文档, 要么表示XML文档, 而Element则表示Document的元素. HTMLDocument和HTMLElement都是Document和Element的子类.

2. 查找Document元素

Client-side Javascript程序从某种程度来说就是操作一个或多个元素, 当程序启动后，使用全局变量document引用文档对象. 为了操作文档元素, 需要查找要操作的元素, DOM定义如下方法来查找元素:

  • 使用指定的属性id;

  • 使用指定的属性name;

  • 使用指定的标签name;

  • 使用指定的CSS class;

  • 匹配指定的CSS选择器;

2.1 通过属性ID查找元素

 任何HTML元素都有一个在整个文档唯一的id属性, 因此可以通过使用文档对象的getElementById()来查找元素. getElementById()方法只能查找一个元素，如果需要查找多个元素，可以使用如下的方法:

function getElements(/*ids...*/) {
    var elements = {};
    for(var i = 0; i < arguments.length; i++) {
        var id = arguments[i];
        var elt = document.getElementById(id);
        if (elt == null)
            throw new Error("No element with id: " + id);
        elements[id] = elt;
    }
    return elements;
}

2.2 通过属性Name查找元素

 HTML name属性最初是为了给form元素设定name, 而且name属性只有在form数据在提交给server时才被使用, 需要注意的是name属性值是不唯一的，比如在form中的radio按钮和checkboxes. 还有name属性只有在少部分元素上是合法的, 比如form,