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

最新推荐文章于 2023-02-02 15:51:16 发布

天咫

最新推荐文章于 2023-02-02 15:51:16 发布

阅读量786

点赞数

文章标签： DOM javascript

本文链接：https://blog.csdn.net/vampire_vivan/article/details/32326767

版权

前几天，看了《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);	//找到指定位置的item

	nodeChgArea.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，还不太熟悉，所以本文到这就结束了……