DOM基础

DOM基础

一、      节点

当谈论DOM树(文档)的时候，实际上也是节点的层次。DOM定义了Node的接口哦以及许多种节点类型来表示XML节点的多个方面：下面是所有DOM节点的类型

1、 Document   --最顶层的节点，所有其他的节点都附属于它

2、 Documentype --DTD引用的对象表现形式

3、 DocumentFragment –可以像Document一样保存其他节点

4、 Element    --表示起始标签和结束标签之间的内容，这是唯一可以同时包含特性和子节点的节点类型

5、 Attr     --代表一对特性名和特性值。这个节点类型不能包含子节点

6、 Text   --代表XML文档中的在起始标签和结束标签之间，或者CData Section内包含的普通文本。这个节点不能包含子节点

7、 CDataSection --<![CDATA[]]的对象表现形式。这个节点类型仅能包含文本节点text节点作为子节点

8、 Comment --代表XML注释，这个节点类型不能包含子节点

9、 ProcessingInstruction

10、              Entity

11、              EntityReference

12、              Notation

考虑下面一个xml文档

<?xmlversion="1.0"encoding="utf-8" ?><Employees>

    <!--only employee-->

    <Employee>

        <name>Michael Smith</name>

        <position>Software Engineer</position>

        <comments>

            <![CDATA[

                His birthday is on 8/14/68.

            ]]>

        </comments>

    </Employee>

</Employees>

       这个xml文档用DOM树表示为，其中粗体字表示的为节点类型。

Node接口定义了对应不同节点类型的12个常量，

1、 Node.Element_Node(1)

2、 Node.ATTRIBUTE_NODE(2)

3、 Node.TEXT_NODE(3)

4、 Node.CDATA_SECTION_NODE(4)

5、 Node.ENTITY_REFERENCE_NODE(5)

6、 Node.ENTITY_NODE(6)

7、 Node.PROCESSING_NODE(7)

8、 Node.COMMENT_NODE(8)

9、 Node.DOCUMENT_NODE(9)

10、              Node.DOCUMENT_TYPE_NODE(10)

11、              Node.DOCUMENT_FRAGMENT_NODE(11)

12、              Node.NOTATION_NODE(12)

NODE接口定义了一些所有节点类型都包含的特性和方法

此外还有2个助手对象

1、 NodeList –节点数组，按照数值进行索引

2、 NamedNodeMap 同时用数值和名字进行索引的节点表。用于元素特性。

二、      处理特性

Node接口具有attributes属性，且被所有类型的节点继承，只有element节点才能有特性。element节点的attributes属性其实是NamedNodeMap,它提供了用于访问和处理其内容的方法:

l         getNamedItem(name) -返回node ，此node的Name属性值等于name的节点

l         removeNamedItem(name) –删除node, 此node的Name属性值等于name的节点

l         setNameItem(node)   --将node添加到列表中，按其nodeName属性值进行索引

l         item(pos)   --像nodelist一样，返回在位置pos的节点

由于这些返回的都是NameNodeMap,因此要访问其中的值还需要使用nodeValue,为了方便dom提供下面三种方法：

l         getAttribute(name) =attributes.getNameItem(name).nodeValue

l         setAttribute(name,newvalue)=attributes.getNameItem(name).nodeValue=newvalue;

l         removeAttribute(name)   =attributes.removeNamedItem(name)

三、HTML 中的dom特性
    下面是一段使用HTMLdom特性的和使用通用dom方法创建表格的script

<script type="text/javascript">
//    var demo=document.getElementById("demo");
//    var info=document.getElementById("info");
//    info.innerHTML=demo.attributes.getNamedItem("style").nodeValue;
/**//*          下面两行用于注释使用哪种dom结构，第一行为使用一般通用的dom结构，第2行使用html dom结构*/
       var HTMLDOM;
//       var HTMLDOM="defined";
       var arrText=[];
       for(var i=0;i<10;i++)
       {
           arrText[i]=i.toString();
       }
       var of=document.createDocumentFragment();
       for(var j=0;j<10;j++)
       {
            var op=document.createElement("p");
            var ot=document.createTextNode(arrText[j]);
            op.appendChild(ot);
            document.getElementById("info").appendChild(op);
//            of.appendChild(op);
       }
//       document.getElementById("info").appendChild(of);
       if(undefined==HTMLDOM)
       {
           var table=document.createElement("table");
           table.setAttribute("border",1);
           table.setAttribute("width","100%");
           var tbody=document.createElement("tbody");
           for(var i=0;i<2;i++)
           {
                var tr=document.createElement("tr");
                for(j=0;j<2;j++)
                {
                    var td=document.createElement("td");
                    var text=document.createTextNode("Cell "+(j+1).toString()+","+(i+1).toString());
                    td.appendChild(text);
                    tr.appendChild(td);
                }
                tbody.appendChild(tr);
           }
           table.appendChild(tbody);
            var cap=document.createElement("caption");
            cap.appendChild(document.createTextNode("using Generic DOM"));
            table.appendChild(cap);
           document.getElementById("table").appendChild(table);
       }
       else{
            var table=document.createElement("table");
            table.setAttribute("border",1);
            table.setAttribute("width","100%");
            var cap=document.createElement("caption");
            cap.appendChild(document.createTextNode("using HTML DOM"));
            table.appendChild(cap);            
            var tbody=document.createElement("tbody");
            tbody.insertRow(0);
            tbody.rows[0].insertCell(0);
            tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
            tbody.rows[0].insertCell(1);
            tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
            tbody.insertRow(1);
            tbody.rows[1].insertCell(0);
            tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
            tbody.rows[1].insertCell(1);
            tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
            table.appendChild(tbody);
            document.getElementById("table").appendChild(table);
       }
</script>