牛骨文教育服务平台(让学习变的简单)
博文笔记

js DOM操作

创建时间：2017-12-02 投稿人： 浏览次数：530

DOM节点操作：增删改查


问：

document.write()创建节点的不足

页面加载完成之后，使用document.write()这种方式会将页面重写，所以会覆盖掉页面中原有的元素。


create创建节点





<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>create方法</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var comment = document.createComment("A comment");
        var fragment = document.createDocumentFragment();
        var ul = document.getElementById("myList");
        var li = null;
        for (var i = 0; i < 3; i++){
          li = document.createElement("li");
          li.appendChild(document.createTextNode("Item " + (i+1)));
          fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        document.body.insertBefore(comment, document.body.firstChild);//很少动态创建注释节点
      });
    </script>
  </head>
  <body>
    <ul id="myList"></ul>
  </body>
</html>

总结：

createElement 创建元素节点 createDocumentFragment 创建一个文档片段

使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题

最主要的区别就是createElement创建的元素可以重复操作   但是createDocumentFragment创建的元素是一次性的，添加之后再就不能操作了

其次还有一个区别是fragment使用innerHTML不能达到修改文本的效果


createTextNode 创建文本节点   createComment  创建注释  一般不会动态添加




在ie6 7中创建本不兼容的h5标签

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html5shiv</title>
    <!--为了让ie浏览器兼容h5新标签-->
    <style>
      /*html5*/
      article {
        font-size: 40px;
        color: red;
      }
    </style>
    <script> 
      (function() {
        if (! /*检测是不是ie  ie会将整个判断语句看做 ！！0*/
        /*@cc_on!@*/
        0) return;
        var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(", ");
        var i = e.length;
        while (i--){
          document.createElement(e[i]);
        }
      })();
    </script>
  </head>
  <body>
    <article>
      You are my sunshine.
    </article>
  </body>
</html>

高效创建节点的方式

innerHtml

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>innerHTML</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var content = document.getElementById("content");
        var str = "<p>This is a <strong>paragraph</strong> with a list following it.</p>"
                    + "<ul>"
                    + "<li>Item 1</li>"
                    + "<li>Item 2</li>"
                    + "<li>Item 3</li>"
                    + "</ul>";
        content.innerHTML = str;
        alert(content.innerHTML);
      });
    </script>
  </head>
  <body>
    <div id="content"></div>
  </body>
</html>

innerHtml使用限制   ie6 -8 会忽略空格  有可能执行script标签  例如style标签前面要添加有作用域的标签 了解一下




还有一个outerHTML  返回调用它的函数及所有子节点的html标签

*innerHTML 和 outerHTML的区别

一、区别：
1）innerHTML:
　　从对象的起始位置到终止位置的全部内容,不包括Html标签。
2）outerHTML:
　　除了包含innerHTML的全部内容外, 还包含对象标签本身。

二、例子1：
<div id="test"> 
   <span style="color:red">test1</span> test2 
</div>
1）innerHTML的值是“<span style="color:red">test1</span> test2 ”

2）outerHTML的值是<div id="test"><span style="color:red">test1</span> test2</div>

三. 例子2:
<body>
<div>aa</div>
</body>
通过document.body.innerHTML获取到的内容是:<div>aa</div>
通过document.body.outerHTML获取到的内容是:<body><div>aa</div></body>



innerText会过滤掉标签 只适用于ie  推荐使用innerHTML

http://dl2.iteye.com/upload/attachment/0004/7400/69d02044-6eae-397e-a97d-8736d6351d3b.gif

兼容所有浏览器的innerText的方法

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>innerText</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var content = document.getElementById("content");
        function getInnerText(element){//兼容
          return typeof (element.textContent == "string") ? element.textContent : element.innerText;//火狐用textContent 其他用后者
        }
        function setInnerText(element, text){
          if (typeof element.textContent == "string"){
            element.textContent = text;
          } else {
            element.innerText = text;
          }
        }
        setInnerText(content, "Hello world!");
        console.log(getInnerText(content));
      });
    </script>
  </head>
  <body>
    <div id="content">
      <p>This is a <strong>paragraph</strong> with a list following it.</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </body>
</html>


