`

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页

    一、DOM基础1.节点(node)层次Document－－最顶层的节点，所有的其他节点都是附属于它的。DocumentType－－DTD引用（使用&lt;!DOCTYPE&gt;语法）的对象表现形式，它不能包含子节点。DocumentFragment－－可以像Document...

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

    本文实例讲述了JavaScript DOM基础操作。分享给大家供大家参考，具体如下： 一、子节点 1、元素节点、文本节点 实例01 html &lt;body&gt; 文本节点1 &lt;li&gt;&lt;/li&gt; 文本节点2&lt;li&gt;&lt;/li&gt; 文本节点3&lt;li&gt;&lt;/li&gt; 文本节点4...

    Dom编程学习笔记

    韩顺平老师的javascript之dom编程的笔记

    javascript学习基础笔记之DOM对象操作

    DOM文档对象模型是HTML和XML的应用程序接口（API），DOM将整个页面规划成由节点层次构成的文档。DOM对象给予开发者对HTML的访问权限，并且使开发者能将HTML作为XML文档来处理和查看。DOM对象是与语言无关的API，意味...

    js DOM学习笔记11

    如果父节点没有子节点, 则firstChild和lastChild都为nullparentNode 父节点previousSibling 第一个节点的previ

    JavaScript学习笔记之DOM操作实例分析

    本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考，具体如下： 一、DOM概念 1. “D”:Docment,指的是文档 2. “O”：Object，指的是对象，在javascript有三种对象：用户定义对象、内建对象...

    JavaScript高级程序设计 DOM学习笔记

    3) Node类型： ①Node是DOM中各种节点类型的基类型，共享相同的基本属性和方法。 □ Node.Element_NODE(1); □ Node.ATTRIBUTE_NODE(2); □ Node.TEXT_NODE(3); □ Node.CDATA_SECTION_NODE(4); □ Node.ENTITY_RE

    Jquery学习笔记分享

    5. 其他 JavaScript 库 3 6. 多个库之间的冲突 3 7. jQuery对象和DOM对象 3 第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择器 4 3. 层次选择器 4 4. 过滤选择器 5 5. 内容过滤选择器 5 6. 可见性过滤选择器 5 7...

    jQuery学习笔记之创建DOM元素

    利用DOM方法创建元素节点，通常要将document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻烦。 而jQuery使用$就可以直接创建DOM元素 代码如下: var oNewP = $(“使用jQuery创建的...

    javascript 学习笔记（一）DOM基本操作

    html部分代码： 当点击show按钮时，触发showValue函数，将input value的值动态添加到id=”text”的元素节点中！ 代码如下: &lt;p&gt; &lt;...&lt;/span&gt; &lt;/p&gt; ”text”&gt;&lt;/p&gt; javascript 部分代码： 页面加载时，使inpu

    JavaScript 学习笔记（十二） dom

    Dom createElement()、createTextNode()、appendChild()、removeChild()、replaceChild()、insertBefore()、createDocumentFragment() //创建新节点 function CreatNode() { var oP = document.createElement(“p”)...

    JavaScript 学习笔记之基础中的基础

    概要：javascript的组成、 各个组成部分的作用 、 一、javascript的组成  javascript  ECMAScript（核心） DOM（文档对象模型） BOM（浏览器对象模型） 1.1ECMAScript 　ECMAScript是通过ECMA-262标准化的脚本...

    Javascript入门学习资料收集整理篇

    Javascript入门学习第一篇 js基础Javascript入门学习第二篇 js类型...js dom实例操作Javascript入门学习第八篇 js dom节点属性说明Javascript入门学习第九篇 Javascript DOM 总结jQuery基础教程笔记适合js新手

    Javascript笔记

    学习Javascript要分清 1. js语言本身的语法 2. DOM对象（把body,div,p等节点树看成一个对象） 3. BOM对象（把浏览器的地址栏，历史记录，DOM等庄子啊一个对象）

    JavaScript高级程序设计 事件学习笔记

    事件流 1.1事件冒泡（IE事件流） □事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播到较为不具体的节点（文档）。 □所有浏览器均支持事件冒泡。...

    Java学习笔记-个人整理的

    {14.4}dom4j}{207}{section.14.4} {14.5}XPath}{210}{section.14.5} {14.6}apache.commons}{211}{section.14.6} {15}sqlite3}{213}{chapter.15} {16}Web基础}{215}{chapter.16} {16.1}...

    前端笔记.zip

    这个文档包含了HTML/css的一些基础，还有JavaScript中的基础语法、DOM、BOM还有一些学习js中面向对象、和移动web开发、AJAX、jQuery的一些总结，还有些Web前端与移动开发面试宝典； 6、什么是事件冒泡/捕获？ 事件...

    Xpage学习笔记

    XPAGE学习笔记 1 Theme 2 2 在Xpage中使用Dojo 2 2.1 加载dojo.js 2 2.2 设置应用程序主题引入tundra.css 2 2.3 设置xpage属性引入dojo模块 3 2.4 Xpage的页面html代码 4 2.5 在xpage中使用dojo编程 4 2.5.1 按钮...

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