程序博客网 > zip格式mac怎么打开

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

来源：互联网 发布：zip格式mac怎么打开 编辑：程序博客网 时间：2024/05/21 08:52
 

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

        1.创建新节点

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

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

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

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

  1. <html> 
  2.     <head> 
  3.         <title>createElement() Demo</title> 
  4.     </head> 
  5.     <body> 
  6.     </body> 
  7. </html> 

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

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

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

  1. <html> 
  2.     <head> 
  3.         <title>createElement() Demo</title> 
  4.         <script type="text/javascript"> 
  5.             function createElementTest() { 
  6.                 //第一步：创建p元素 
  7.                 var oP = document.createElement("p"); 
  8.                 //第二步：创建文本节点 
  9.                 var oTxt = document.createTextNode("A New Element"); 
  10.                 //第三步：将文本节点加到p元素的子元素列表中 
  11.                 oP.appendChild(oTxt); 
  12.                 //第四步：将p元素添加到body的子元素列表中 
  13.                 document.body.appendChild(oP); 
  14.             } 
  15.         </script> 
  16.     </head> 
  17.     <body> 
  18.         <input type="button" value="添加" onclick="createElementTest()"/> 
  19.     </body> 
  20. </html> 

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

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

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

完整的代码如下：

  1. <html> 
  2.     <head> 
  3.         <title>createElement() Demo</title> 
  4.         <script type="text/javascript"> 
  5.             function createElementTest() { 
  6.                 //第一步：创建p元素 
  7.                 var oP = document.createElement("p"); 
  8.                 //第二步：创建文本节点 
  9.                 var oTxt = document.createTextNode("A New Element"); 
  10.                 //第三步：将文本节点加到p元素的子元素列表中 
  11.                 oP.appendChild(oTxt); 
  12.                 //第四步：将p元素添加到body的子元素列表中 
  13.                 document.body.appendChild(oP); 
  14.             } 
  15.  
  16.             function removeChildTest() { 
  17.                 //第一步：获取p元素 
  18.                 var oP = document.body.getElementsByTagName("p").item(0); 
  19.                 //第二步：获取p元素的父节点 
  20.                 var pNode = oP.parentNode; 
  21.                 //第三步：调用父节点的删除方法 
  22.                 pNode.removeChild(oP); 
  23.             } 
  24.         </script> 
  25.     </head> 
  26.     <body> 
  27.         <input type="button" value="添加" onclick="createElementTest()"/> 
  28.         <input type="button" value="删除" onclick="removeChildTest()"/> 
  29.     </body> 
  30. </html> 

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

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

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

  1. <html> 
  2.     <head> 
  3.         <title>createElement() Demo</title> 
  4.         <script type="text/javascript"> 
  5.             function createElementTest() { 
  6.                 //第一步：创建p元素 
  7.                 var oP = document.createElement("p"); 
  8.                 //第二步：创建文本节点 
  9.                 var oTxt = document.createTextNode("A New Element"); 
  10.                 //第三步：将文本节点加到p元素的子元素列表中 
  11.                 oP.appendChild(oTxt); 
  12.                 //第四步：将p元素添加到body的子元素列表中 
  13.                 document.body.appendChild(oP); 
  14.             } 
  15.  
  16.             function removeChildTest() { 
  17.                 //第一步：获取p元素 
  18.                 var oP = document.body.getElementsByTagName("p").item(0); 
  19.                 //第二步：获取p元素的父节点 
  20.                 var pNode = oP.parentNode; 
  21.                 //第三步：调用父节点的删除方法 
  22.                 pNode.removeChild(oP); 
  23.             } 
  24.             function replaceChildTest() { 
  25.                 //第一步：创建需要替换的节点 
  26.                 var newTxt = document.createTextNode("Hello,World!"); 
  27.                 //第二步：获取到被替换的节点 
  28.                 var oldTxt = document.body.getElementsByTagName("p").item(0).childNodes.item(0); 
  29.                 //第三步：获取到需要被替换节点的父节点 
  30.                 var oP = document.body.getElementsByTagName("p").item(0); 
  31.                 //第四步：替换文本节点 
  32.                 oP.replaceChild(newTxt,oldTxt); 
  33.             } 
  34.         </script> 
  35.     </head> 
  36.     <body> 
  37.         <input type="button" value="添加" onclick="createElementTest()"/> 
  38.         <input type="button" value="删除" onclick="removeChildTest()"/> 
  39.         <input type="button" value="替换" onclick="replaceChildTest()"/> 
  40.     </body> 
  41. </html> 

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

