Javascript Document编程

Scripting Documents
Document编程

引用

document.write() inserts text into an HTML document at the location of the <script> tag that contains the invocation of the method.

write()方法在代码所在处插入文档内容

注意在完成文档修改后要调用close()方法

Document Properties

Document的常见属性
bgColor
cookie
domain
lastModifed
location
referrer
title
URL
anchors[], created with an <a> tag that has a name attribute instead of an href attribute.)
applets[]
forms[]
images[]
links[], An array of Link objects that represent the hypertext links in the document.

引用

The href property of a Link object corresponds to the href attribute of the <a> tag: it holds the URL of the link. Link objects also make the various components of a URL available through properties such as protocol, hostname, and pathname.

links数组包含的是有href属性的真正的超链接，anchors数组包含的是有name属性的锚点

引用

Accessible by name property

document.forms[0]     // Refer to the form by position within the document
document.forms.f1     // Refer to the form by name as a property
document.forms["f1"]  // Refer to the form by name as an array index

document.f1


If a <form> and <img> tag both have the name "n", for example, the document.n property becomes an array that holds references to both elements.

如果documeng下面的元素有相同的name属性，那么document.n得到的是一个包含所有name属性等于“n”的元素数组

引用

Document objects accessed through collections such as document.links have properties that correspond to the attributes of the HTML tag.

Remember that HTML is not case-sensitive, and attributes can be written in uppercase, lowercase, or mixed case. In JavaScript, all event handler properties must be written in lowercase.

Document的下面的元素数组有相应的HTML标签下的属性。HTML是大小写不敏感，而JS是大小写敏感的。


Nodes
节点

引用

The childNodes property of a Node object returns a list of children of the node, and the firstChild, lastChild, nextSibling, previousSibling, and parentNode properties provide a way to traverse the tree of nodes.

Methods such as appendChild(), removeChild(), replaceChild(), and insertBefore() enable you to add and remove nodes from the document tree.

Every Node object has a nodeType property that specifies what kind of node it is.

节点的childNodes属性包含了它所有子节点。
节点其他属性，firstChild, lastChild, nextSibling, previousSibling, parentNode等属性都是方便节点便利的。


Attributes
属性

引用

The attributes of an element (such as the src and width attributes of an <img> tag) may be queried, set, and deleted using the getAttribute(), setAttribute(), and removeAttribute() methods of the Element interface.

HTMLDocument is an HTML-specific subinterface of Document and HTMLElement is an HTML-specific subinterface of Element. Furthermore, the DOM defines tag-specific interfaces for many HTML elements.

The HTMLElement interface defines id, style, title, lang, dir, and className properties.

Some HTML tags, listed in Table 15-2, accept no attributes other than these six and so are fully represented by the HTMLElement interface. All other HTML tags have corresponding interfaces defined by the HTML portion of the DOM specification.

When an HTML attribute name conflicts with a JavaScript keyword, it is prefixed with the string "html" to avoid the conflict. Thus, the for attribute of the <label> tag translates to the htmlFor property of the HTMLLabelElement.

Element接口是提供了getAttribute()、setAttribute()、removeAttribute()方法读取、设置、删除元素的属性的。
HTMLDocument、HTMLElement都是对HTML特定的接口。DOM也定义了一些HTML特定元素的接口。

HTMLElement定义id、style、title、lang、dir、className等通用属性。Tabel 15-2中列出来的一些只接受这六个属性的HTML标签。其他的HTML标签所对应的接口都有一些特定属性。

通常，对应接口的名字都会加上HTML，例如label的对性接口就是HTMLLabelElement


DOM Conformance

引用

One source for conformance information is the implementation itself. In a conformant implementation, the implementation property of the Document object refers to a DOMImplementation object that defines a method named hasFeature().

For example, to determine whether the DOM implementation in a web browser supports the basic DOM Level 1 interfaces for working with HTML documents

document的implemention对象有一个hasFeature()方法，可以帮助确定DOM的实现情况，例如检查DOM 1的HTML部分：

if (document.implementation &&
    document.implementation.hasFeature &&
    document.implementation.hasFeature("html", "1.0")) {
    // The browser claims to support Level 1 Core and HTML interfaces
}

引用

In Internet Explorer 6, hasFeature() returns true only for the feature HTML and version 1.0. It does not report compliance to any of the other features listed in Table 15-3 (although, as shown in Chapter 16, it supports the most common uses of the CSS2 module).

IE 5 and later support the Level 1 Core and HTML features , the key Level 2 CSS features
Unfortunately, IE 5, 5.5, and 6 do not support the DOM Level 2 Events module

Although IE 6 claims (through its hasFeature() method) to support the Core and HTML interfaces of the DOM Level 1 standard, this support is actually incomplete.

IE does not support the node-type constants defined by the Node interface.

IE6不支持检查除了HTML部分的其他模块。IE5之后的版本都支持Level 1 Core和HTML特性，Level 2中的关键CSS特性，不支持Level 2的事件模块。IE也不支持Node中的nodeType的常量。你必须自己定义。

if (n.nodeType == 1 /*Node.ELEMENT_NODE*/)  // Check if n is an Element
 
if (!window.Node) {
    var Node = {            // If there is no Node object, define one
        ELEMENT_NODE: 1,    // with the following properties and values.
        ATTRIBUTE_NODE: 2,  // Note that these are HTML node types only.
        TEXT_NODE: 3,       // For XML-specific nodes, you need to add
        COMMENT_NODE: 8,    // other constants here.
        DOCUMENT_NODE: 9,
        DOCUMENT_FRAGMENT_NODE: 11
    };
}

Traversing a Document

引用

In addition to the childNodes property, the Node interface defines a few other useful properties. firstChild and lastChild refer to the first and last children of a node, and nextSibling and previousSibling refer to adjacent siblings of a node.

一个遍历节点的小例子：运用了node的一些遍历属性

function countTags(n) {                         // n is a Node
    var numtags = 0;                            // Initialize the tag counter
    if (n.nodeType == 1 /*Node.ELEMENT_NODE*/)  // Check if n is an Element
        numtags++;                              // Increment the counter if so
    var children = n.childNodes;                // Now get all children of n
    for(var i=0; i < children.length; i++) {    // Loop through the children
        numtags += countTags(children[i]);      // Recurse on each one
    }
    return numtags;                             // Return the total
}

/**
 * getText(n): Find all Text nodes at or beneath the node n.
 * Concatenate their content and return it as a string.
 */
function getText(n) {
    // Repeated string concatenation can be inefficient, so we collect
    // the value of all text nodes into an array, and then concatenate
    // the elements of that array all at once.
    var strings = [];
    getStrings(n, strings);
    return strings.join("");

    // This recursive function finds all text nodes and appends
    // their text to an array.
    function getStrings(n, strings) {
        if (n.nodeType == 3 /* Node.TEXT_NODE */)
            strings.push(n.data);
        else if (n.nodeType == 1 /* Node.ELEMENT_NODE */) {
            // Note iteration with firstChild/nextSibling
            for(var m = n.firstChild; m != null; m = m.nextSibling) {
                getStrings(m, strings);
            }
        }
    }
}