outText和innerText基本没什么区别  不常用不建议用



遍历节点




查找节点




打印<html>



<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>dom Tree walker</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var oHtml = document.documentElement; //<html>
        var p = document.getElementById("paragraph");
        var txt = p.childNodes[0];
        //var oHead = oHtml.firstChild;
        //var oHead = oHtml.childNodes[0]; //head
        var oHead = oHtml.childNodes.item(0);//head
        //var oBody = oHtml.childNodes.item(1);
        var oBody = oHtml.childNodes[1];//body 但是只有在ie浏览器是正常打印  其他的不能正常打印因为会将空白节点视为了节点

        //console.log(oHead.parentNode == oHtml);
        //console.log(oBody.parentNode == oHtml);

        //console.log(oBody.previousSibling == oHead);
        //console.log(oHead.nextSibling == oBody);
        //console.log(oBody);
        //console.log(oHead);
        //console.log(oHtml.tagName);

        //console.log(p.ownerDocument == document);
        console.log(p.hasChildNodes());
        console.log(txt.hasChildNodes());
      });
    </script>
    <!--解决会打印空白节点的问题可以如下  但是不推荐-->
  </head><body>
    <p id="paragraph">文本叶子节点</p>
  </body>
</html>






问

http://climg.mukewang.com/5968991d000156ac03700353.jpg

打印结果分别是  false true false 

为什么第一个是false呢？

因为list1的firstChild是空白节点  所以空白没有子节点 返回false




节点遍历案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DOM Travel</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var s = "";
        function travel(space, node) {
          if (node.tagName) {
            s += space + node.tagName + "<br/>";
          }
          var len = node.childNodes.length;
          for (var i = 0; i < len; i++) {
            travel(space + "|-", node.childNodes[i]); 
          }
        }
        travel("", document);
        document.write(s);
      });
    </script>
  </head>
  <body>
    <form>  
        <input type="button" id="button1" name="button1" value="Click Me!" />  
    </form>
  </body>
</html>


打印结果为

|-HTML
|-|-HEAD
|-|-|-META
|-|-|-META
|-|-|-TITLE
|-|-|-SCRIPT
|-|-|-SCRIPT
|-|-BODY
|-|-|-FORM
|-|-|-|-INPUT



解决空白节点


方法一

tips：元素节点的nodetype值为1 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>查找子节点（二）</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var box = document.getElementById("box");
        for(var i = 0, len = box.childNodes.length; i < len; i++) {
          if (box.childNodes[i].nodeType == 1) {
            console.log(box.childNodes[i]);
          }
        }
      });
    </script>
  </head>
  <body>
    <ul id="box">  
      <li>节点一</li>
      <li>节点二</li>
      <li>节点三</li> 
    </ul>
  </body>
</html>

方法二



这是一套专门查找元素节点的api   忽略了文本节点（空白节点）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>查找子节点（三）</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var box = document.getElementById("box");
        for(var i = 0, len = box.childElementCount; i < len; i++) {
          console.log(box.children[i]);
        }
      });
    </script>
  </head>
  <body>
    <ul id="box">  
      <li>节点一</li>
      <li>节点二</li>
      <li>节点三</li>  
    </ul>
  </body>
</html>
注意：ie8以下不支持这套api



类数组对象nodelist


例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>NodeList对象的特点</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var box = document.getElementById("box");
        var nodes = box.childNodes;
        //console.log(nodes);
        //console.log(nodes[1]);
        //console.log(nodes.item(1));
        //nodes.push("<li>节点四</li>");添加不了 因为不具有数组的方法 所以不是真正的数组


          //如果想让nodelist像上面那样添加
        function makeArray(nodeList){
          var arr = null;
          try {
//              这个方法也可以将类数组转化为数组
            return Array.prototype.slice.call(nodeList);//ie浏览器会出现问题 所以这个方法不行就用下面的
          }catch (e){
            arr = new Array(); //把nodelist的值装到这个数组里
            for(var i = 0, len = nodeList.length; i < len; i++){
              arr.push(nodeList[i]);
            }
          }
          return arr;
        }

        var newNodeList = makeArray(nodes);
        newNodeList.push("<li>节点四</li>");
        console.log(newNodeList);//实际显示不出来这个节点四
      });
    </script>
  </head>
  <body>
    <ul id="box">  
      <li>节点一</li>
      <li>节点二</li>
      <li>节点三</li>  
    </ul>
  </body>
