JavaScript DOM Tutorials
在第六章的两节中，我们已经深入的讨论了两个标准的DOM方法和一个自己生产的方法。
- getElementById() # 通过ID属性查找元素（标准）
- getElementsByTagName() # 通过标签名称查找元素（标准）
- getElementsByClass() # 通过类名查找元素（自己生产的方法）
这两个标准的强大的DOM方法人我们轻松的完成了HTML DOM中的元素查找和定位。
是我们的长途旅行。
在我们的DOM遍历旅行之前，我们还要理清DOM的核心（Node）的一些分类，以及
Node接口的所有节点类型有那些，它们包含的特性和方法有那些？带着这些疑问，我们开始DOM的核心对象的认识和分析吧！
DOM的核心对象：Node 分析
the Node object is the primary data type for the entire DOM.
节点对象是整个DOM中最主要的数据类型。
the Node object represents a single node in the document tree.
节点对象代表了文档树中的一个单独的节点。
A node can be an element node, an attribute node, a text node, or any other of the node types explained in the “Node types” chapter.
这里的节点可以是：元素节点、属性节点、文本节点以及所有在“Node types[节点类型]”这章中所提到的所有类型的节点。
接下来，我们就开始研究DOM的核心（Node）的。
根节点
1.document.documentElement (可以直接访问<html>标签)
2.document.body（它是为HTML页面增加的专有属性，它常用于直接访问<body>标签）
节点(node)层次
DOM的核心:Node .由于DOM是树形结构，所以一个节点被抽象为对象Node.
Node接口定义了遍历和操作树的属性和方法。
Node接口定义了所有节点类型都包含的特性和方法。
节点(node)层次(树状结构图)
图例：核心DOM API的一部分类层次
Node Types
节点类型
下述表格列举了不同的W3C节点类型，每个节点类型中可能会包含子类：
| Node type 节点类型 | Description 描述 | Children 子类 |
|---|---|---|
| Document 文档（重点） | Represents the entire document (it is the root-node of the DOM tree) 定义整个文档（DOM树的根节点） | Element (max. one), ProcessingInstruction, Comment, DocumentType |
| DocumentFragment 文档片断 | Represents a “lightweight” Document object, which can hold a portion of a document 定义“lightweight”文档对象（保留一个文档中的一部分） | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| DocumentType 文档类型 | Represents a list of the entities that are defined for the document 定义文档的实体列表 | None |
| EntityReference 实体参数 | Represents an entity reference 定义一个实体参数 | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| Element 元素（重点） | Represents an element 定义一个元素 | Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference |
| Attr 属性 | Represents an attribute. Note: Attributes differ from the other node types because they are not considered child nodes of a parent 定义一个属性。 注意：属性和其它节点类型不同，因为它们不是同一个父节点的子节点。 | Text, EntityReference |
| ProcessingInstruction 处理指令 | Represents a “processing instruction” 定义一个“处理指令” | None |
| Comment 注释 | Represents a comment 定义一个注释 | None |
| Text 文本 | Represents textual content (character data) in an element or attribute 定义一个元素或一个属性内的文本内容（字符数据） | None |
| CDATASection CDATA部分 | Represents a block of text that may contains characters that would otherwise be treated as markup 定义一块包含字符的文本区，这里的字符也可以是标记 | None |
| Entity 实体 | Represents an entity 定义一个实体 | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| Notation 符号 | Represents a notation declared in the Dtd 定义一个在Dtd中声明的符号 | None |
备注说明：
Document－－最顶层的节点，所有的其他节点都是附属于它的。
DocumentType－－Dtd引用（使用<!DOCTYPE>语法）的对象表现形式，它不能包含子节点。
DocumentFragment－－可以像Document一样来保存其他节点。
Element－－表示起始标签和结束标签之间的内容，例如<tag></tab>或者<tag/>。这是唯一可以同时包含特性和子节点的节点类型。
Attr－－代表一对特性名和特性值。这个节点类型不能包含子节点。
Text－－代表XML文档中的在起始标签和结束标签之间，或者CDataSection内包含的普通文本。这个节点类型不能包含子节点。
CDataSection－－<![CDATA[]]>的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。
Entity－－表示在Dtd中的一个实体定义，例如<!ENTITY foo”foo”>。这个节点类型不能包含子节点。
EntityReference－－代表一个实体引用，例如"。这个节点类型不能包含子节点。
ProcessingInstruction－－代表一个PI。这个节点类型不能包含子节点。
Comment－－代表XML注释。这个节点不能包含子节点。
Notation－－代表在Dtd中定义的记号。这个很少用到。
Node接口的所有节点类型所包含的特性和方法（树状结构图）：
-
Node
-
属性
-
遍历节点（短途旅行）:
- parentNode :Node
- firstChild :Node
- lastChild :Node
- nextSibling :Node
- previousSibling :Node
- childNodes :NodeList 节点信息:
- nodeName :String
- nodeType :number
- nodeValue :String 返回一个节点的根元素（文档对象）:
- ownerDocument : Document 包含了代表一个元素的特性的Attr对象；仅用于Element节点：
- attributes : NamedNodeMap 获取对象层次中的父对象：
- parentElement [IE] :Node
-
方法
-
修改文档树:
- appendChild(Node newChild) :Node
- insertBefore(Node newChild, Node refChild) :Node
- removeChild(Node oldChild):Node
- replaceChild(Node newChild, Node refChild) :Node 克隆一个节点：
- cloneNode(boolean deep) :Node 删除一个子节点:
- removeNode(boolean removeChildren) :Node 判断childNodes包含是否包含节点：
- hasChildNodes() :boolean
Node
-
-
Document
-
属性
-
自己的：
- documentElement :Element 继承 Node :
- attributes, childNodes, firstChild, lastChild, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentElement, parentNode, previousSibling
-
方法
-
自己的：
-
-
创建元素：
- createElement(String tagName) ： Element
- createTextNode(String data) ： Text 查找元素：
- getElementById(String elementId) ：Element
- getElementsByTagName(String tagname) ：NodeList
继承 Node :
- appendChild, cloneNode, hasChildNodes, insertBefore, removeChild, removeNode, replaceChild
-
-
属性
-
-
Element
-
属性
-
自己的：
- tagName: String 继承 Node :
- attributes, childNodes, firstChild, lastChild, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentElement, parentNode, previousSibling
-
方法
-
自己的：
-
-
属性的读写：
- getAttribute(String name): String
- setAttribute(String name, String value) : void
-
-
其它：
- getElementsByTagName(String name) Stub:NodeList
- normalize() Stub : void
- removeAttribute(String name) : void
继承 Node :
- appendChild, cloneNode, hasChildNodes, insertBefore, removeChild, removeNode, replaceChild
-
-
属性
Node对象的属性和方法
Node Object Properties
节点对象属性
| Properties 属性 | Description 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| childNodes | Returns a NodeList of child nodes for a node 返回一个节点的子节点的节点列表 | 5 | 1 | 9 | Yes |
| firstChild | Returns the first child of a node 返回一个节点的第一个子节点 | 5 | 1 | 9 | Yes |
| lastChild | Returns the last child of a node 返回一个节点的最后一个子节点 | 5 | 1 | 9 | Yes |
| localName | Returns the local part of the name of a node 返回一个节点的本地名称 | No | 1 | 9 | Yes |
| nextSibling | Returns the node immediately following a node 直接返回下一个节点 | 5 | 1 | 9 | Yes |
| nodeName | Returns the name of a node, depending on its type 根据类型返回指定的节点名称 | 5 | 1 | 9 | Yes |
| nodeType | Returns the type of a node 返回节点类型 | 5 | 1 | 9 | Yes |
| nodeValue | Sets or returns the value of a node, depending on its type 根据类型设置或返回一个节点值 | 5 | 1 | 9 | Yes |
| ownerDocument | Returns the root element (document object) for a node 返回一个节点的根元素（文档对象） | 5 | 1 | 9 | Yes |
| parentNode | Returns the parent node of a node 返回一个节点的父类节点 | 5 | 1 | 9 | Yes |
| prefix | Sets or returns the namespace prefix of a node 设置或返回一个节点的命名空间前缀 | No | 1 | 9 | Yes |
| previousSibling | Returns the node immediately before a node 直接返回上一个节点 | 5 | 1 | 9 | Yes |
| textContent | Sets or returns the textual content of a node and its descendants 设置或返回当前节点及其从属类节点的文本内容 | No | 1 | No | Yes |
Node Object Methods
节点对象方法
| Methods 方法 | Description 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| appendChild() | Adds a new child node to the end of the list of children of a node 将一个新的子节点添加到的一个节点的子类节点列表末尾 | 5 | 1 | 9 | Yes |
| cloneNode() | Clones a node 复制一个节点 | 5 | 1 | 9 | Yes |
| compareDocumentPosition() | Compares the document position of two nodes 比较两个节点的文档位置 | No | 1 | No | Yes |
| getFeature(feature,version) | Returns a DOM object which implements the specialized APIs of the specified feature and version 返回一个DOM对象，此对象可执行带有指定特性和版本的专门的API | No | Yes | ||
| getUserData(key) | Returns the object associated to a key on a this node. the object must first have been set to this node by calling setUserData with the same key 返回与此节点上的某个键相关联的对象。此对象必须首先通过使用相同的键来调用setUserData被设置到此节点。 | No | Yes | ||
| hasAttributes() | Returns true if a node has any attributes, otherwise it returns false 假如某节点有任何的属性，则返回ture。否则返回false。 | 5 | 1 | 9 | Yes |
| hasChildNodes() | Returns true if a node has any child nodes, otherwise it returns false 假如某个节点拥有任何子节点，则返回true。否则返回false。 | 5 | 1 | 9 | Yes |
| insertBefore() | Inserts a new child node before an existing child node 在当前子节点之前插入一个新的子节点 | 5 | 1 | 9 | Yes |
| isDefaultNamespace(URI) | Returns whether the specified namespaceURI is the default 返回是否指定的namespaceURI为默认 | No | Yes | ||
| isEqualNode() | Checks if two nodes are equal 检验两个节点值是否相等 | No | No | No | Yes |
| isSameNode() | Checks if two nodes are the same node 检验两个节点是否相同 | No | 1 | No | Yes |
| isSupported(feature,version) | Returns whether a specified feature is supported on a node 返回在某个节点上指定的特性是否被支持 | 9 | Yes | ||
| lookupNamespaceURI() | Returns the namespace URI matching a specified prefix 返回匹配某个指定前缀的命名空间URI | No | 1 | No | Yes |
| lookupPrefix() | Returns the prefix matching a specified namespace URI 返回匹配某个指定命名空间URI的前缀 | No | 1 | No | Yes |
| normalize() | Puts all text nodes underneath a node (including attributes) into a “normal” form where only structure (e.g., elements, comments, processing instructions, CDATA sections, and entity references) separates Text nodes, i.e., there are neither adjacent Text nodes nor empty Text nodes 把某个节点（包括属性节点）下的所有文本节点放置到一个“标准”的格式中，其中只有结构（比如元素、注释、处理指令、CDATA区段以及实体引用）来分隔文本节点，例如，既没有相邻的文本节点，也没有空的文本节点。 | 5 | 1 | 9 | Yes |
| removeChild() | Removes a child node 删除一个子节点 | 5 | 1 | 9 | Yes |
| replaceChild() | Replaces a child node 替换一个子节点 | 5 | 1 | 9 | Yes |
| setUserData(key,data,handler) | Associates an object to a key on a node 把某个对象关联到节点上的一个键上 | No | Yes |
Node Types – Return Values
节点类型 — 返回值
Below is a list of what the nodeName and the nodeValue properties will return for each nodetype:
下面的列表详细定义了为每个节点类型（nodetype）所返回的节点属性（nodetype）：
| Node type 节点 | nodeName returns 节点名称 | nodeValue returns 节点值 |
|---|---|---|
| Document 文档 | #document | null 空 |
| DocumentFragment 文档片断 | #document fragment | null 空 |
| DocumentType 文档类型名称 | doctype name 文档类型名称 | null 空 |
| EntityReference 实体参数 | entity reference name 实体参数名称 | null 空 |
| Element 元素 | element name 元素名称 | null 空 |
| Attr 属性 | attribute name 属性名称 | attribute value 属性值 |
| ProcessingInstruction 处理指令 | target 目标 | content of node 节点内容 |
| Comment 注释 | #comment | comment text 注释文本 |
| Text 文本 | #text | content of node 节点内容 |
| CDATASection CDATA部分 | #cdata-section | content of node 节点内容 |
| Entity 实体 | entity name 实体名称 | null 空 |
| Notation 符号 | notation name 符号名称 | null 空 |
NodeTypes – Named Constants
节点类型 – 指定常量
| NodeType 节点类型 | Named Constant 指定常量 |
|---|---|
| 1 | ELEMENT_NODE |
| 2 | ATtrIBUTE_NODE |
| 3 | TEXT_NODE |
| 4 | CDATA_SECTION_NODE |
| 5 | ENTITY_REFERENCE_NODE |
| 6 | ENTITY_NODE |
| 7 | PROCESSING_INStrUCTION_NODE |
| 8 | COMMENT_NODE |
| 9 | DOCUMENT_NODE |
| 10 | DOCUMENT_TYPE_NODE |
| 11 | DOCUMENT_FRAGMENT_NODE |
| 12 | NOTATION_NODE |
Document的属性和方法
| Fields（属性） | |
| readonlyElement | documentElement |
| Fields inherited from Node（继承 Node的属性） |
| attributes, childNodes, firstChild, lastChild, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentElement, parentNode, previousSibling |
| Methods（方法） | |
| Element | createElement(String tagName) |
| Text | createTextNode(String data) |
| Element | getElementById(String elementId) |
| NodeList | getElementsByTagName(String tagname) |
| Methods inherited from Node（继承 Node的方法） |
| appendChild, cloneNode, hasChildNodes, insertBefore, removeChild, removeNode, replaceChild |
Element属性和方法
| Fields(属性) | |
| readonlyString | tagName |
| Fields inherited from Node（继承 Node的属性） |
| attributes, childNodes, firstChild, lastChild, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentElement, parentNode, previousSibling |
| Methods（方法） | |
| String | getAttribute(String name) |
| NodeList | getElementsByTagName(String name)
Stub |
| void | normalize()
Stub |
| void | removeAttribute(String name) |
| void | setAttribute(String name, String value) |
| Methods inherited from Node（继承 Node的方法） |
| appendChild, cloneNode, hasChildNodes, insertBefore, removeChild, removeNode, replaceChild |
花了这么长的时间，整理了DOM的核心对象Node 的类型，方法和属性。
为我们在下一节的DOM的节点遍历，节点的修改，节点的创建、克隆，节点属性的读写有关操作和学习，扫清了道路，这样一来我在一路上的DOM旅行，是轻松和愉快的。
扫一扫
618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
