dom文档对象模型..docVIP

文档对象模型（DOM） 文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。一般的，支持 Javascript的所有浏览器都支持DOM。本文所涉及的DOM，是指W3C定义的标准的文档对象模型，它以树形结构表示HTML和XML文档，定义了遍历这个树和检查、修改树的节点的方法和属性。 DOM眼中的HTML文档：树　　在DOM眼中，HTML跟XML一样是一种树形结构的文档， html是根（root）节点， head、 title、 body是 html的子（children）节点，互相之间是兄弟（sibling）节点； body下面才是子节点 table、 span、 p等等。如下图： 这个是不是跟XML的结构有点相似呢。不同的是，HTML文档的树形主要包含表示元素、标记的节点和表示文本串的节点。 注: 在 FireFox 浏览器中, 您可以通过菜单工具-DOM查看器来浏览文档的DOM结构; IE 浏览器中您需要下载微软的 Internet Explorer Developer Toolbar 来查看 DOM, 在BrowserDevTool下载此工具. HTML文档的节点 DOM下，HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型。这里列出Node常用的几种节点类型： 接口 nodeType常量 nodeType值 备注 Element Node.ELEMENT_NODE 1 元素节点 Text Node.TEXT_NODE 3 文本节点 Document Node.DOCUMENT_NODE 9 document Comment Node.COMMENT_NODE 8 注释的文本 DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 document片断 Attr Node.ATTRIBUTE_NODE 2 节点属性 DOM树的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象（对于HTML文档，这个就是html标记）。Javascript操作HTML文档的时候，document即指向整个文档， body、 table等节点类型即为Element。Comment类型的节点则是指文档的注释。具体节点类型的含义，请参考《Javascript权威指南》，在此不赘述。 　　Document定义的方法大多数是生产型方法，主要用于创建可以插入文档中的各种类型的节点。常用的Document方法有： ? 方法 描述 createAttribute() 用指定的名字创建新的Attr节点。 createComment() 用指定的字符串创建新的Comment节点。 createElement() 用指定的标记名创建新的Element节点。 createTextNode() 用指定的文本创建新的TextNode节点。 getElementById() 返回文档中具有指定id属性的Element节点。 getElementsByTagName() 返回文档中具有指定标记名的所有Element节点。 对于Element节点，可以通过调用getAttribute()、setAttribute()、removeAttribute()方法来查询、设置或者删除一个Element节点的性质，比如 table标记的border属性。下面列出Element常用的属性： 属性 描述 tagName 元素的标记名称，比如 p元素为P。HTML文档返回的tabName均为大写。 　　Element常用的方法： ? 方法 描述 getAttribute() 以字符串形式返回指定属性的值。 getAttributeNode() 以Attr节点的形式返回指定属性的值。 getElementsByTabName() 返回一个Node数组，包含具有指定标记名的所有Element节点的子孙节点，其顺序为在文档中出现的顺序。 hasAttribute() 如果该元素具有指定名字的属性，则返回true。 removeAttribute() 从元素中删除指定的属性。 removeAttributeNode() 从元素的属性列表中删除指定的Attr节点。 setAttrib