</html>



类数组对象HTML collection



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>类数组对象HTMLCollection</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var scripts = document.scripts;//返回script
        var links = document.links;//返回a标签
        var cells = document.getElementById("tr").cells;
        var imgs = document.images;//返回img
        var forms = document.forms;//表单
        var options = document.getElementById("select").options;
        var ps = document.getElementsByTagName("p");

        /*console.log(scripts);
        console.log(links);
        console.log(cells);
        console.log(imgs);
        console.log(forms);
        console.log(options);
        console.log(ps);*/

        console.log(cells.namedItem("td"));//返回表格里第一个id或者name为td的元素
      });
    </script>
  </head>
  <body>
    <ul id="box">
      <li>节点一</li>
      <li>节点二</li>
      <li>节点三</li>
    </ul>

    <table border="1">
      <tr id="tr">
        <td>第一行</td>
        <td name="td">第二行</td>
        <td name="td">第三行</td>
      </tr>
    </table>

    <img src="duer.jpg" alt="img1" />
    <img src="ipone6s+.png" alt="img2" />

    <form action="">
      <input type="text" value="用户名">
    </form>
    <form action="">
      <input type="text" value="密码">
    </form>

    <a href="#">忘记密码</a>
    <a href="#">更多内容</a>

    <select id="select">
      <option value="0">北京</option>
      <option value="1">天津</option>
      <option value="2">河北</option>
    </select>

    <p>DOM探索之基础详解篇</p>
    <p>DOM探索之节点操作篇</p>
  </body>
</html>


类数组对象namedNodeMap

ele.attribute


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>类数组对象NamedNodeMap</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var box = document.getElementById("box");
        var attrs = box.attributes;
        //console.log(attrs);
        console.log(attrs.length);
        console.log(attrs[0]);
        console.log(attrs.item(1));
      });
    </script>
  </head>
  <body>
    <ul id="box" data-url="index.html" node-action="submit">
      <li>节点一</li>
      <li>节点二</li>
      <li>节点三</li>
    </ul>
  </body>
</html>




类数组对象的动态性



看一个例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>类数组对象的动态性（一）</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var divs = document.getElementsByTagName("div");
       // var length = divs.length;
        var i = 0;
        while(i < length){
          document.body.appendChild(document.createElement("div"));
          i++;
        }
      });
    </script>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>
这里的while循环理应循环三次就结束  但实际上会让浏览器陷入死循环  原因是html collection的动态性造成的




节点查找





ById

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>getElementById()</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var myDiv = document.getElementById("myDiv");
        console.log(myDiv.tagName);
        var myUl = myDiv.getElementById("myUl");//会报错 不能使用非document对象使用byid方法
        console.log(myUl);
      });
    </script>
  </head>
  <body>
    <input type="text" name="myDiv" value="请输入内容" />
    <div id="myDiv">
      You are my sunshine.
      <ul id="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </body>
</html>


byid的方法有bug

bug1  ie下的bug

 <script>
    myReady(function(){
      var bn = document.getElementById("button");
      bn.onclick = function() {
        var target = document.getElementById("target");
        console.log(target.innerHTML);
      }
    });
  </script>
</head>
<body>
  <a name="target" href="http://www.cnblogs.com/rubylouvre/">这是错误的元素</a>
  <p id="target">这是正确的元素</p>
  <button id="button" type="button">开始测试</button>
</body>
这里查找到的是name=“target”的元素 


bug2：有两个id一样的元素也只会返回第一个



解决bug




