HTMLDOM简要教程

第一部分HTMLDOM简介1DOM简介HTML文档对象模型HTML文档对象模型（DocumentObjectModel）定义了访问和处理HTML文档的标准方法。HTMLDOM把HTML文档呈现为带有元素、属性和文本的树结构（节点树）。什么是DOM？通过JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。DOM被分为不同的部分（核心、XML及HTML）和级别（DOMLevel1/2/3）DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。CoreDOM定义了一套标准的针对任何结构化文档的对象XMLDOM定义了一套标准的针对XML文档的对象HTMLDOM定义了一套标准的针对HTML文档的对象2DOM节点节点根据DOM，HTML文档中的每个成分都是一个节点。DOM是这样规定的：整个文档是一个文档节点每个HTML标签是一个元素节点包含在HTML元素中的文本是文本节点每一个HTML属性是一个属性节点注释属于注释节点Node层次节点彼此都有等级关系。HTML文档中的所有节点组成了一个文档树（或节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。下面这个图片表示一个文档树（节点树）：3DOM节点树文档树（节点数）FireBugDOM树说明1.除文档节点之外的每个节点都有父节点。2.大部分元素节点都有子节点。title节点也有一个子节点：文本节点DOMTutorial。3.当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，h1和p是同辈。4.节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点。5.节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。4DOM访问节点通过DOM，您可访问HTML文档中的每个节点。4.1查找并访问节点你可通过若干种方法来查找您希望操作的元素：通过使用getElementById()和getElementsByTagName()方法通过使用一个元素节点的parentNode、firstChild以及lastChild属性4.2getElementById/getElementsByTagName1.getElementById()可通过指定的ID来返回元素：2.getElementsByTagName()方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代。getElementsByTagName()可被用于任何的HTML元素：4.3节点列表nodeList当我们使用节点列表时，通常要把此列表保存在一个变量中，就像这样：varx=document.getElementsByTagName(p);现在，变量x包含着页面中所有p元素的一个列表，并且我们可以通过它们的索引号来访问这些p元素。注释：索引号从0开始您可以通过使用length属性来循环遍历节点列表：您也可以通过索引号来访问某个具体的元素。要访问第三个p元素，您可以这么写：4.4parentNode/firstChild/lastChild这三个属性parentNode、firstChild以及lastChild可遵循文档的结构，在文档中进行“短距离的旅行”。请看下面这个HTML片段：在上面的HTML代码中，第一个td是tr元素的首个子元素（firstChild），而最后一个td是tr元素的最后一个子元素（lastChild），此外，tr是每个td元素的父节点（parentNode）。对firstChild最普遍的用法是访问某个元素的文本：parentNode属性常被用来改变文档的结构。假设您希望从文档中删除带有id为maindiv的节点：说明：您需要找到带有指定id的节点，然后移至其父节点并执行removeChild()方法。4.5根节点有两种特殊的文档属性可用来访问根节点：document.documentElementdocument.body第一个属性可返回存在于XML以及HTML文档中的文档根节点。第二个属性是对HTML页面的特殊扩展，提供了对body标签的直接访问。5DOM节点信息nodeName、nodeValue以及nodeType包含有关于节点的信息。节点信息每个节点都拥有包含着关于节点某些信息的属性。这些属性是：nodeName（节点名称）nodeValue（节点值）nodeType（节点类型）nodeNamenodeName属性含有某个节点的名称。元素节点的nodeName是标签名称属性节点的nodeName是属性名称文本节点的nodeName永远是#text文档节点的nodeName永远是#document注释：nodeName所包含的XML元素的标签名称永远是大写的nodeValue对于文本节点，nodeValue属性包含文本。对于属性节点，nodeValue属性包含属性值。nodeValue属性对于文档节点和元素节点是不可用的。nodeTypenodeType属性可返回节点的类型。最重要的节点类型是：FireBug节点信息第二部分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元素1DOMDocument1.1Document对象1.每个载入浏览器的HTML文档都会成为Document对象。2.Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。3.Document对象是Window对象的一部分，可通过window.document属性对其进行访问。4.HTMLDocument接口对DOMDocument接口进行了扩展，定义HTML专用的属性和方法。1.2对象集合1.3对象属性1.4对象方法第三部分Browser对象1DOMWindow1.1Window对象1.Window对象表示一个浏览器窗口或一个框架。2.没有应用于window对象的公开标准，不过所有浏览器都支持该对象。3.如果文档包含框架（frame或iframe标签），浏览器会为HTML文档创建一个window对象，并为每个框架创建一个额外的window对象。1.2对象描述1.在客户端JavaScript中，Window对象是全局对象，所有的表达式都在当前的环境中计算。也即，可以把那个窗口的属性作为全局变量来使用。提示：例如，可以只写document，而不必写window.document.2.同样，可以把当前窗口对象的方法当作函数来使用，例如可以只写alert().3.Window对象还实现了核心JavaScript所定义的所有全局属性和方法。4.Window对象的window属性和self属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。5.要引用窗口中的一个框架，可以使用如下语法：frame[i]//当前窗口的框架self.frame[i]//当前窗口的框架w.frame[i]//窗口w的框架6.要引用一个框架的父窗口（或父框架），可以使用下面的语法：parent//当前窗口的父窗口self.parent//当前窗口的父窗口w.parent//窗口w的父窗口7.要从顶层窗口含有的任何一个框架中引用它，可以使用如下语法：top//当前框架的顶层窗口self.top//当前框架的顶层窗口f.top//框架f的顶层窗口注意：alert()/confirm()/prompt()方法通过对话框与用户进行交互，而非对浏览器窗口或框架进行操作。小贴士：Window.open()与opener属性新的顶层浏览器窗口由方法Window.open()创建。当调用该方法时，应把open()调用的返回值存储在一个变量中，然后使用那个变量来引用新窗口。新窗口的opener属性反过来引用了打开它的那个窗口。1.3对象集合1.4对象属性属性描述IEFOclosed返回窗口是否已被关闭。419defaultStatus设置或返回窗口状态栏中的默认文本。4No9document对Document对象的只读引用。请参阅Document对象。419history对History对象的只读引用。请参数History对象。419innerheight返回窗口的文档显示区的高度。NoNoNoinnerwidth返回窗口的文档显示区的宽度。NoNoNolength设置或返回窗口中的框架数量。419location用于窗口或框架的Location对象。请参阅Location对象。419name设置或返回窗口的名称。419Navigator对Navigator对象的只读引用。请参数Navigator对象。419opener返回对创建此窗口的窗口的引用。419outerheight返回窗口的外部高度。NoNoNoouterwidth返回窗口的外部宽度。NoNoNopageXOffset设置或返回当前页面相对于窗口显示区左上角的X位置。NoNoNopageYOffset设置或返回当前页面相对于窗口显示区左上角的Y位置。NoNoNoparent返回父窗口。419Screen对Screen对象的只读引用。请参数Screen对象。419self返回对当前窗口的引用。等价于Window属性。419status设置窗口状态栏的文本。4No9top返回最顶层的先辈窗口。419windowwindow属性等价于self属性，它包含了对窗口自身的引用。419screenLeftscreenTopscreenXscreenY只读整数。声明了窗口的左上角在屏幕上的的x坐标和y坐标。IE、Safari和Opera支持screenLeft和screenTop，而Firefox和Safari支持screenX和screenY。4191.4.1History对象History对象1.History对象包含用户（在浏览器窗口中）访问过的URL。2.没有应用于History对象的公开标准，不过所有浏览器都支持该对象。3.History对象是window对象的一部分，可通过window.history属性