七(1).DOM的核心对象:Node 分析

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--代表一个实体引用,例如&quot;。这个节点类型不能包含子节点。

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(属性)
readonly Element 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(属性)
readonly String 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旅行,是轻松和愉快的。

 

站点统计