改变节点一般指改变元素内部的文本，或改变元素的属性值。这两种情况都可以在访问到文本节点或属性节点后，为其nodeValue赋值来实现更改。对于后者，还可以
在元素节点上调用setAttribute方法来实现属性值的改变。
示例：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>使用DOM改变节点</title> <script type="text/javascript"> function changeSize(){ var target = document.getElementById("txt_1"); //设置列的属性值为50 target.setAttribute("cols", "50"); //设置行的属性值为6 先访问属性节点集合，然后通过getNamedItem定位属性名， target.attributes.getNamedItem("rows").nodeValue = "6"; } function changeText() { var target = document.getElementById("lbl_1"); //先访问该元素节点的子节点，子节点个数可以是多个，因此用了数组下标访问指定元素。然后通过nodeValue修改其值 target.childNodes[0].nodeValue = "您的个人简历："; } </script> </head> <body> <form action=""> <label for="txt_1">多行文本框的标签文字</label> <textarea ></textarea> <input type="button" value="改变多行文本域的尺寸" /> <input type="button" value="改变标签的文字" /> </form> </body> </html>
3.3删除节点
删除节点一般指从元素节点内部删除子元素或元素包含的文本，也可实现对元素节点包含的属性节点的删除
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>使用DOM删除节点</title> <script type="text/javascript"> function doRemoveNode() { //label标签元素节点 var targetLbl = document.getElementById("lbl_1"); //从label元素节点中删除第一个子节点 targetLbl.removeChild(targetLbl.firstChild); //文档元素，通过访问文档元素集合，指定位置元素获得多行文本域 var tagetArea = document.documentElement.getElementsByTagName("textarea")[0]; //文档中第一个form标签元素节点 var tagetForm = document.documentElement.getElementsByTagName("form")[0]; //删除文档中第一个form标签中的textarea tagetForm.removeChild(tagetArea); } </script> </head> <body> <form> <label for="txt_1">多行文本框的标签文字</label> <textarea rows="" cols=""></textarea> <input type="button" value="删除节点"/> </form> </body> </html>
四、小结
DOM是文档在内存中表现的树形结构，称为DOM树；DOM是W3C制定的访问文档的标准方法和属性，称为DOM接口
文档中的每个数据在树形结构上表示为一个节点，由所有节点组成的树形结构称为节点树或DOM树
节点有多种类型，常见的有元素节点、属性节点、文本节点、根节点、等。节点有名称和值，但不同类型的节点其名称和值含义不同
createElement()方法用于创建元素节点，createAttribute()方法用于创建属性节点，createTextNode()方法用于创建文本节点，向元素节点内添加子元素节点或文本节点，可使用appendChild()方法。还有insertAfter()和insertBefore()方法用于在特定的节点前后插入新的节点。需要注意的是为元素节点添加属性节点的方法却是setAttributeNode()方法。
要修改文本节点的值或更改属性节点的值，应使用节点的nodeValue属性
删除节点使用removeChild()方法。
关于JavaScript利用HTML DOM进行文档操作的方法，小编就给大家介绍这么多，希望对大家有所帮助！
您可能感兴趣的文章: