码迷,mamicode.com
首页 > 编程语言 > 详细

前端开发之JavaScript HTML DOM理论篇二

时间:2018-08-20 00:27:23      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:one   javascrip   dom   node   another   parent   html dom   style   java   

主要内容:

  1、HTML DOM元素

  2、HTML DOM事件

  3、HTML DOM实例

 

一、DOM元素

  主要操作有添加、删除和替换HTML元素

  1、创建新的HTML元素 

   (1)方法一: appendChild() 追加

  如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上。

  实例和解析: 

<div id="box1">
    <p id="p1">This is first paragraph.</p>
    <p id="p1">This is second paragraph.</p>
</div>

<script>
    // 创建一个新的<p>元素
    var para = document.createElement("p");    

    // 如需向<p>元素添加文本,你要首先创建文本节点,以下这句即为创建文本节点
    var node = document.createTextNode("This is new!");

    // 接下来,你要将文本节点追加到<p>元素中
    para.appendChild(node);    
    
   // 最后,要向已有的元素中追加这个元素,先查找到这个元素
   var element = document.getElementById("box1"); 
 
   // 将新元素添加到已有的元素中
   element.appendChild(para);
   
</script>

  (2)方法二:insertBefore(new,old) 插入

  实例:

<div id="box1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");// 创建一个新的<p>元素
var node = document.createTextNode("This is another one!"); // 创建文本节点
para.appendChild(node); // 向<p>中追加文本节点

var element = document.getElementById("box");// 查找<p>节点的父节点
var child = document.getElementById("p1"); // 找到<p>节点的同胞节点
element.insertBefore(para,child);// 将新创建的<p>节点插入到id为p1的同胞节点之前

  2、删除已有的HTML元素

    如需删除HTML元素,你需要知道该元素的父元素。

    实例:  

<div id="box1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
    // 获取父元素
    var parent = document.getElementById("box1"); 
    // 获取要删除的元素
    var child = document.getElementById("p1");
    // 删除该元素
    parent.removeChild(child);
</script>

    简略方法:找到您需要删除的子元素,然后使用 parentNode 属性来查找其父元素

var child = document.getElementById("p1");
child.parentNode.removeChild(child); // child.parentNode表示child的父元素

  3、替换HTML元素

      如需替换 HTML DOM 中的元素,请使用 replaceChild(new,old) 方法: 

<div id="box1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
    var para = document.createElement("p");
    var node = document.createTextNode(" This is new new !");
    para.appendChild(node);
    
    var parent = document.getElementById("box1");
    var child = document.getElementById("p2");
    parent.replaceChild(para,child);
</script>

 

未完待续...

  

          

 

前端开发之JavaScript HTML DOM理论篇二

标签:one   javascrip   dom   node   another   parent   html dom   style   java   

原文地址:https://www.cnblogs.com/schut/p/9503341.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!