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

在第六章的两节中,我们已经深入的讨论了两个标准的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

描述

IEFOW3C
childNodesReturns a NodeList of child nodes for a node

返回一个节点的子节点的节点列表

519Yes
firstChildReturns the first child of a node

返回一个节点的第一个子节点

519Yes
lastChildReturns the last child of a node

返回一个节点的最后一个子节点

519Yes
localNameReturns the local part of the name of a node

返回一个节点的本地名称

No19Yes
nextSiblingReturns the node immediately following a node

直接返回下一个节点

519Yes
nodeNameReturns the name of a node, depending on its type

根据类型返回指定的节点名称

519Yes
nodeTypeReturns the type of a node

返回节点类型

519Yes
nodeValueSets or returns the value of a node, depending on its type

根据类型设置或返回一个节点值

519Yes
ownerDocumentReturns the root element (document object) for a node

返回一个节点的根元素(文档对象)

519Yes
parentNodeReturns the parent node of a node

返回一个节点的父类节点

519Yes
prefixSets or returns the namespace prefix of a node

设置或返回一个节点的命名空间前缀

No19Yes
previousSiblingReturns the node immediately before a node

直接返回上一个节点

519Yes
textContentSets or returns the textual content of a node and its descendants

设置或返回当前节点及其从属类节点的文本内容

No1NoYes

Node Object Methods

节点对象方法

Methods

方法

Description

描述

IEFOW3C
appendChild()Adds a new child node to the end of the list of children of a node

将一个新的子节点添加到的一个节点的子类节点列表末尾

519Yes
cloneNode()Clones a node

复制一个节点

519Yes
compareDocumentPosition()Compares the document position of two nodes

比较两个节点的文档位置

No1NoYes
getFeature(feature,version)Returns a DOM object which implements the specialized APIs of the specified feature and version

返回一个DOM对象,此对象可执行带有指定特性和版本的专门的API

  NoYes
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被设置到此节点。

  NoYes
hasAttributes()Returns true if a node has any attributes, otherwise it returns false

假如某节点有任何的属性,则返回ture。否则返回false。

519Yes
hasChildNodes()Returns true if a node has any child nodes, otherwise it returns false

假如某个节点拥有任何子节点,则返回true。否则返回false。

519Yes
insertBefore()Inserts a new child node before an existing child node

在当前子节点之前插入一个新的子节点

519Yes
isDefaultNamespace(URI)Returns whether the specified namespaceURI is the default

返回是否指定的namespaceURI为默认

  NoYes
isEqualNode()Checks if two nodes are equal

检验两个节点值是否相等

NoNoNoYes
isSameNode()Checks if two nodes are the same node

检验两个节点是否相同

No1NoYes
isSupported(feature,version)Returns whether a specified feature is supported on a node

返回在某个节点上指定的特性是否被支持

  9Yes
lookupNamespaceURI()Returns the namespace URI matching a specified prefix

返回匹配某个指定前缀的命名空间URI

No1NoYes
lookupPrefix()

Returns the prefix matching a specified namespace URI

返回匹配某个指定命名空间URI的前缀

No1NoYes
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区段以及实体引用)来分隔文本节点,例如,既没有相邻的文本节点,也没有空的文本节点。

519Yes
removeChild()Removes a child node

删除一个子节点

519Yes
replaceChild()Replaces a child node

替换一个子节点

519Yes
setUserData(key,data,handler)Associates an object to a key on a node

把某个对象关联到节点上的一个键上

  NoYes

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

文档

#documentnull

DocumentFragment

文档片断

#document fragmentnull

DocumentType

文档类型名称

doctype name

文档类型名称

null

EntityReference

实体参数

entity reference name

实体参数名称

null

Element

元素

element name

元素名称

null

Attr

属性

attribute name

属性名称

attribute value

属性值

ProcessingInstruction

处理指令

target

目标

content of node

节点内容

Comment

注释

#commentcomment text

注释文本

Text

文本

#textcontent of node

节点内容

CDATASection

CDATA部分

#cdata-sectioncontent of node

节点内容

Entity

实体

entity name

实体名称

null

Notation

符号

notation name

符号名称

null

NodeTypes – Named Constants

节点类型 – 指定常量

NodeType

节点类型

Named Constant

指定常量

1ELEMENT_NODE
2ATtrIBUTE_NODE
3TEXT_NODE
4CDATA_SECTION_NODE
5ENTITY_REFERENCE_NODE
6ENTITY_NODE
7PROCESSING_INStrUCTION_NODE
8COMMENT_NODE
9DOCUMENT_NODE
10DOCUMENT_TYPE_NODE
11DOCUMENT_FRAGMENT_NODE
12NOTATION_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

voidnormalize ()

 

Stub

voidremoveAttribute (String name )
voidsetAttribute (String name, String value )

 

Methods inherited from Node (继承 Node的方法)
appendChild, cloneNode, hasChildNodes, insertBefore, removeChild, removeNode, replaceChild

 

花了这么长的时间,整理了DOM的核心对象Node 的类型,方法和属性。

为我们在下一节的DOM的节点遍历,节点的修改,节点的创建、克隆,节点属性的读写有关操作和学习,扫清了道路,这样一来我在一路上的DOM旅行,是轻松和愉快的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值