<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IE getElementById bug</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var getElementById = function(id) {
          var el = document.getElementById(id);
          if(!+"v1") {//也可以用useragent方法判断是不是ie浏览器  ie是true
            if(el && el.attributes["id"].value === id) {//不能用el.id === id 来判断 原因见下.
 //判断条件为el存在 并且id属性值为传参的
             return el;
            } else {
              var els = document.all[id],
                  n = els.length;
              for (var i = 0; i < n; i++) {
                if (els[i].attributes["id"].value === id) {
                  return els[i];//过滤掉name  只留下Id
                }
              }
            }
          }
          return el;
        };
        //console.log(getElementById("target").tagName);
        /*var formElement1 = getElementById("myForm1");
        var formElement2 = getElementById("myForm2");
        alert(formElement1.getAttribute("id"));
        alert(formElement2.getAttribute("id"));
        alert(formElement1.id);
        alert(formElement2.id);*///这个返回值有问题 所以 不能使用el.id === id 来判断
        var bn = getElementById("button");
        bn.onclick = function(){
          var target = getElementById("target");
          var formElement2 = getElementById("myForm2");
          alert(target.innerHTML);
          alert(formElement2.tagName);
        };
      });
    </script>
  </head>
  <body>
    <form id="myForm1">
      <input id="user_id" name="user_id" value="text" />
    </form>
    <form id="myForm2">
      <input id="id" name="id" value="text" />
    </form>
    <a name="target" href="http://www.cnblogs.com/rubylouvre/">这是错误的元素</a>
    <p id="target">这是正确的元素</p>
    <button id="button" type="button">开始测试</button>
  </body>
</html>
***注意document.all[]和docuement.attributes[]都是括号

byname 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>getElementsByName()</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        //var myUl = document.getElementsByName("myUl");
        var myDiv = document.getElementById("myDiv");
        //var myUl = myDiv.getElementsByName("myUl");//报错
        var citys = document.getElementsByName("city");
        console.log(myUl);
        console.log(myDiv);
        console.log(citys.length);
      });
    </script>
  </head>
  <body>
    北京<input type="checkbox" id="beijing" name="city" value="北京" />
    天津<input type="checkbox" name="city" value="天津" />
    上海<input type="checkbox" name="city" value="上海" />
    <div id="myDiv">
      You are my sunshine.
      <ul id="myUl" name="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </body>
</html>

注意在ie6 7有bug



bytagname

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>getElementsByTagName()</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var lis1 = document.getElementsByTagName("li");
        var lis2 = document.getElementsByTagName("Li");
        var inputs = document.getElementsByTagName("input");
        var comment = document.getElementsByTagName("!");//在ie6-8下面doctype会被当成注释
        var all = document.getElementsByTagName("*");//获得所有元素
        /*console.log(lis1.length);
        console.log(lis2.length);
        console.log(inputs[0].value);
        console.log(comment[0].nodeValue);
        console.log(comment[1].nodeValue);*/
        for(var i = 0, len = all.length; i < len; i++) {
          console.log(all[i].tagName);
        }
      });
    </script>
  </head>
  <body>
    <!--页面元素-->
    <input type="text" name="myDiv" value="请输入内容" />
    <div id="myDiv">
      You are my sunshine.
      <ul id="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </body>
</html>


上述三个api基本上都兼容

下面的兼容不是很好

byclassname


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>getElementsByClassName()</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var ul = document.getElementById("myUl");
        var lis1 = ul.getElementsByClassName("light");
        var lis2 = ul.getElementsByClassName("light dark");
        console.log(lis1);
        console.log(lis2);
      });
    </script>
  </head>
  <body>
    <ul id="myUl">
      <li class="light">1</li>
      <li class="dark light">2</li>
      <li class="light">3</li>
    </ul>
  </body>
</html>

解决byclassname的兼容问题 ie8以下


html部分



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>getElementsByClassName() 兼容浏览器方案</title>
    <script src="domReady.js"></script>
    <script src="getElementsByClassName.js"></script>
    <script>
      myReady(function(){
        var myUl2 = document.getElementById("myUl2");
        var r = getElementsByClassName({
          searchClass: "light dark",
          node: myUl2,
          tag : "div"
        });
        console.log(r[0].innerHTML);
      });
    </script>
  </head>
  <body>
    <ul id="myUl">
      <li class="light">1</li>
      <li class="light dark">2</li>
      <li class="light">3</li>
    </ul>
    <ul id="myUl2">
      <li class="light">1</li>
      <li class="light dark">second</li>
      <div class="light dark">5555</div>
      <li class="light">3</li>
    </ul>
  </body>
