欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript DOM学习笔记5——创建和操作节点

程序员文章站 2022-06-20 21:06:22
...

        之前学习了DOM中各种节点的访问方法，DOM所包含的内容远不止如此，DOM编程还包括当DOM树已经构建起来之后再添加节点。

        1.创建新节点

        document对象中包含了多个创建各种节点的方法。《JavaScript高级程序设计》中专门设计了一个表格，来说明每个方法的原型、作用、IE、Firefox、Opera、Safari等浏览器的支持情况。一眼望去几乎都是一些们获得支持的方法（很可能是因为这本书出的时候还很早，各种浏览器的版本都还很小）。

        创建节点最有用的方法主要有：CreateElement()、CreateTextNode()，下面分别学习。

        2.CreateElement()、CreateTextNode()、appendChild()

        现在有如下的需求：在一个HTML的DOM树加载完成之后，添加一个<p>元素，元素的文本内容是"A New Element"

。原始的html如下：

 

<html>
	<head>
		<title>createElement() Demo</title>
	</head>
	<body>
	</body>
</html>

 现在要把<p>A New Element</p>添加到HTML的body中。步骤如下：

 

//第一步：创建p元素
var oP = document.createElement("p");
//第二步：创建文本节点
var oTxt = document.createTextNode("A New Element");
//第三步：将文本节点加到p元素的子元素列表中
oP.appendChild(oTxt);
//第四步：将p元素添加到body的子元素列表中
document.body.appendChild(oP);

 为了显示出添加的效果，在body中添加一个按钮，一点击就执行上述代码。完整的例子如下：

 

<html>
	<head>
		<title>createElement() Demo</title>
		<script type="text/javascript">
			function createElementTest() {
				//第一步：创建p元素
				var oP = document.createElement("p");
				//第二步：创建文本节点
				var oTxt = document.createTextNode("A New Element");
				//第三步：将文本节点加到p元素的子元素列表中
				oP.appendChild(oTxt);
				//第四步：将p元素添加到body的子元素列表中
				document.body.appendChild(oP);
			}
		</script>
	</head>
	<body>
		<input type="button" value="添加" onclick="createElementTest()"/>
	</body>
</html>

        3. removeChild(),replaceChild(),insertBefore()方法

        既然能添加节点，自然也能删除节点。要删除某个节点，可以调用其parentNode的removeChild()方法删除掉该节点。依然以上面的例子来学习。

 

//第一步：获取p元素
var oP = document.body.getElementsByTagName("p").item(0);
//第二步：获取p元素的父节点
var pNode = oP.parentNode;
//第三步：调用父节点的删除方法
pNode.removeChild(oP);

         完整的代码如下：

 

<html>
	<head>
		<title>createElement() Demo</title>
		<script type="text/javascript">
			function createElementTest() {
				//第一步：创建p元素
				var oP = document.createElement("p");
				//第二步：创建文本节点
				var oTxt = document.createTextNode("A New Element");
				//第三步：将文本节点加到p元素的子元素列表中
				oP.appendChild(oTxt);
				//第四步：将p元素添加到body的子元素列表中
				document.body.appendChild(oP);
			}

			function removeChildTest() {
				//第一步：获取p元素
				var oP = document.body.getElementsByTagName("p").item(0);
				//第二步：获取p元素的父节点
				var pNode = oP.parentNode;
				//第三步：调用父节点的删除方法
				pNode.removeChild(oP);
			}
		</script>
	</head>
	<body>
		<input type="button" value="添加" onclick="createElementTest()"/>
		<input type="button" value="删除" onclick="removeChildTest()"/>
	</body>
</html>

        此外，我们也可以不删除节点，而只是替换节点。当然，这个也需要通过调用被替换节点的父节点的方法来实现。现在我们要吧p元素的内容替换成Hello，World！。replaceChild()方法有两个参数：新节点，被替换节点。代码如下：

 

//第一步：创建需要替换的节点
var newTxt = document.createTextNode("Hello,World!");
//第二步：获取到被替换的节点
var oldTxt = document.body.getElementsByTagName("p").item(0).childNodes.item(0);
//第三步：获取到需要被替换节点的父节点
var oP = document.body.getElementsByTagName("p").item(0);
//第四步：替换文本节点
oP.replaceChild(newTxt,oldTxt);

        再添加一个按钮来触发替换文本的方法：

 

