动态DOM操作

 创建元素
createElement() 创建元素节点       createTextNode() 创建文本节点
把元素节点 和 文本节点 "组装" 成平时看到的 "有文本内容的元素" 这种方式 叫做"动态DOM操作 ( 这个元素一开始在HTML 中是不存在的)

语法：
var el = document.createElement("元素名")；//创建元素节点
var txt = document.createTextNode("文本内容")；//创建文本节点
el.appendChild(txt); //把文本节点插入元素节点中
e2.appenChild(el);//把组装好的元素插入已存在的元素中

el :动态创建的元素节点
txt :动态创建的文本节点
e2 : HTML中已经存在的元素节点

A.appenChild(B) 表示 B插入到A内部中去，也就是B 成为A的子节点
在HTML中直接添加元素 是静态方法，使用javascript添加元素是动态方法
在实际中 很多动画效果用静态方法是实现不了的
创建一个元素的步骤，四步1.创建元素节点 createElement()
2.创建文本节点 createTextNode()
3.把文本节点 插入 元素节点 appendChild()
4.把组装好的元素插入到已有的元素中 appendChild()

在DOM中，每一个元素节点都被看成是对象，
既然是对象，既然是对象 就可以像给对象属性赋值那样给元素的属性进行赋值
如想添加一个id属性 oInput.id="bubmit"  , 想添加一个type属性 oInput.type="button"

举例：创建动态图片


 //<img class="pic" src="./images/bg-1.png" style="border: 2px solid red;">
    window.onload = function () {
      var oImg = document.createElement("img");
      oImg.className = "pic";
      oImg.src = "./images/bg-1.png";
      oImg.style.border = "solid red 2px";
      document.body.appendChild(oImg);
    }
 

举例：创建多个元素

 <style>
    table {
      border-collapse: collapse;
    }

    table,
    tr,
    td {
      border: solid red 1px;
      width: 80px;
      height: 20px;
    }
  </style>

    window.onload = function () {
      var oTable = document.createElement("table");
      for (var i = 0; i < 3; i++) {
        var oTr = document.createElement("tr");
        for (var j = 0; j < 3; j++) {
          var oTd = document.createElement("td");
          oTr.appendChild(oTd)
        };
        oTable.appendChild(oTr);
      }
      document.body.appendChild(oTable);//添加到body中去
    }
 
插入元素（把创建好的元素 插入到 已经存在的元素中去）

2种方法
appendChild()     把一个新元素插入到父元素的内部 子元素的 "末尾"
A.appendChild(B)   A是父元素，B是动态创建好的子元素

insertBefore() 将一个新元素插入到父元素中的某一个子元素"之前"
A.insertBefore(B,ref)  A父元素，B新子元素  ref指定子元素  在这个元素之前插入新子元素

这两种方法是互补关系
appendChild() 是在父元素最后一个子元素后面插入
insertBefore() 是在父元素任意一个子元素之前插入
注意：这两中插入元素的方法，都需要获取父元素才可以进行操作
 
appendChild()


    window.onload = function () {
      var oBtn = document.getElementById("btn");
      //为按钮添加点击事件
      oBtn.onclick = function () {
        var oUl = document.getElementById("list");
        var oTxt = document.getElementById("txt");
        //把文本框的内容转换为文本节点
        var textNode = document.createTextNode(oTxt.value);
        //动态创建一个li
        var oLi = document.createElement("li");
        //将文本节点 插入li元素中去
        oLi.appendChild(textNode);
        //将li元素插入ul元素中去
        oUl.appendChild(oLi);
      }
    }

  <ul id="list">
    <li>CSS</li>
    <li>HTML</li>
    <li>JavaScript</li>
  </ul>
  <input id="txt" type="text" /><input id="btn" type="button" value="插入" />
 
insertBefore() 
oUl.firstElementChild 获取ul 元素下的第一个子元素


   window.onload = function () {
      var oBtn = document.getElementById("btn");

      oBtn.onclick = function () {
        var oUl = document.getElementById("list");
        var oTxt = document.getElementById("txt");
        //把文本框的内容转换为"文本节点"
        var textNode = document.createTextNode(oTxt.value);
        //动态创建一个li
        var oLi = document.createElement("li");

        //把文本节点插入到li元素中
        oLi.appendChild(textNode);
        //把li元素插入到ul 的第1个子元素前面
        oUl.insertBefore(oLi, oUl.firstElementChild);

      }
    }
    <ul id="list">
    <li>CSS</li>
    <li>HTML</li>
    <li>JavaScript</li>
  </ul>
  <input id="txt" type="text" /><input id="btn" type="button" value="插入" />
删除元素

语法：A.removeChild(B)  A:表示父元素，B表示父元素内部的某个子元素
使用 removeChild( )方法删除元素之前，必须先找到2个元素
被删除的子元素
被删除子元素的父元素

删除最后一个子元素 或 把整个列表都删除

 window.onload = function () {
      var oBtn = document.getElementById("btn");
      oBtn.onclick = function () {
        var oUl = document.getElementById("list");
        //删除ul中最后一个li元素（也就是最后一个子元素）
        //oUl.removeChild(oUl.lastElementChild);

        //直接对ul元素进行removeChild()就可以删除整个列表
        document.body.removeChild(oUl);
      }
    }

  <ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>HTML</li>
  </ul>
  <input id="btn" type="button" value="删除" />
 

复制元素

语法：obj.cloneNode(bool)
参数obj表示被复制的元素，参数bool是一个布尔值
1 或 true :表示复制元素本身以及复制该元素下面的所有子元素
0 或 false :表示仅仅复制元素本身，不复制该元素下的子元素   默认值
 