</html>




js部分




var getElementsByClassName = function(opts) {
   var searchClass = opts.searchClass; //存储要查找的类名
   var node = opts.node || document;//存储要查找的范围
   var tag = opts.tag || "*";//存储一定范围内的要查找的标签
   var result = [];
//判断浏览器是否支持byclassname的方法
   if (document.getElementsByClassName) {
      var nodes = node.getElementsByClassName(searchClass);
      if (tag !== "*") {
         for (var i = 0; node = nodes[i++];) {
//nodes是className的集合，它是有数量的，比如有5个，那么在循环中，初始值是0，他会往后曲循环，0、1、2、3、4，当它走到5时，nodes中没有第六项，所以下面就不会再执行了，因为if里面也是有判断的。
 if (node.tagName === tag.toUpperCase()) {//tagname都是大写
               result.push(node);
            }
         }
      } else {
         result = nodes;
      }
      return result;
   } else {//ie8以下
      var els = node.getElementsByTagName(tag);
      var elsLen = els.length;
      var i, j;
      var pattern = new RegExp("(^|\s)" + searchClass + "(\s|$)");
//通过正则表达式 只找到一个的情况是一个class 找到多个中间会有空格 则判断开始和结尾有空格 ^是正则的开始 $是正则的结尾
      for (i = 0, j = 0; i < elsLen; i++) {         if (pattern.test(els[i].className)) {//检测匹配正则表达式的classname            result[j] = els[i];//放入result中            j++;         }      }      return result;   }}













queryselector  和queryselectorall


既可以使用document调用 也可以使用别的节点调用  前者只返回一个  ！！！！



















<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>querySelector()</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var myDiv = document.getElementById("myDiv");
        //var ul = myDiv.querySelector("#myUl");
        var ul = document.querySelector("#myUl");
        var li = myDiv.querySelector("li:last-child");
        var els = document.querySelector("input, li");
        var span = document.querySelector("span");
        var input = document.querySelector(".foo\:bar");//：和/都需要转义
        //console.log(ul);
        //console.log(li);
        //console.log(els);
        //console.log(span);
        console.log(input);
      });
    </script>
  </head>
  <body>
    <input type="text" class="foo:bar" value="请输入内容" />
    <div id="myDiv">
      You are my sunshine.
      <ul id="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </body>
</html>
















selectorall




<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>querySelectorAll()</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var myDiv = document.getElementById("myDiv");
        var ul = myDiv.querySelectorAll("ul");
        var li = myDiv.querySelectorAll("li");
        var span = myDiv.querySelectorAll("span");
        //console.log(ul);
        //console.log(li);
        console.log(span);
      });
    </script>
  </head>
  <body>
    <input type="text" name="myDiv" value="请输入内容" />
    <div id="myDiv">
      You are my sunshine.
      <ul id="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </body>
</html>












* querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用querySelectorAll() 方法替代。




操作节点







appendchild增加节点




<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>appendChild()</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var myUl = document.getElementById("myUl");
        var txt = document.createTextNode("4");
        var li = document.createElement("li");
        var firstLi = myUl.firstElementChild;
        li.appendChild(txt);
        myUl.appendChild(li);
        var returnedNode = myUl.appendChild(firstLi);
        console.log(returnedNode);
      });
    </script>
  </head>
  <body>
    <ul id="myUl">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>






insertbefore


appendchild是放在最后面  这个是放在前面




<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>insertBefore()</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var myUl = document.getElementById("myUl");
        var txt = document.createTextNode("4");
        var liNew = document.createElement("li");
        liNew.appendChild(txt);
        // var li2 = myUl.children.item(1);
        // var returnNode = myUl.insertBefore(liNew, li2);
        // console.log(returnNode.innerHTML);
        // myUl.insertBefore(liNew, null);实现和appendchild一样的添加到末尾
          // 事实上这个方法可以在任何地方添加节点
        // myUl.insertBefore(liNew, myUl.firstElementChild);
        myUl.insertBefore(liNew, myUl.lastElementChild);
      });
    </script>
  </head>
  <body>
    <ul id="myUl">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>
















replaceChild









