js中的文档对象模型应用

sunny — Wed, 17 Sep 2008 14:19:16 +0000

创建元素节点：document.createElement(“a”);

创建文本节点：document.createTextNode(“stw”);

文本节点的值可以通过nodeValue来获得。

添加文本节点或者是元素节点可以通过appendChild()来实现，这种方法是把刚加入的元素放在末尾的位置上。

1 var textnode=document.createTextNode(“stw”);
2 var elementnode=document.createElement(“a”);
3 elementnode.appendChild(textnode);

也可以把待插入节点放在某个节点之前，方法insertBefore可以实现，但是他有两个参数：第一个是待插入节点，第二个是现有的节点，该函数是将待插节点插入在现有节点之前。

例如：

HTML语言: 未插入之前的代码

1 id=“startLinks”>
2 id=“sirius” href=“sirius.html” >sirus
3

JavaScript语言: 实现在特定元素节点前面加入元素节点的语句

1 var textnode=document.createTextNode(“stw”);
2 var elementnode=document.createElement(“a”);
3 elementnode.appendChild(textnode);
4 var existnode=document.getElementById(“sirius”);
5 var parentnode=existnode.parentNode;
6 parentnode.insertBefore(elementnode,existnode);

删除元素节点或者文本节点可以用removeChild：例如要删除上面html中的之间的内容可以用：

JavaScript语言: 删除节点

1 var removenode=document.getElementById(“sirius”);
2 var parentnode=removenode.parentNode;
3 parentnode.removeChild(removenode);

元素属性值的读写：分别用getAttribute()和setAttribute（）来实现

JavaScript语言: 查找拥有特定属性值得所有元素

1 var inputs=document.getElementByTagName(“input”);
2 for(var i=0;i<inputs.length;i++)
3 {
4 if(inputs[i].getAttribute(“type”)==“checkbox”)
5 {….}
6 }

当然这里也可以用一个函数直接来实现对某个属性的元素，查该函数是：getElementByAttribute().

查找一个页面中的所有元素最简单的方法是getElementByTagName(“*”)，当然也可以直接用document.all。这个命令是所有浏览器都兼容的。
在一个含有多个表单的页面中要想准确的获取某个表单，可以利用该表单的id号来获取，例如：

HTML语言: 页面中的表单元素

1 id=“form1″ name=form1>
2 …
3
4 id=“form2″ name=form2>
5 ….
6

JavaScript语言: 准确定位表单元素代码：

1 var wantform=document.forms["form1"];

相信明天会更好 » DOM

js中的文档对象模型应用