`

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

JavaScriptDOM创建删除插入修改节点 
阅读更多

        之前学习了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高级编程》

 

 

 

1
顶
1
踩
分享到：
| 重学数据结构006——中缀表达式转后缀表达 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    比较详细的javascript DOM 学习笔记第1 2页.docx

    ### JavaScript DOM 学习笔记知识点总结 #### 一、DOM基础概述 DOM（Document Object Model）文档对象模型是一种处理可扩展标记语言的标准编程接口。它提供了结构化文档（如HTML和XML）的标准方法来访问、修改文档...

    js DOM学习笔记11

    JavaScript DOM 学习笔记 JavaScript DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，它提供了一种访问和操作文档结构和内容的方式。DOM 将文档表示为一个树状结构，其中每个节点都代表文档中的一个...

    javaScript DOM编程艺术2版学习笔记

    在这个学习笔记中，涵盖了从基础到高级的JavaScript和DOM操作技巧，一共涉及1~9章的内容。以下是对这些章节知识点的详细阐述： **第1章：JavaScript简介** 本章介绍了JavaScript的基本概念，包括它是一种解释型、弱...

    JS基本功DOM学习笔记

    在"Javascript_DOM学习笔记+代码"中，你可能会发现具体的示例代码和练习，这些可以帮助你更好地理解和实践上述概念。通过深入学习和实践，你将能够熟练地操纵网页内容，创建动态交互的Web应用。

    传播智客扬中科老师讲的DOM 学习笔记

    这一过程涉及了`insertRow`和`insertCell`方法的使用，展示了如何动态创建和插入DOM节点。 ### 动态生成DOM节点 第二个示例中，`createElement`方法被用来创建新的`&lt;tr&gt;`和`&lt;td&gt;`节点，然后将它们添加到DOM树中。...

    JavaScript-学习笔记.pdf

    以上是JavaScript学习笔记中提到的一些核心知识点，通过对这些知识点的理解和熟练应用，可以为进一步学习和掌握JavaScript打下坚实的基础。在实际开发过程中，结合具体的项目需求，这些知识会得到更深入的拓展和应用...

    JavaScript DOM编程艺术（中文第二版）学习笔记

    开发者可以使用不同的方法来获取和操作这些节点，比如： - `getElementById(id)`：根据ID获取元素节点。 - `getElementsByTagName(tagName)`：根据标签名获取元素节点的数组。 - `getElementsByClassName(className)...

    JavaScript_DOM编程—新版学习笔记.txt

    5. **`document.createTextNode()`**: 用于创建一个新的文本节点。 - **示例**： ```javascript var textNode = document.createTextNode("Hello World!"); ``` 6. **`document.createComment()`**: 用于创建一...

    javascript学习笔记1

    ### JavaScript 学习笔记1：数组、DOM与BOM简要总结 #### 数组方法概述 在JavaScript中，数组是一种非常重要的数据结构，用于存储多个值。数组对象提供了多种方法来帮助我们操作数组中的元素。 - **pop()**：从...

    JavaScript dom编程艺术：个人笔记.pdf

    了解DOM的树状结构，能够熟练地访问和修改DOM节点，包括创建、插入、删除和替换节点等。 3. 事件处理：事件处理是JavaScript与用户交互的核心。学习如何监听用户交互事件，比如点击、悬停、键盘输入等，并且掌握...

    比较详细的javascript DOM 学习笔记第1/2页

    本篇学习笔记主要探讨了DOM的基础知识，包括不同类型的节点以及如何访问和操作这些节点。 1. **DOM节点层次** - **Document**：作为整个文档的顶级节点，它包含了文档的全部内容。 - **DocumentType**：表示文档...

    DOM学习笔记

    **DOM学习笔记** DOM，全称为Document Object Model，是HTML和XML文档的一种标准表示方式，它将网页内容结构化为一个可编程的节点树。在DOM中，每个部分（如元素、属性、文本等）都有对应的对象，允许我们通过...

    JavaScript高级程序设计 学习笔记之DOM基础(五)

    这篇学习笔记主要围绕DOM基础展开，涵盖了JavaScript操作DOM的各种方法和技术。 在JavaScript中，DOM被视为一个树形结构，其中每个节点代表了页面上的一个元素、属性或文本。DOM的基础主要包括以下几个方面： 1. *...

    JavaScript达内学习笔记

    ### JavaScript达内学习笔记知识点详解 #### 一、JavaScript简介 1. **JavaScript**是由网景公司在1995年开发的一种脚本语言。它是一种轻量级的编程语言，无需编译，直接由浏览器解释执行。JavaScript的主要作用...

    JavaScript学习笔记之DOM基础操作实例小结

    总结，JavaScript DOM基础操作是前端开发的基础技能，理解和熟练运用子节点、父节点以及相关属性和方法，对于创建动态、响应式的Web应用至关重要。通过不断实践和学习，你可以逐步提高在这方面的专业能力。

    javascript学习笔记

    以上是对给定文件中JavaScript学习笔记的部分内容进行的详细解读，涵盖了JavaScript的基础知识、语法、数据类型、函数、对象、数组、DOM编程、AJAX以及JSON和jQuery的简介，旨在为初学者提供全面的入门指南。

    JavaScript学习笔记-适合初学者

    理解DOM是JavaScript进行网页动态更新的关键，文档可能会深入讲解如何遍历DOM树、选择和操作节点，以及如何使用事件监听器。 最后，"JavaScript.ppt"可能是JavaScript的演示文稿，包含了语言的主要知识点和实例，...

    蓝杰JavaScript学习笔记

    《蓝杰JavaScript学习笔记》是一份综合性的JavaScript学习资料，主要涵盖了JavaScript在网页动态操作、DOM操作以及事件处理等方面的基础知识。这篇笔记通过多个实例文件，如`dynamicCreateTable.htm`、`...

    DOM - 学习笔记

    此外，DOM还允许开发者访问和操作CSS样式，结合CSS（级联样式表）和JavaScript，可以实现动态HTML（DHTML），使得网页不仅有静态内容，还能根据用户交互改变样式和内容，提供丰富的用户体验。例如，通过改变元素的...

Magicbox
Global site tag (gtag.js) - Google Analytics