<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>replaceChild()</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var myUl = document.getElementById("myUl");
        var txt = document.createTextNode("4");
        var liNew = document.createElement("li");
        liNew.appendChild(txt);
        var li2 = myUl.children.item(1);
        var returnNode = myUl.replaceChild(liNew, li2);//返回的就是被替换掉的节点
        console.log(returnNode);
      });
    </script>
  </head>
  <body>
    <ul id="myUl">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>











cloneNode




<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>cloneNode()</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var myUl = document.getElementById("myUl");
        var newNode = myUl.cloneNode(true);//加了true之后是深度复制  连子节点一起复制了
        console.log(newNode);
        document.body.appendChild(newNode);
      });
    </script>
  </head>
  <body>
    <ul id="myUl">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>











normalize  合并









<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>normalize()</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var div = document.createElement("div");
        var textNode = document.createTextNode("DOM探索");
        div.appendChild(textNode);

        var textNode2 = document.createTextNode("之节点操作篇");
        div.appendChild(textNode2);
        document.body.appendChild(div);

        console.log(div.childNodes.length);
        div.normalize();
        console.log(div.childNodes.length);
        console.log(div.firstChild.nodeValue);//获得合并之后的内容
      });
    </script>
  </head>
  <body>
    <ul id="myUl">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>






spliteText  将一个文本节点分割为两个文本节点




<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>splitText()</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var div = document.createElement("div");
        var textNode = document.createTextNode("DOM探索之节点操作篇");
        div.appendChild(textNode);
        document.body.appendChild(div);

        var newNode = div.firstChild.splitText(5);//从第五个字符拆分
        console.log(div.firstChild.nodeValue);
        console.log(newNode.nodeValue);
        console.log(div.childNodes.length);
      });
    </script>
  </head>
  <body>
    <ul id="myUl">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>
















删除节点






















removeChild




<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>removeChild()</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var myUl = document.getElementById("myUl");
        console.log(myUl.childNodes.length);
        var secondChild = myUl.removeChild(myUl.childNodes[1]);//必须有参数
        console.log(secondChild);
        console.log(myUl.childNodes.length);
      });
    </script>
  </head>
  <body>
    <ul id="myUl">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>











removeNode


ie私有实现


将目标节点从文档中删除返回目标节点


参数为布尔值 默认false









<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>removeNode()</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var myUl = document.getElementById("myUl");
        var removedNode = myUl.removeNode(true);
        console.log(removedNode.outerHTML);
      });
    </script>
  </head>
  <body>
    <ul id="myUl">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>











removechild和innerHTML的区别







在ie6-8下removechild移除的节点还可以使用（折断树枝但树枝还可以使用）  而innerHTML相当于直接销毁了（拔掉树枝并烧掉）







在chrome下两者都是折断树枝依旧可以使用的

















总结






            
                
				
			阅读更多
		
        	

            

                            

            
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。

            

                
            

                    

        

            

                                    未上传头像
                                

                

                

            


                        

                
热门文章

                                

			
				CTF writeup 2_南邮网络攻防训...

                                

			
				SSM框架——详细整合教程（...

                                

			
				Linux Shell脚本编程－－curl命...

                                

			
				HttpClient使用详解			

                                

			
				Java面试题全集（上）			

                                

			
				JAVA设计模式之单例模式			

                                

			
				java.lang.OutOfMemoryError: PermGen ...

                                

			
				TCP协议中的三次握手和四次...

                                

			
				form表单的两种提交方式，su...

                                

			
				String,StringBuffer与StringBuilder...

                            

            
                        

                
最新文章
 
                                
Java之品优购课程讲义_day20（7）

                                
剑指 Offer - 8：跳台阶

                                
Netty权威指南_札记02_NIO编程

                                
mysql时间属性之时间戳和datetime之...

                                
虚拟现实或许可以拯救古埃及的“...

                                
spring cloud服务注册中心eureka---集群...

                                
Java SE 第六章

                                
HTTP请求+数据库

                                
HIDL学习笔记之HIDL C++（第二天）

                                
ubuntu系统下指定tomcat运行时为JDK1.8...

                            

                        
        

    





copyright © 2008-2019 亿联网络 版权所有 备案号：粤ICP备14031511号-2