javascript中DOM编程

来源：互联网发布：老男孩linux运维pdf 编辑：程序博客网时间：2024/04/28 10:51

DOM在javascript中是比较重要的一个模块，它把HTML视为树状结构的元素，我们可以通过一级级的树节点关系来访问它。

DOM是HTML的文档对象模型（Document Object Model），表示文档和访问、操作构成文档的各种元素的应用程序接口(API).它给予开发者空前的对HTML的访问能力，并使开发者能将ＨＴＭＬ作为ＸＭＬ文档来处理和查看。DOM将HTML视为树状结构的元素，所有元素以及他们的文字和属性可通过DOM树来操作与访问。

节点的层次

Document：最顶层的节点，所有的其他节点都是附属它的。

Element：标识起始标签和结束标签之间的内容，例如<tag></tag>或<tag />。是唯一可以同时包含特性

和子节点的节点类型。

NODE接口的属性和方法

属性/方法

返回类型

说明

nodeName

String

节点的名字，根据节点的类型而定义

nodeValue

String

节点的值，根据节点的类型而定义

nodeType

Number

节点的类型常量值之一

ownerDocument

Document

指向这个节点所属的文档

firstChild

Node

指向在childNodes中的第一个节点

lastChild

Node

指向在childNodes中的最后一个节点

childNodes

NodeList

所有子节点的列表

previousSibling

Node

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

hasChildNodes()

Boolean

当childNodes包含一个或多个节点时，返回真

Attributes

NamedNodeMap

包含了一个元素的特性的attr对象；仅用于Element节点

appendChild

Node

将node添加到childNodes的末尾

removeChild

Node

删除node

replaceChild(newnode,oldnode)

Node

替换node，即将oldnode替换成newnode

insertBefore(newnode,refnode)

Node

在childNodes中的refnode前插入newnode

NodeList：节点数组，按照数组进行索引；用来表示一个元素的子节点。

NamedNodeMap：同时用数值和名字进行索引的节点表；用于表示元素特征。

使用DOM

eg：

 1  <html>
 2   <head>
 3   <title>DOM</title>
 4   </head>
 5   <body>
 6         <p>Hello word</p>
 7         <p>DOM Example</p>
 8         <p>learning to use the DOM</p>
 9  </body>
10   </html>

要访问<html />元素，可以使用Document的documentElement属性：

var oHtml=document.documentElement;
  var ohead=oHtml.firstNodes;        或            var ohead=oHtml.childNodes[0]     或   oHtml.childNodes.item[0]
  var obody=oHtml.lastNodes;         或            var ohead=oHtml.childNodes[0]     或   oHtml.childNodes.item[0]

也可以用 var obody=oHtml.body;

使用childNodes.length属性来获取字节点的数量。

则：

 ohead.parentNode=oHtml;    obody.parentNode=oHtml;    obody.previousSibling=ohead;    ohead.nextSibling=obody;    ohead.owerDocument=document.

处理属性

Node接口已具有attributes方法，且已经被所有类型的节点继承，然而，只有Element节点才能有属性，Element节点的ttributes属性起始是NamedNodeMap，它提供一些用于访问和处理其内容的方法：

1.getNamedItem(name)：返回nodeName属性值等于name的节点；

2.removeNameItem(name)：删除nodeName属性值等于name的节点；

3.setnamedItem(node)：将node添加到列表中，按其nodeName属性进行索引；

4.item(pos)：跟NodeList一样，返回在位置pos的节点。

当NodeNamedMap用于表示属性时，对于每个节点，它的nodeName属性被设置为属性名称，而nodeValue属性被设置为属性的值。

Eg:

<p style="color:red" id="p1">hello world</p>

加入变量op包含指向这个元素的一个引用。于是可以这样访问ID属性的值：

varsid=op.attributes.getnamedItem("id").nodeValue;

或

var sid=op.attributes.item(1).nodeValue;

改变id属性：

op.attributes.getNamedItem("id").nodeValue="newsid";

Attr节点也有一个完全等同于nodeValue属性的value属性，并且有name属性和nodeName属性保持同步，一样的，可以通过这些属性进行修改更新：

getAttribute(name);

setAttribute(name,newValue);

removeAttribute(name);

这些方法可以直接处理属性值，完全地隐藏attr节点，所以，通过可通过下面获取前面用的<p />的id属性：

Var sid=op.getAttribute("id");

Op.setAttribute("id","newid");

访问指定节点

1.getElementsByTagName():

返回一个包含所有的tagName属性等于指定值的元素的NodeList。在Element对象中，tagName属性总是等于小于号之后紧随的名称。如<img/>的tagName是"img"。

varoImags=document.getElementByName("img") //将所有图形都存放于oImags

alert(oImags[0].tagName); //输出"img"

获取一个段落下的所有图像：

var ops=document.getElementsByTagName("p");

var oImgsIp=ops[0].getElementByTagName("img");

获取document中包含的所有元素：

var oAllElement=document.getElementsByTagName("*");

2.getElementsByName():

获取所有name属性等于指定值的元素。

eg：

function output()

{

var oRadios=document.getElementsByName("color");

alert(oRadios[1].getAttribute("value"));

}

</script>

</HEAD>

<BODY>

<legend>请选择你喜欢的颜色：</legend>

<input type="radio" name="color" value="green"/>green<br/>

</fieldset>

</BODY>

3.getElementsById():

var odiv1=document.getElementById("div1");

odiv1.innerText="hello";

创建和操作节点

1.创建节点：

createDocumentFragment()、createElement()和createTextNode();

2.createElement()、createTextNode()和appendChild()方法：

eg:

var op=document.createElement("p");

op.otext=document.createTextNode("hello");

op.appendChild(otext);

document.body.appendChild(op); //将节点添加到文档节点中

3.removeChild()、replaceChild()和insertBefore()方法：

删除指定的节点，参数为要删除的节点。

var op=document.body.getElementsByTagName("p")[0];

document.body.removeChild(op); //删除该节点

替换：

var newp=document.createElement("p");

var newText=document.createTextNode("hello!");

newp.appendChild(newText);

var oldp=document.body.getElementsByTagName("p")[0];

oldp.parentNode.replaceChild(newp,oldp);

插入：

document.body.insertBefore(newp,oldp);

4.createFragment()：

创建一个文档碎片，当要想document添加大量数据时，将所有的新节点添加到其上，然后把文档碎片内容一次性添加到document中。

eg：

var arrText=["1","2"…...];

varoFragment=document.createDocumentFrage(); //创建文档碎片

for(var i=0;i<arrText.length;i++)

{

var op=document.createElement("p");

Var otext=document.createTextNode(arrText[i]);

op.appendChild(otext);

oFragment.appendChild(op);

}

Document.body.appendChild(oFragment);