代码如下：

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

完整的代码如下：

 

  1. <html> 
  2.     <head> 
  3.         <title>createElement() Demo</title> 
  4.         <script type="text/javascript"> 
  5.             function createElementTest() { 
  6.                 //第一步：创建p元素 
  7.                 var oP = document.createElement("p"); 
  8.                 //第二步：创建文本节点 
  9.                 var oTxt = document.createTextNode("A New Element"); 
  10.                 //第三步：将文本节点加到p元素的子元素列表中 
  11.                 oP.appendChild(oTxt); 
  12.                 //第四步：将p元素添加到body的子元素列表中 
  13.                 document.body.appendChild(oP); 
  14.             } 
  15.  
  16.             function removeChildTest() { 
  17.                 //第一步：获取p元素 
  18.                 var oP = document.body.getElementsByTagName("p").item(0); 
  19.                 //第二步：获取p元素的父节点 
  20.                 var pNode = oP.parentNode; 
  21.                 //第三步：调用父节点的删除方法 
  22.                 pNode.removeChild(oP); 
  23.             } 
  24.             function replaceChildTest() { 
  25.                 //第一步：创建需要替换的节点 
  26.                 var newTxt = document.createTextNode("Hello,World!"); 
  27.                 //第二步：获取到被替换的节点 
  28.                 var oldTxt = document.body.getElementsByTagName("p").item(0).childNodes.item(0); 
  29.                 //第三步：获取到需要被替换节点的父节点 
  30.                 var oP = document.body.getElementsByTagName("p").item(0); 
  31.                 //第四步：替换文本节点 
  32.                 oP.replaceChild(newTxt,oldTxt); 
  33.             } 
  34.             function insertBeforeTest() { 
  35.                 var newNode = document.createElement("p"); 
  36.                 var newTxt = document.createTextNode("a new element"); 
  37.                 newNode.appendChild(newTxt); 
  38.                 var oldNode = document.body.getElementsByTagName("p")[0]; 
  39.                 var pNode = oldNode.parentNode; 
  40.                 pNode.insertBefore(newNode,oldNode); 
  41.             } 
  42.         </script> 
  43.     </head> 
  44.     <body> 
  45.         <input type="button" value="添加" onclick="createElementTest()"/> 
  46.         <input type="button" value="删除" onclick="removeChildTest()"/> 
  47.         <input type="button" value="替换" onclick="replaceChildTest()"/> 
  48.         <input type="button" value="插入" onclick="insertBeforeTest()"/> 
  49.     </body> 
  50. </html> 

 

参考书目：

 

《JavaScript高级编程》

zip格式mac怎么打开 zip格式mac怎么打开
原创粉丝点击
热门IT博客
遥感数据的预处理步骤遥感数据的预处理步骤
mac虚拟机iso镜像文件mac虚拟机iso镜像文件
linux改为中文
新手淘宝达人怎么赚钱
淘宝数据提取
淘宝联盟推广资源管理
人工智能电影解析
人参 淘宝
mac 实用软件下载
听中国听书软件
iphone 手机铃声软件
老七淘宝店
nba季后赛各项数据统计
腾讯电脑软件管家
windows版keynote
初学者羽毛球拍知乎
图像语义分割 python
电子眼地图数据
手机工程算量软件
网络借贷不还会坐牢吗
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 氩弧焊手法 氩弧焊维修 氩弧焊教学 氩弧焊入门 氩弧焊怎么使用 氩弧焊焊接技术 氩弧焊能焊铜吗 氩弧焊教程 氩弧焊帽子 熔化极氩弧焊 氩弧焊打底 氩弧焊拉焊 电焊氩弧焊焊接 氩弧焊有什么危害 怎样使用氩弧焊 烧氩弧焊 氩弧焊可以焊铝吗 氩弧焊直缝焊机 氩弧焊配件 氩弧焊怎么焊铝 氩弧焊开关 氩弧焊可以焊铜吗 氩弧焊是什么 氩弧焊所用气体 氩弧焊铝怎么焊 氩弧焊钨针正确磨法 不锈钢氩弧焊技术要领 亚孤焊 氩弧焊对生育有影响吗 氩弧焊焊接手法图解 氩弧焊技术入门与提高 逆变弧焊机 直流弧焊机 银象焊机 氩氦刀费用 上海氩氦刀 氩气瓶颜色 便携式家用氧气瓶 二氧化碳氧气瓶 氧气瓶浓度 氧气瓶乙炔瓶间距

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里