默认值 0或false


<style>
    div {
      width: 50px;
      height: 50px;
      background: red;
      color: #fff;
      margin: 20px;
    }
  </style>

    window.onload = function () {
      var oBtn = document.getElementById("btn");
      var oDiv = document.getElementsByTagName("div")[0];
      oBtn.onclick = function () {
        var cloneNode = oDiv.cloneNode(); //默认值false 只复制本身
        document.body.appendChild(cloneNode);
      }
    }

  <input id="btn" type="button" value="复制" />
  <div>这里有文字</div>
 
1或true

 window.onload = function () {
      var oBtn = document.getElementById("btn");
      var oDiv = document.getElementsByTagName("div")[0];
      oBtn.onclick = function () {
        var cloneNode = oDiv.cloneNode(1);
        document.body.appendChild(cloneNode);
      }
    }
  <input id="btn" type="button" value="复制" />
  <div>这里有文字</div>
 
注意，避免id属性值重复，如果被克隆元素具有id属性。
那么新克隆的元素要修改一下属性值，以避免出现此情况。
动态修改了新元素的id属性值。


 <style>
    div {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: 5px;
      color: wheat;
    }
  </style>
 
    window.onload = function () {
      var oBtn = document.getElementById("btn");
      var oDiv = document.getElementsByTagName("div")[0];

      oBtn.onclick = function () {
        var cloneNode = oDiv.cloneNode();
        //因原型有id ,为了避免重复重新设置id 名
        cloneNode.id = "yiyi";
        document.body.appendChild(cloneNode);
      }
    }

  <input id="btn" type="button" value="复制" />
  <div id="ant">这里有文字</div>
只复制里面的文本内容


  <style>
    div {
      width: 200PX;
      height: 200px;
      background: red;
      color: blue;
      margin: 20px;
      text-align: center;
    }
  </style>

    window.onload = function () {
      var oBtn = document.getElementById("btn");
      var oDiv = document.getElementsByTagName("div")[0];
      oBtn.onclick = function () {
     
      var txtNodes = oDiv.childNodes[0];
        var newTxtNodes = txtNodes.cloneNode()
        oDiv.appendChild(newTxtNodes);
      }
    }

  <input id="btn" type="button" value="复制" />
  <div id="ant">这里有文字</div>


 window.onload = function () {
      var oBtn = document.getElementById("btn");
      oBtn.onclick = function () {
        var oUl = document.getElementById("list");
        //点击复制按钮后，会在body中把整个列表复制并插入
        document.body.appendChild(oUl.cloneNode(1));
      }
    }

  <ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>HTML</li>
  </ul>
  <input id="btn" type="button" value="复制" />
 
替换元素
A.replaceChild(new,old)
A：父元素   new:新子元素    old:旧子素
要实现替换元素，就必须提供3个节点，父元素  新元素   旧元素

window.onload = function () {
      var oBtn = document.getElementById("btn");
      oBtn.onclick = function () {//给oBtn添加点击事件
        var oldnode = document.getElementById("oldnode");//找到旧节点
        var oldHTML = oldnode.innerHTML;//把旧节点里的内容提取出来赋值给oldHTML
        var newnode = document.createElement("i");//创建新的i标签元素
        oldnode.parentNode.replaceChild(newnode, oldnode);
        newnode.innerHTML = oldHTML;
      }
    }

  <div><b id="oldnode">JavaScripe</b>是一个很常用的技术,专为网页添加特效</div>
  <button id="btn">把JavaScript改为斜体</button>
 
 
    function t() {
      var nodeul = document.getElementsByTagName("ul")[0]; //找到父节点
      var oldli = nodeul.children[2]; //找到要替换的节点
      var oLi = document.createElement("li"); //创建新节点
      var oTxtNode = document.createTextNode("白天"); //创建新的文本节点
      oLi.appendChild(oTxtNode); //把文本节点oTxtNode 插入到 oLi 中去
      nodeul.replaceChild(oLi, oldli);
    }
  <ul>
    <li>春天</li>
    <li>夏天</li>
    <li>蓝天</li>
    <li>秋天</li>
    <li>冬天</li>
  </ul>
  <button onclick="t()" value="">节点的替换与修改</button>

 window.onload = function () {
      var oBtn = document.getElementById("btn");
      oBtn.onclick = function () {
        var oOld = document.getElementById("old");
        var oNewnode = document.createElement("p");
        var oNewTxtNode = document.createTextNode("JavaScript");
        oNewnode.appendChild(oNewTxtNode);
        oOld.parentNode.replaceChild(oNewnode, oOld);
      }
    }

  <h1 id="old">jQuery</h1>
  <input id="btn" type="button" value="替换" />
 

 window.onload = function () {
      var oBtn = document.getElementById("btn");
      oBtn.onclick = function () {
        //获取body中的第1个元素
        var oFirst = document.querySelector("body :first-child");
        //获取2个文本框
        var oTag = document.getElementById("tag");
        var oTxt = document.getElementById("txt");
        //根据2个文本框的值来创建一个新的节点
        var oNewTag = document.createElement(oTag.value);
        var oNewTxt = document.createTextNode(oTxt.value);
        oNewTag.appendChild(oNewTxt);
        document.body.replaceChild(oNewTag, oFirst);

      }
    }
<p>网站</p>
  <hr />
  输入标签:<input id="tag" type="text" /><br />
  输入内容:<input id="txt" type="text" /><br />
  <input id="btn" type="button" value="替换" />
 
 
posted @ 2020-12-21 14:49 沁莹阅读(574) 评论(0) 收藏举报
刷新页面返回顶部
沁莹

动态DOM操作

公告
