javascript dom

什么是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节点HTML文档中的每个成分都是一个节点。节点根据DOM，HTML文档中的每个成分都是一个节点。DOM是这样规定的：整个文档是一个文档节点每个HTML标签是一个元素节点包含在HTML元素中的文本是文本节点每一个HTML属性是一个属性节点注释属于注释节点Node层次节点彼此都有等级关系。HTML文档中的所有节点组成了一个文档树（或节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。文档树（节点数）请看下面这个HTML文档：htmlheadtitleDOMTutorial/title/headbodyh1DOMLessonone/h1pHelloworld!/p/body/html上面所有的节点彼此间都存在关系。除文档节点之外的每个节点都有父节点。举例，head和body的父节点是html节点，文本节点Helloworld!的父节点是p节点。大部分元素节点都有子节点。比方说，head节点有一个子节点：title节点。title节点也有一个子节点：文本节点DOMTutorial。当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，h1和p是同辈，因为它们的父节点均是body节点。节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。比方说，所有的文本节点都是html节点的后代，而第一个文本节点是head节点的后代。节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把html节点作为先辈节点。HTMLDOM访问节点通过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节点信息nodeName、nodeValue以及nodeType包含有关于节点的信息。节点信息每个节点都拥有包含着关于节点某些信息的属性。这些属性是：nodeName（节点名称）nodeValue（节点值）nodeType（节点类型）nodeNamenodeName属性含有某个节点的名称。元素节点的nodeName是标签名称属性节点的nodeName是属性名称文本节点的nodeName永远是#text文档节点的nodeName永远是#document注释：nodeName所包含的XML元素的标签名称永远是大写的nodeValue对于文本节点，nodeValue属性包含文本。对于属性节点，nodeValue属性包含属性值。nodeValue属性对于文档节点和元素节点是不可用的。nodeTypenodeType属性可返回节点的类型。最重要的节点类型是：元素类型节点类型元素1属性2文本3注释8文档9一个HTMLDOM实例一个HTMLDOM的实例下面这个例子向我们展示了当一个用户在文档中点击时，HTML文档的背景颜色如何被改变。htmlheadscripttype=text/javascriptfunctionChangeColor(){document.body.bgColor=yellow}/script/headbodyonclick=ChangeColor()Clickonthisdocument!/body/htmlDOM的核心：Node由于DOM是树形结构，所以一个节点被抽象为对象Node，这是DOM的核心对象：Node的种类一共有12种，通过Node.nodeType的取值来确定（为1-12），分为：Js代码1.Node.ELEMENT_NODE(1)2.Node.ATTRIBUTE_NODE(2)3.Node.TEXT_NODE(3)//![CDATA[]]中括着的纯文本，它没有子节点4.Node.CDATA_SECTION_NODE(4)//子节点一定为TextNode5.Node.ENTITY_REFERENCE_NODE(5)6.Node.ENTITY_NODE(6)//DTD中的实体定义!ENTITYfoo“foo”，无子节点7.Node.PROCESSING_INSTRUCTION_NODE(7)//PI，无子节点8.Node.COMMENT_NODE(8)9.Node.DOCUMENT_NODE(9)//最外层的Rootelement,包括所有其它节点10.Node.DOCUMENT_TYPE_NODE(10)//DTD，!DOCTYPE………..11.Node.DOCUMENT_FRAGMENT_NODE(11)12.Node.NOTATION_NODE(12)//DTD中的Nation定义❑Node接口包含的特性/方法节点的属性nodeName属性将返回一个字符串，其内容是给定节点的名字。如果节点是元素节点，返回这个元素的名称；如果是属性节点，返回这个属性的名称；如果是文本节点，返回一个内容为#text的字符串；nodeType属性将返回一个整数，这个数值代表给定节点的类型nodeValue属性将返回给定节点的当前值.如果节点是元素节点，返回null；如果是属性节点，返回这个属性的名称；如果是文本节点，返回文本节点的内容；ownerDocument指向这个节点所属的文档attributes包哈勒代表一个元素的特性的Attr对象；仅用于Element节点childNodes所有子节点的列表firstChild指向在childNodes列表中的第一个节点lastChild指向在childNodes列表中的最后一个节点nextSibling指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为nullpreviousSibling指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为nullparentNode返回一个给定节点的父节点❑hasChildNodes()当childNodes包含一个或多个节点时，返回真❑appendChild(node)将node添加到childNodes的末尾❑removeChild(node)将node从childNodes中删除❑insertBefore(newnoderefnode)在childNodes中的refnode之前插入newnodeJs代码1.varco