<html>
	<head>
		<title>createElement() Demo</title>
		<script type="text/javascript">
			function createElementTest() {
				//第一步：创建p元素
				var oP = document.createElement("p");
				//第二步：创建文本节点
				var oTxt = document.createTextNode("A New Element");
				//第三步：将文本节点加到p元素的子元素列表中
				oP.appendChild(oTxt);
				//第四步：将p元素添加到body的子元素列表中
				document.body.appendChild(oP);
			}

			function removeChildTest() {
				//第一步：获取p元素
				var oP = document.body.getElementsByTagName("p").item(0);
				//第二步：获取p元素的父节点
				var pNode = oP.parentNode;
				//第三步：调用父节点的删除方法
				pNode.removeChild(oP);
			}
			function replaceChildTest() {
				//第一步：创建需要替换的节点
				var newTxt = document.createTextNode("Hello,World!");
				//第二步：获取到被替换的节点
				var oldTxt = document.body.getElementsByTagName("p").item(0).childNodes.item(0);
				//第三步：获取到需要被替换节点的父节点
				var oP = document.body.getElementsByTagName("p").item(0);
				//第四步：替换文本节点
				oP.replaceChild(newTxt,oldTxt);
			}
		</script>
	</head>
	<body>
		<input type="button" value="添加" onclick="createElementTest()"/>
		<input type="button" value="删除" onclick="removeChildTest()"/>
		<input type="button" value="替换" onclick="replaceChildTest()"/>
	</body>
</html>

        最后，我们还可以在一个节点之前插入另一个节点。这就是方法insertBefore()的作用。这个方法也有两个参数：新节点和插在哪个节点之前。接着上面的例子，我们在第一个p元素之前插入另一个p元素，元素的文本是a new element。

代码如下：

 

var newNode = document.createElement("p");
var newTxt = document.createTextNode("a new element");
newNode.appendChild(newTxt);
var oldNode = document.body.getElementsByTagName("p")[0];
var pNode = oldNode.parentNode;
pNode.insertBefore(newNode,oldNode);

完整的代码如下：

 

<html>
	<head>
		<title>createElement() Demo</title>
		<script type="text/javascript">
			function createElementTest() {
				//第一步：创建p元素
				var oP = document.createElement("p");
				//第二步：创建文本节点
				var oTxt = document.createTextNode("A New Element");
				//第三步：将文本节点加到p元素的子元素列表中
				oP.appendChild(oTxt);
				//第四步：将p元素添加到body的子元素列表中
				document.body.appendChild(oP);
			}

			function removeChildTest() {
				//第一步：获取p元素
				var oP = document.body.getElementsByTagName("p").item(0);
				//第二步：获取p元素的父节点
				var pNode = oP.parentNode;
				//第三步：调用父节点的删除方法
				pNode.removeChild(oP);
			}
			function replaceChildTest() {
				//第一步：创建需要替换的节点
				var newTxt = document.createTextNode("Hello,World!");
				//第二步：获取到被替换的节点
				var oldTxt = document.body.getElementsByTagName("p").item(0).childNodes.item(0);
				//第三步：获取到需要被替换节点的父节点
				var oP = document.body.getElementsByTagName("p").item(0);
				//第四步：替换文本节点
				oP.replaceChild(newTxt,oldTxt);
			}
			function insertBeforeTest() {
				var newNode = document.createElement("p");
				var newTxt = document.createTextNode("a new element");
				newNode.appendChild(newTxt);
				var oldNode = document.body.getElementsByTagName("p")[0];
				var pNode = oldNode.parentNode;
				pNode.insertBefore(newNode,oldNode);
			}
		</script>
	</head>
	<body>
		<input type="button" value="添加" onclick="createElementTest()"/>
		<input type="button" value="删除" onclick="removeChildTest()"/>
		<input type="button" value="替换" onclick="replaceChildTest()"/>
		<input type="button" value="插入" onclick="insertBeforeTest()"/>
	</body>
</html>
 

参考书目：

 

《JavaScript高级编程》

 

 

 

相关标签： JavaScript DOM 创建删除插入修改节点

上一篇： 广州特产有哪些 去广州必带的特产大全

下一篇： 刷新子frame

推荐阅读