HTML DOM 教程

HTMLDOM简介PreviousPageNextPageHTML文档对象模型（HTMLDocumentObjectModel）定义了访问和处理HTML文档的标准方法。您应当具备的基础知识在继续学习之前，您需要对下面的知识有基本的了解：HTML/XHTMLJavaScript如果您希望首先学习这些项目，请在我们的首页访问这些教程。什么是DOM？通过JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。在1998年，W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。所有的浏览器都执行了这个标准，因此，DOM的兼容性问题也几乎难觅踪影了。DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。DOM被分为不同的部分（核心、XML及HTML）和级别（DOMLevel1/2/3）：CoreDOM定义了一套标准的针对任何结构化文档的对象XMLDOM定义了一套标准的针对XML文档的对象HTMLDOM定义了一套标准的针对HTML文档的对象。HTMLDOM节点PreviousPageNextPageHTML文档中的每个成分都是一个节点。节点根据DOM，HTML文档中的每个成分都是一个节点。DOM是这样规定的：整个文档是一个文档节点每个HTML标签是一个元素节点包含在HTML元素中的文本是文本节点每一个HTML属性是一个属性节点注释属于注释节点Node层次节点彼此都有等级关系。HTML文档中的所有节点组成了一个文档树（或节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。下面这个图片表示一个文档树（节点树）：HTMLDOM节点树PreviousPageNextPage一棵节点树中的所有节点彼此都是有关系的。文档树（节点数）请看下面这个HTML文档：htmlheadtitleDOMTutorial/title/headbodyh1DOMLessonone/h1pHelloworld!/p/body/html上面所有的节点彼此间都存在关系。除文档节点之外的每个节点都有父节点。举例，head和body的父节点是html节点，文本节点Helloworld!的父节点是p节点。大部分元素节点都有子节点。比方说，head节点有一个子节点：title节点。title节点也有一个子节点：文本节点DOMTutorial。当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，h1和p是同辈，因为它们的父节点均是body节点。节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。比方说，所有的文本节点都是html节点的后代，而第一个文本节点是head节点的后代。节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把html节点作为先辈节点。HTMLDOM访问节点PreviousPageNextPage通过DOM，您可访问HTML文档中的每个节点。查找并访问节点你可通过若干种方法来查找您希望操作的元素：通过使用getElementById()和getElementsByTagName()方法通过使用一个元素节点的parentNode、firstChild以及lastChild属性getElementById()和getElementsByTagName()getElementById()和getElementsByTagName()这两种方法，可查找整个HTML文档中的任何HTML元素。这两种方法会忽略文档的结构。假如您希望查找文档中所有的p元素，getElementsByTagName()会把它们全部找到，不管p元素处于文档中的哪个层次。同时，getElementById()方法也会返回正确的元素，不论它被隐藏在文档结构中的什么位置。这两种方法会像您提供任何你所需要的HTML元素，不论它们在文档中所处的位置！getElementById()可通过指定的ID来返回元素：getElementById()语法document.getElementById(ID);注释：getElementById()无法工作在XML中。在XML文档中，您必须通过拥有类型id的属性来进行搜索，而此类型必须在XMLDTD中进行声明。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）当我们使用节点列表时，通常要把此列表保存在一个变量中，就像这样：varx=document.getElementsByTagName(p);现在，变量x包含着页面中所有p元素的一个列表，并且我们可以通过它们的索引号来访问这些p元素。注释：索引号从0开始。您可以通过使用length属性来循环遍历节点列表：varx=document.getElementsByTagName(p);for(vari=0;ix.length;i++){//dosomethingwitheachparagraph}您也可以通过索引号来访问某个具体的元素。要访问第三个p元素，您可以这么写：vary=x[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=[aparagraph];vartext=x.firstChild.nodeValue;parentNode属性常被用来改变文档的结构。假设您希望从文档中删除带有id为maindiv的节点：varx=document.getElementById(maindiv);x.parentNode.removeChild(x);首先，您需要找到带有指定id的节点，然后移至其父节点并执行removeChild()方法。根节点有两种特殊的文档属性可用来访问根节点：document.documentElementdocument.body第一个属性可返回存在于XML以及HTML文档中的文档根节点。第二个属性是对HTML页面的特殊扩展，提供了对body标签的直接访问。HTMLDOM节点信息PreviousPageNextPagenodeName、nodeValue以及nodeType包含有关于节点的信息。节点信息每个节点都拥有包含着关于节点某些信息的属性。这些属性是：nodeName（节点名称）nodeValue（节点值）nodeType（节点类型）nodeNamenodeName属性含有某个节点的名称。元素节点的nodeName是标签名称属性节点的nodeName是属性名称文本节点的nodeName永远是#text文档节点的nodeName永远是#document注释：nodeName所包含的XML元素的标签名称永远是大写的nodeValue对于文本节点，nodeValue属性包含文本。对于属性节点，nodeValue属性包含属性值。nodeValue属性对于文档节点和元素节点是不可用的。nodeTypenodeType属性可返回节点的类型。最重要的节点类型是：元素类型节点类型元素1属性2文本3注释8文档9HTMLDOM参考手册PreviousPageNextPageBrowser对象参考手册点击以下链接，可以获得以下对象的更多信息，包括它们的集合、属性、方法以及事件。其中包含大量实例！对象描述WindowJavaScript层级中的顶层对象，表示浏览器窗口。Navigator包含客户端浏览器的信息。Screen包含客户端显示屏的信息。History包含了浏览器窗口访问过的URL。Location包含了当前URL的信息。HTMLDOM对象参考手册请点击下面的链接，学习更多有关对象及其集合、属性、方法和事件的知识。其中包含大量实例！对象描述Document代表整个HTML文档，可被用来访问页面中的所有元素Anchor代表a元素Area代表图像映射中的area元素Base代表base元素Body代表body元素Button代表button元素Event代表某个事件的状态Form代表form元素Frame代表frame元素Frameset代表frameset元素Iframe代表iframe元素Image代表img元素Inputbutton代表HTML表单中的一个按钮Inputcheckbox代表HTML表单中的复选框Inputfile代表HTML表单中的文件上传Inputhidden代表HTML表单中的隐藏域Inputpassword代表HTML表单中的密码域Inputradio代表HTML表单中的单选按钮Inputreset代表HTML表单中的重置按钮Inputsubmit代表HTML表单中的确认按钮Inputtext代表HTML表单中的文本输入域（文本框）Link代表link元素Meta代表meta元素Object代表Object元素Option代表option元素Select代表HTML表单中的选择列表Style代表单独的样式声明Table代表table元素TableData代表td元素TableRow代表tr元素Textarea代表textarea元素Window对象Window对象Window对象表示浏览器中打开的窗口。如果文档包含框架（frame或iframe标签），浏览器会为HTML文档创建一个window对象，并为每个框架创建一个额外的window对象。注释：没有应用于window对象的公开标准，不过所有浏览器都支持该对象。IE:InternetExplorer,F:Firefox,O:Opera.Window对象集合集合描述IEFOframes[]返回窗口中所有命名的框架。该集合是Window对象的数组，每个Window对象在窗口中含有一个框架或iframe。属性frames.length存放数组f