HTML DOM教程

DOM

DOM是W3C(World Wide Web Consortium)标准。

DOM定义了访问诸如XML和HTML文档的标准;

W3C文档对象模型(DOM,全称Document Object Model)是一个使程序和脚本有能力动态地访问和更新文档的内容、结构及样式的平台和语言中立的接口。

DOM被分为3个不同的部分/级别:

核心DOM-用于任何结构化文档的标准

XML DOM-用于XML文档的标准模型

HTML DOM-用于HTML文档的标准模型

HTML DOM:定义了所有HTML元素的对象和属性,以及访问它们的方法(接口)。

XML DOM:用于XML的标准对象模型、用于XML的标准编程接口、中立于平台和语言、W3C标准

XML DOM定义了所有XML元素的对象和属性,以及访问它们的方法(接口)

换句话说:XML DOM是用于获取、更改、添加或删除XML元素的标准。

XML DOM节点

在DOM中,XML文档中的每个成分都是一个节点。

DOM节点

DOM是这样规定的:

  • 整个文档是一个文档节点
  • 每个XML元素是一个元素节点
  • 包含在XML元素中的文本是文本节点
  • 每一个XML属性是一个属性节点
  • 注释是注释节点

文本总是存储在文本节点中

在DOM处理中一个普遍的错误是,认为元素节点包含文本。

不过,元素节点的文本是存储在文本节点中的。

XML DOM 节点树

XML DOM把XML文档视为一棵节点树。

树中的多有节点彼此之间都有关系。

父节点、子节点和同级节点

  • 在节点树中,顶端的节点称为根节点
  • 根节点之外的每个节点都有一个父节点
  • 节点可以有任何数量的子节点
  • 叶子是没有子节点的节点
  • 同级节点是拥有相同父节点的节点

XML DOM-属性和方法

属性和方法向XML DOM定义了编程接口

XML DOM属性

  • x.nodeName-x的名称
  • x.nodeValue-x的值
  • x.parentNode-x的父节点
  • x.childNodes-x的子节点
  • x.attributes-x的属性节点

XML DOM方法

x.getElementsByTagName(name)-获取带有指定标签名称的所有元素

x.appendChild(node)-向x插入子节点

x.removeChild(node)-从x删除子节点

注释:在上面的列表中,x是一个节点对象。

访问节点

三种访问方式:

1、通过使用getElementsByTagName()方法。

2、通过循环(遍历)节点树。

3、通过利用节点的关系在节点树中导航。

getElementsByTagName()方法

getElementsByTagName()返回拥有指定标签名的所有元素。

节点类型(Node Types)

XML 文档的documentElement属性是根节点

节点的nodeName属性是节点的名称。

节点的nodeType属性是节点的类型。

注:nodeType的值为1时是元素节点。

节点的属性

在XML DOM中,每个节点都是一个对象。

对象拥有方法和属性,并可通过JavaScript进行访问和操作。

三个重要的节点属性是:

nodeName

nodeValue

nodeType

nodeName属性

nodeName属性规定节点的名称。

nodeName是只读的

元素节点的nodeName与标签名相同

属性节点的nodeName是属性的名称

文本节点的nodeName永远是#text

文档节点的nodeName永远是#document

nodeValue属性

nodeValue属性规定节点的值

元素节点的nodeValue是undefined

文本节点的nodeValue是文本本身

属性节点的nodeValue是属性的值

nodeType属性

nodeType属性规定节点的类型

nodeType是只读的

最重要的节点类型是:

节点类型

NodeType

元素

1

属性

2

文本

3

注释

8

文档

9

DOM属性列表(命名节点图Named Node Map)

元素节点的attribute属性返回属性节点的列表。

DOM解析中的浏览器差异

所有现代的浏览器都支持W3C DOM规范。

然而,浏览器之间是由差异的。一个重要的差异是:处理空白和换行的方式。

//使用loadXMLDoc()把“books.xml”载入xmlDoc中

xmlDoc=loadXMLDoc("books.xml");

//获取根元素的子节点

x=xmlDoc.documentElement.childNodes;

//输出子节点的数量。结果取决于使用的浏览器。IE浏览器会输出4(提醒4个子节点),而其他浏览器会输出9(提醒9个子节点)

document.write("Number of child nodes: " + x.length);

导航DOM节点

通过节点间的关系访问节点树中的节点,通常被称为导航节点(“navigating nodes”)

在XML DOM中,节点的关系被定义为节点的属性:

parentNode 父节点

childNodes

firstChild

lastChild

nextChild

previousSibling

XML DOM 获取节点值

nodeValue属性用于获取节点的文本值。

getAttribute()方法返回属性的值。

获取元素的值

在DOM中,每种成分都是节点。元素节点没有文本值。

元素节点的文本存储在子节点中。该节点称为文本节点。

获取元素文本的方法,就是获取这个子节点(文本节点)的值。

获取元素值

getElementsByTagName()方法返回包含拥有指定标签名的所有元素的节点列表,表示其中的元素的顺序是它们在源文档中出现的顺序。

获取属性的值

在DOM中,属性也是节点。与元素节点不同,属性节点拥有文本值。

获取属性的值的方法,就是获取它的文本值。

通过使用getAttribute()方法或属性节点nodeValue属性来完成。

获取属性值-getAttribute()

getAttribute()方法返回属性值。

获取属性值-getAttributeNode()

getAttributeNode()方法返回属性节点

XML DOM改变节点值

nodeValue属性用于改变节点值。

setAttribute()方法用于改变属性值。

改变元素的值

在DOM中,每种成分都是节点。元素节点没有文本值。

元素节点的文本存储在子节点中。该节点称为文本节点。

改变元素文本的方法,就是改变这个子节点(文本节点)的值。

改变文本节点的值

nodeValue属性可用于改变文本节点的值。

改变属性的值

在DOM中,属性也是节点。与元素节点不同,属性节点拥有文本值。

改变属性的值的方法就是改变它的文本值。

通过setAttribute()方法或属性节点的nodeValue属性来完成。

删除元素节点

removeChild()方法删除指定的节点。

打你个节点被删除时,其所有子节点也会被删除。

删除自身-删除当前的节点

removeChild()方法是唯一可以删除指定节点的方法。

删除文本节点

removeChild()方法可用于删除文本节点

清空文本节点

nodeValue属性可用于改变或清空文本节点的值

根据名称删除属性节点

removeAttribute(name)方法用于根据名称删除属性节点

根据对象删除属性节点

removeAttributeNode(node)方法通过使用node对象作为参考,来删除属性节

替换元素节点

replaceChild()方法用于替换节点

替换文本节点中的数据

replaceData()方法用于替换文本节点中的数据、

replaceData()方法有三个参数:

offset-在何处开始替换字符。offset值以0开始。

length-要替换多少字符

string-要插入的字符串

使用nodeValue属性代替

用nodeValue属性来替换文本节点中数据会更加容易。

创建新的元素节点

createElement()方法创建一个新的元素节点

创建新的属性节点

createAttribute()用于创建一个新的属性节点

使用setAttribute()创建属性

setAttribute()方法可以在属性不存在的情况下创建新的属性

创建文本节点

createTextNode()方法创建一个新的文本节点

创建CDATA Section节点

createCDATASection()方法创建一个新的CDATA section节点。

创建注释节点

猜你喜欢

转载自blog.csdn.net/JessicaQNL/article/details/82981518