Edgewall Software

1.DOM的概念

网页是一种结构化的文档，使用一组预定义的XML或HTML标签进行标记。

DOM是一组用来描述脚本怎样与结构化文档进行交互和访问的Web标准。

DOM不是javascript，DOM不是DHTML，它是一个标准。

代码： 

 <html>
   <head>
   <title>HTML DOM</title>
   </head>
   <body>
   <h1>DOM的结构</h1>
   <p><a href="href">链接</a></p>
   </body>
 </html>

表示为DOM结构就如下图：

2.DOM中的层次

DOM继承关系如下图：

DOM中最基础的节点为Node。

节点种类解释产生方式
Element 表示起始标签和结束标签之间的内容，例如<tag></tab>或者<tag/>。这是唯一可以同时包含特性和子节点的节点类型。 document.createElement(tagName)
Attr代表一对特性名和特性值。这个节点类型不能包含子节点。 document.createAttribute(name)
Text 代表XML文档中的在起始标签和结束标签之间，或者CDataSection内包含的普通文本。这个节点类型不能包含子节点。document.createTextNode(text)
Comment 代表XML注释。这个节点不能包含子节点。 document.createComment(text)
Document 最顶层的节点，所有的其他节点都是附属于它的 一直存在
DocumentFragment?可以像Document一样来保存其他节点。 document.createDocumentFragment()
DocumentType?DTD引用（使用<!DOCTYPE>语法）的对象表现形式，它不能包含子节点。 ?
CDataSection<![CDATA[]]>的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。 document.createCDataSection(data)
Entity 表示在DTD中的一个实体定义，例如<!ENTITY foo"foo">。这个节点类型不能包含子节点。 ?
EntityReference?代表一个实体引用，例如&quot;。这个节点类型不能包含子节点。 document.createEntityReference(name)
ProcessingInstruction? 目标的名称。document.createProcessingInstruction(target,data)
Notation 代表在DTD中定义的记号。这个很少用到。 ?

3.常用对象及方法

核心对象Document

1.它能创建其它节点的工作

各种个样的document.createXXX()方法

2.查找Element对象,主要用到两个方法

document.getElementById(id);

document.getElementsByTagName(tagName);

常用方法：

createElement()、createTextNode()、appendChild() 

<html>
    <head>
        <title>createElement() Example</title>
        <script type="text/javascript">
            function createMessage() {
                var oP = document.createElement("p");
                var oText = document.createTextNode("Hello World!");
                 oP.appendChild(oText);
                 document.body.appendChild(oP);
             }
        </script>
    </head>
    <body onload="createMessage()">
    </body>
</html>

removeChild()、replaceChild()、insertBefore()

删除节点 

<html>
    <head>
        <title>removeChild() Example</title>
        <script type="text/javascript">
            function removeMessage() {
                var oP = document.body.getElementsByTagName("p")[0];
                 oP.parentNode.removeChild(oP);
             }
        </script>
    </head>
    <body onload="removeMessage()">
        <p>Hello World!</p>
    </body>
</html>

替换 

<html>
    <head>
        <title>replaceChild() Example</title>
        <script type="text/javascript">
            function replaceMessage() {
                var oNewP = document.createElement("p");
                var oText = document.createTextNode("Hello Universe!");
                 oNewP.appendChild(oText);
                var oOldP = document.body.getElementsByTagName("p")[0];
                 oOldP.parentNode.replaceChild(oNewP, oOldP);
             }
        </script>
    </head>
    <body onload="replaceMessage()">
        <p>Hello World!</p>
    </body>
</html>

新文本添加到旧文本之前 

<html>
    <head>
        <title>insertBefore() Example</title>
        <script type="text/javascript">
            function insertMessage() {
                var oNewP = document.createElement("p");
                var oText = document.createTextNode("Hello Universe!");
                 oNewP.appendChild(oText);
                var oOldP = document.getElementsByTagName("p")[0];
                 document.body.insertBefore(oNewP, oOldP);
             }
        </script>
    </head>
    <body onload="insertMessage()">
        <p>Hello World!</p>
    </body>
</html>

Attachments