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>

<name>Michael Smith</name>

<position>Software Engineer</position>

<![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

// 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>

DOM基础

一、 节点

二、 处理特性

一、节点

二、处理特性