HTML DOM定义了访问和操作HTML文档的标准方法。HTML DOM 把HTML文档呈现为带有元素、属性和文本的树结构节点树。HTML DOM简介HTML文档对象模型HTML Document Object Model定义了访问和处理HTML文档的标准方法。您应当具备的基础知识在继续学习之前您需要对下面的知识有基本的了解◆HTML / XHTML◆JavaScript什么是DOM通过JavaScript您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口连同对HTML元素进行添加、移动、改变或移除的方法和属性都是通过文档对象模型来获得的DOM。在1998年W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。所有的浏览器都执行了这个标准因此DOM的兼容性问题也几乎难觅踪影了。DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。DOM被分为不同的部分核心、XML及HTML和级别DOM Level 1/2/3◆Core DOM定义了一套标准的针对任何结构化文档的对象。◆XML DOM定义了一套标准的针对XML文档的对象。◆HTML DOM定义了一套标准的针对HTML文档的对象。HTML DOM 节点HTML文档中的每个成分都是一个节点。节点根据DOMHTML文档中的每个成分都是一个节点。DOM是这样规定的◆整个文档是一个文档节点◆每个HTML标签是一个元素节点◆包含在HTML元素中的文本是文本节点◆每一个HTML属性是一个属性节点◆注释属于注释节点Node层次节点彼此都有等级关系。HTML文档中的所有节点组成了一个文档树或节点树。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点并由此继续伸出枝条直到处于这棵树最低级别的所有文本节点为止。下面这个图片表示一个文档树节点树HTML DOM 节点树一棵节点树中的所有节点彼此都是有关系的。文档树节点数请看下面这个HTML文档htmlheadtitleDOM Tutorial/title/headbodyh1DOM Lesson one/h1pHello world!/p/body/html上面所有的节点彼此间都存在关系。除文档节点之外的每个节点都有父节点。举例head 和 body的父节点是html节点文本节点Hello world!的父节点是p节点。大部分元素节点都有子节点。比方说head节点有一个子节点title节点。title节点也有一个子节点文本节点DOM Tutorial。当节点分享同一个父节点时它们就是同辈同级节点。比方说h1和 p是同辈因为它们的父节点均是body节点。节点也可以拥有后代后代指某个节点的所有子节点或者这些子节点的子节点以此类推。比方说所有的文本节点都是html节点的后代而第一个文本节点是head节点的后代。节点也可以拥有先辈。先辈是某个节点的父节点或者父节点的父节点以此类推。比方说所有的文本节点都可把html节点作为先辈节点。HTML DOM访问节点通过DOM您可访问HTML文档中的每个节点。查找并访问节点你可通过若干种方法来查找您希望操作的元素◆通过使用 getElementById() 和 getElementsByTagName() 方法。◆通过使用一个元素节点的parentNode、firstChild以及lastChild属性。getElementById() 和 getElementsByTagName()getElementById() 和 getElementsByTagName()这两种方法可查找整个HTML文档中的任何HTML元素。这两种方法会忽略文档的结构。假如您希望查找文档中所有的p元素getElementsByTagName()会把它们全部找到不管p元素处于文档中的哪个层次。同时getElementById()方法也会返回正确的元素不论它被隐藏在文档结构中的什么位置。这两种方法会像您提供任何你所需要的HTML元素不论它们在文档中所处的位置getElementById()可通过指定的ID来返回元素document.getElementById(ID);注释getElementById() 无法工作在XML中。在XML文档中您必须通过拥有类型id的属性来进行搜索而此类型必须在XML DTD中进行声明。getElementsByTagName() 方法会使用指定的标签名返回所有的元素作为一个节点列表这些元素是您在使用此方法时所处的元素的后代。getElementsByTagName() 可被用于任何的HTML元素getElementsByTagName() 语法document.getElementsByTagName(标签名称);或者document.getElementById(ID).getElementsByTagName(标签名称);实例 1下面这个例子会返回文档中所有p元素的一个节点列表document.getElementsByTagName(p);实例 2下面这个例子会返回所有p元素的一个节点列表且这些p元素必须是id为maindiv的元素的后代document.getElementById(maindiv).getElementsByTagName(p);节点列表nodeList当我们使用节点列表时通常要把此列表保存在一个变量中就像这样varxdocument.getElementsByTagName(p);现在变量x包含着页面中所有p元素的一个列表并且我们可以通过它们的索引号来访问这些p元素。注释索引号从0开始。您可以通过使用length属性来循环遍历节点列表varxdocument.getElementsByTagName(p);for (vari;ix.length;i){// do something with each paragraph}您也可以通过索引号来访问某个具体的元素。要访问第三个p元素您可以这么写varyx[2];parentNode、firstChild以及lastChild这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构在文档中进行“短距离的旅行”。请看下面这个HTML片段tabletrtdJohn/tdtdDoe/tdtdAlaska/td/tr/table在上面的HTML代码中第一个td是tr元素的首个子元素firstChild而最后一个td是tr元素的最后一个子元素lastChild。此外tr是每个td元素的父节点parentNode。对firstChild最普遍的用法是访问某个元素的文本varx[a paragraph];vartextx.firstChild.nodeValue;parentNode属性常被用来改变文档的结构。假设您希望从文档中删除带有id为maindiv的节点varxdocument.getElementById(maindiv);x.parentNode.removeChild(x);首先您需要找到带有指定id的节点然后移至其父节点并执行removeChild()方法。根节点有两种特殊的文档属性可用来访问根节点document.documentElementdocument.body第一个属性可返回存在于XML以及HTML文档中的文档根节点。第二个属性是对HTML页面的特殊扩展提供了对body标签的直接访问。HTML DOM 节点信息nodeName、nodeValue以及nodeType包含有关于节点的信息。节点信息每个节点都拥有包含着关于节点某些信息的属性。这些属性是◆nodeName节点名称◆nodeValue节点值◆nodeType节点类型nodeNamenodeName属性含有某个节点的名称。◆元素节点的nodeName是标签名称◆属性节点的nodeName是属性名称◆文本节点的nodeName永远是#text◆文档节点的nodeName永远是#document注释nodeName所包含的XML元素的标签名称永远是大写的nodeValue◆对于文本节点nodeValue属性包含文本。◆对于属性节点nodeValue属性包含属性值。◆nodeValue属性对于文档节点和元素节点是不可用的。nodeTypenodeType属性可返回节点的类型。最重要的节点类型是一个 HTML DOM 实例下面这个例子向我们展示了当一个用户在文档中点击时HTML文档的背景颜色如何被改变。htmlheadscripttypetext/javascriptfunction ChangeColor(){document.body.bgColoryellow}/script/headbodyonclickChangeColor()Click on this document!/body/html