JavaScript DOM

来源：互联网发布：vb:是什么意思编辑：程序博客网时间：2024/04/30 17:17

由于DOM是树形结构，所以一个节点被抽象为对象Node，这是DOM的核心对象。Node的种类一共有12种，通过Node.nodeType的取值来确定。

Node.ELEMENT_NODE (1)

Node.ATTRIBUTE_NODE (2)

Node.TEXT_NODE (3) //<![CDATA[ ]]>中括着的纯文本，它没有子节点

Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode

Node.ENTITY_REFERENCE_NODE (5)

Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>，无子节点

Node.PROCESSING_INSTRUCTION_NODE (7) //PI，无子节点

Node.COMMENT_NODE (8)

Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点

Node.DOCUMENT_TYPE_NODE (10) //DTD，<!DOCTYPE………..>

Node.DOCUMENT_FRAGMENT_NODE (11)

Node.NOTATION_NODE (12) //DTD中的Nation定义

Node接口包含的属性

nodeName属性将返回一个字符串，其内容是给定节点的名字。如果节点是元素节点，返回这个元素的名称；如果是属性节点，返回这个属性的名称；如果是文本节点，返回一个内容为#text 的字符串；

nodeType 属性将返回一个整数，这个数值代表给定节点的类型；

nodeValue 属性将返回给定节点的当前值.如果节点是元素节点，返回null；如果是属性节点，返回这个属性的名称；如果是文本节点，返回文本节点的内容；

ownerDocument 指向这个节点所属的文档；

attributes 包哈勒代表一个元素的特性的Attr对象；仅用于Element节点；

childNodes 所有子节点的列表；

firstChild 指向在childNodes列表中的第一个节点；

lastChild 指向在childNodes列表中的最后一个节点；

nextSibling 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null；

previousSibling 指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null；

parentNode 返回一个给定节点的父节点；

hasChildNodes() 当childNodes包含一个或多个节点时，返回真；

appendChild(node) 将node添加到childNodes的末尾；

removeChild(node) 将node从childNodes中删除；

insertBefore(newnode refnode) 在childNodes中的refnode之前插入newnode。

实际应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Dom Example</title>    <script type="text/javascript">        var oHtml = document.documentElement; //可以直接访问<html>元素        document.write("节点名称 ：" + oHtml.nodeName + "<br/>");        document.write("节点类型 ：" + oHtml.nodeType + "<br/>");        document.write(oHtml.ownerDocument + "<br/>");        document.write(oHtml.nextSibling + "<br/>");        document.write(oHtml.previousSibling + "<br/>");        document.write(oHtml.previousSibling.nodeName + "<br/>")        document.write(oHtml.firstChild.nextSibling + "<br/>");        document.write(oHtml.firstChild.previousSibling + "<br/>");        document.write(oHtml.firstChild.nodeValue + "<br/>");        document.write(oHtml.firstChild.nodeName + "<br/>");        document.write(oHtml.firstChild.firstChild.nodeName + "<br/>");        document.write(oHtml.firstChild.lastChild.nodeName + "<br/><br/>");        document.write(oHtml.lastChild + "<br/>");        document.write(oHtml.lastChild.firstChild + "<br/>");        document.write(oHtml.lastChild.firstChild.nodeName + "<br/>");        document.write(oHtml.lastChild.lastChild + "<br/>");        document.write(oHtml.lastChild.lastChild.nodeName + "<br/><br/>");        document.write(oHtml.childNodes.item(0) + "<br/>");        document.write(oHtml.childNodes[0] + "<br/>"); //简写,也有同样的结果是HEAD节点          document.write(oHtml.childNodes.item(1) + "<br/>");        document.write(oHtml.childNodes[1] + "<br/>");        var oHead = oHtml.firstChild;        var oBody = document.body;        document.write(oHead.parentNode == oHtml );        document.write(oBody.parentNode == oHtml );        document.write(oBody.previousSibling == oHead );        document.write(oHead.nextSibling == oBody );        document.write(oHead.ownerDocument == document);    </script></head><body>    <p>        Hello World!</p>    </body></html>

输出结果：

节点名称：HTML
节点类型：1
[object HTMLDocument]
null
[object HTMLCommentElement]
#comment
[object HTMLBodyElement]
null
null
HEAD
TITLE
SCRIPT

[object HTMLBodyElement]
[object Text]
#text
[object HTMLBRElement]
BR

[object HTMLHeadElement]
[object HTMLHeadElement]
[object HTMLBodyElement]
[object HTMLBodyElement]
truetruetruetruetrue

Hello World!