JavaScript对网页中节点的操作(DOM)

来源：互联网发布：python 自动化安卓编辑：程序博客网时间：2024/06/09 19:42

前几天，看了《JavaScript基础教程》的第10章，这两天发现又忘得差不多了，所以来复习下。

第10章主要介绍的是DOM标准(见百度：http://baike.baidu.com/subview/14806/8904138.htm?fr=aladdin)，并且通过js动态地访问和更新文档的内容、结构和样式。本文用js实现在页面中添加、删除、替换、插入一个节点。效果如下图：

HTML文件：

<!DOCTYPE html><html><head><title>Replacing Nodes</title><script src="script05.js"></script></head><body><form action="#"><p><textarea id="textArea" rows="5" cols="30"></textarea></p><p><label><input type="radio" name="nodeAction">Add node</label><label><input type="radio" name="nodeAction">Delete node</label><label><input type="radio" name="nodeAction">Insert before node</label><label><input type="radio" name="nodeAction">Replace node</label></p>Paragraph #: <select id="grafCount"></select><input type="submit" value="Submit"><input type="reset" value="Reset"></form><div id="modifiable"> </div></body></html>

在id="modifiable"的<div>中进行节点操作(元素节点可以包含文本节点也可以包含元素节点)

JavaScript文件(过程式)：

window.onload = initAll;var nodeChgArea;function initAll() {document.getElementsByTagName("form")[0].onsubmit = nodeChanger;nodeChgArea = document.getElementById("modifiable");}function addNode() {//添加var inText = document.getElementById("textArea").value;var newText = document.createTextNode(inText);//创建一个包含文本框中内容的文本节点var newGraf = document.createElement("p");//创建一个元素节点newGraf.appendChild(newText);//文本节点放到元素节点<p>中nodeChgArea.appendChild(newGraf);//再追加到nodeChgArea中(id为modifiable的<div>中)}function delNode() {//删除var grafChoice = document.getElementById("grafCount").selectedIndex;//删除节点的位置var allGrafs = nodeChgArea.getElementsByTagName("p");//从nodeChgArea中取出<p>数组var oldGraf = allGrafs.item(grafChoice);//找到指定位置的itemnodeChgArea.removeChild(oldGraf);}function insertNode() {//插入var grafChoice = document.getElementById("grafCount").selectedIndex;var inText = document.getElementById("textArea").value;var newText = document.createTextNode(inText);var newGraf = document.createElement("p");newGraf.appendChild(newText);var allGrafs = nodeChgArea.getElementsByTagName("p");var oldGraf = allGrafs.item(grafChoice);nodeChgArea.insertBefore(newGraf,oldGraf);}function replaceNode() {//替换var grafChoice = document.getElementById("grafCount").selectedIndex;var inText = document.getElementById("textArea").value;var newText = document.createTextNode(inText);var newGraf = document.createElement("p");newGraf.appendChild(newText);var allGrafs = nodeChgArea.getElementsByTagName("p");var oldGraf = allGrafs.item(grafChoice);nodeChgArea.replaceChild(newGraf,oldGraf);}function nodeChanger()  {//点击Submit后触发var actionType = -1;var pGrafCt = nodeChgArea.getElementsByTagName("p").length;var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction;for (var i=0; i<radioButtonSet.length; i++) {if (radioButtonSet[i].checked) {actionType = i;}}switch(actionType) { //判断所选的单选按钮case 0:addNode();break;case 1:if (pGrafCt > 0) {delNode();break;}case 2:if (pGrafCt > 0) {insertNode();break;}case 3:if (pGrafCt > 0) {replaceNode();break}default:alert("No valid action was chosen");}document.getElementById("grafCount").options.length = 0; //每次对节点操作完，将下拉列表初始化，重新生成for (i=0; i<nodeChgArea.getElementsByTagName("p").length; i++) {document.getElementById("grafCount").options[i] = new Option(i+1);}return false;}

总得来说，其实操作思想都一样。另外，本文JavaScript提供的四种对节点操作的语句：

appendChild(node):插入新的子节点(元素)；

removeChile(node):删除子节点(元素)；

insertBefore(nownode,oldnode):新节点插在老节点前

看书上说：没有insertAfter()这个方法，要想在页面末尾添加，就要使用appendChild(node)方法；

removeChild(node):删除子节点(元素)。

书上还介绍了采用对象字面值格式实现上述功能的方法。第一次接触JSON，还不太熟悉，所以本文到这就结束了……

0 0