当前位置: 首页 > 工具软件 > DHTML Tree > 使用案例 >

html文档domtree结构图,DOM Tree

莫飞翮
2023-12-01

本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧!

DOM是文档对象化模型(Document Object Model)的简称。DOM Tree是指通过DOM将HTML页面进行解析,并生成的HTML tree树状结构和对应访问方法。

中文名

文档对象化模型

外文名

Document Object Model简    称

DOM Tree

方    式

通过DOM将HTML页面进行解析

DOM Tree概要

编辑

语音

借助DOM Tree,我们能直接而且简易的操作HTML页面上的每个标记内容

DOM技术被Internet Explorer 5.0及以上版本的浏览器所支持,它采取一种非常直观且一致的方式将HTML文档进行模型化处理,并借此提供访问、导航和操作页面的简易编程接口。通过DOM技术,我们不仅能够访问和更新页面的内容及结构,而且还能操纵文档的风格样式。DOM由W3C组织所倡导,这样,大多数浏览器都将最终支持这项技术。

DOM Tree比较

编辑

语音

可以这么说,DOM是从DHTML(Dynamic HTML)对象模型发展而来的。但更准确的说,DOM对象是对DHTML对象模型进行了根本变革的产物。

借助DHTML对象模型技术,我们能够单独地访问并更新HTML页面上的对象,每个HTML标记通过它的ID和NAME属性被操纵,每个对象都具有自己的属性、方法和事件,通过方法操纵对象,通过事件触发因果过程。

DOM则要比DHTML对象模型功能更全面,它提供了一个对整个文档的访问模型,而不仅仅再局限于单一的HTML标记(Tag)范围内。DOM将文档描绘为一个树形(Tree)结构,Tree的每个节点表现为一个HTML标记或者HTML标记内的文本项。树形结构精确地描述了HTML文档中标记间以及文本项间的相互关联性,这种关联性包括child(孩子)类型、parent(双亲)类型和兄弟(sibling)类型。

使用DHTML对象模型访问和更新HTML页面内容时,不可避免地需要查询相关技术手册。因为HTML对象很多,每个HTML对象又有很多的属性、方法和事件。但是采用DOM技术访问和更新HTML页面内容时,任何手册都可以放在一边了。首先查看一下HTML源代码,推算出页面的Tree结构模型;然后,按照层次结构关系操纵需要的属性。比如要更新页面上的文本项内容,如果采用DTHML对象模型,需要使用到innerHTML属性,但必须要注意并不是所有的HTML对象都支持innerHTML属性;如果采用DOM技术,只要修改相关Tree节点都具有的nodeValue属性值即可。

DOM技术使我们可以方便地沿着文档的树型结构在上、下以及一侧方向做节点导航,从页面的任何地方开始,使用child、parent或者sibling三种关联性组成的表达式代表页面的其他地方。而DTHML对象模型不包含Tree结构,所以也就不具备页面对象的相互导航功能。当我们从一个标记对象开始时,不可能用关联表达式来表达相近的标记。虽然对于某些标记,比如

另外,DOM技术允许我们操纵文档的Tree结构,这包括创建新节点(nodes)、删除存在的节点以及在Tree中移动节点。实际上,这就是执行创建新标记(tags)、删除存在的标记以及在文档中移动标记的过程。DTHML对象模型则不允许更改文档结构,我们只能操纵现有的对象。

DOM提供了一套属性用于导航、访问和更新文档内容,其中包括只读类型的属性和可读写类型的属性。

下表是只读类型的属性:

DOM对象属性返 回 值

FirstChild返回一个对象(Object),表示第一个孩子节点(child node)。

LastChild返回一个对象(Object),表示最后一个孩子节点(child node)。

NextSibling返回一个对象(Object),表示下一个相邻的兄弟节点。

NodeName返回节点对应的HTML标记。比如:P,Script。对应文本项节点,返回#text。

nodeType返回节点的类型,1表示此节点是标记(tag),2表示属性(attribute),3表示文本项。

parentNode返回一个对象(Object),表示当前节点的双亲节点(parent node)。

previousSibling返回一个对象(Object),表示前一个相邻的兄弟节点。

specified返回一个布尔型变量(Boolean),表示是否设置了属性值(attribute)。

下表是可读写类型的属性:

DOM对象属性返 回 值

data返回一个字符串,表示文本项节点的值。如果是其他类型节点,返回undefined。

nodeValue返回一个字符串,表示文本项节点的值。如果是其他类型节点,返回null。

下表是DOM中相关属性集合:

DOM对象属性返 回 值

attributes表示节点的属性集合,通过id来访问,比如attributes.id。

childNodes表示节点的孩子节点集合,通过数组索引方式访问,比如:childNodes[2]。

与DHTML对象模型相比较,DOM只有一个缺憾:DOM不能支持事件处理,而DTHML对象模型对于文档对象则拥有一个广泛的事件处理功能。

DOM Tree重要节点

编辑

语音

Element Node : .com"> 中href="http:_//ww_w.test.c_om"即是这个a的属性节点

Text Node : nodeType=3

文本节点 如text中的“text”即是一个文本节点

注意:通过obj.nodeType得到的值就可以判断访问到的是哪种节点。

得到指定的元素节点oNode:

document.getElementById(sid)

document.getElementsByName(sname)

document.getElementsByTagName(stagname)

注意:

document是所有节点的父节点。

元素节点的ID要保持唯一不变。

节点name属性可以重复,但是在IE下getElementsByName对于DIV节点无效,所以不推荐使用。

从一个节点oNode出发访问相关元素或者文本节点:

oNode.firstChild();

oNode.lastChild();

oNode.previousSibling();

oNode.nextSibling();

oNode.childNodes();

oNode.parentNode();

注意:

x yz
这个HTML片段.,在FireFox下如果x处为空,也会被认为存在一个空的文本节点,所以在进行DomTree遍历时要根据nodeType判断,来确保找到想找的节点

访问节点oNode的属性节点

oNode.getAttribute(sName);

oNode.setAttribute(sName,sValue);

DOM Tree展现方式

编辑

语音

1、 使用document.write(sHTML) document.writeln(sHTML)

这个相当于PHP的echo()

参数sHTML将被输出在该语句执行时的位置成为HTML的一部分。

注意:这个方法只可以在文档载入过程中使用。

2、 使用oNode.innerHTML = sHTML

改变oNode节点内部的innerHTML

注意:

IE下无法改变,

 类似资料: