创建元素节点:document.createElement(“a”);
创建文本节点:document.createTextNode(“stw”);
文本节点的值可以通过nodeValue来获得。
添加文本节点或者是元素节点可以通过appendChild()来实现,这种方法是把刚加入的元素放在末尾的位置上。
JavaScript语言: js添加文本节点和元素节点
1 var textnode=document.createTextNode(“stw”);
2 var elementnode=document.createElement(“a”);
3 elementnode.appendChild(textnode);
2 var elementnode=document.createElement(“a”);
3 elementnode.appendChild(textnode);
也可以把待插入节点放在某个节点之前,方法insertBefore可以实现,但是他有两个参数:第一个是待插入节点,第二个是现有的节点,该函数是将待插节点插入在现有节点之前。
例如:
HTML语言: 未插入之前的代码
1 <p id=“startLinks”>
2 <a id=“sirius” href=“sirius.html” >sirus </a>
3 </p>
2 <a id=“sirius” href=“sirius.html” >sirus </a>
3 </p>
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);
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中的<a></a>之间的内容可以用:
JavaScript语言: 删除节点
1 var removenode=document.getElementById(“sirius”);
2 var parentnode=removenode.parentNode;
3 parentnode.removeChild(removenode);
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 }
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 <form id=“form1″ name=form1>
2 …
3 </form>
4 <form id=“form2″ name=form2>
5 ….
6 </form>
2 …
3 </form>
4 <form id=“form2″ name=form2>
5 ….
6 </form>
JavaScript语言: 准确定位表单元素代码:
1 var wantform=document.forms["form1"];
2008/09/17 | sunny | 753 Views