节点和属性的操作方法

发表于

createElement和createNodeValue，将创建的节点用appendChild添加到元素当中

  • 创建节点：
    • createElement()
    • createAttribute()
    • createTextNode()
    • createFragment()
    • createFragment()
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
          var oDiv = document.createElement("div");
          document.body.appendChild(oDiv);
          oDiv.setAttribute("tittle","my demo");
          var  oTextNode=document.createTextNode("my demo");
          var mes = document.createTextNode("Hello World");
          var container = document.createElement("p");
          container.appendChild(mes);
          document.body.appendChild(container);
          oDiv.appendChild(oTextNode);
      //    元素节点是没有nodeValue的只有文本节点才有nodeValue；
      //    在ie9以下的ie浏览器中国，回车换行不算一个文本节点，但标准浏览器中这是个文本节点。
          //下为使用createDocumentFragment()作为仓库向元素中appendChild.
           var oUl= document.createElement("ul");
           oDiv.appendChild(oUl);
           var frg = document.createDocumentFragment();
           var oLi = null;
           for(var i=0;i<10;i++){
               oLi = document.createElement("li");
               oLi.appendChild(document.createTextNode('这是第'+(i+1)+'个li。'));
               frg.appendChild(oLi);
           };
           oUl.appendChild(frg);

插入节点：appendChild(node)和insertBefore(newNode,oldNode);

  • 下例为insertBefore():
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div id="parent">
        <p id="content">珠峰培训，专注前端面向未来</p>
        <div id="msg">msg   <div>test</div></div>
        <p id="222">222</p>
        <p id="aaa">aaaaaaaa</p>
    </div>
    <script>
        var msg =document.getElementById("msg");
        var aaa= document.getElementById("aaa");
        var parent = document.getElementById("parent");
        parent.insertBefore( msg, aaa); //将msg节点调度到aaa前面

替换节点：replaceChild(newNode,oldNode);

  • 被替换的节点没有消失，只是在文档树中被移除了没有了它的位置。
  • 如果替换成功返回被替换的节点，如果失败返回null。

    复制节点 cloneNode(boolean)：

  • cloneNode()的参数是一个boolean值:
    • true: 深复制 –》赋值本身节点及其整个子节点树
    • false：浅复制–》只复制节点本身

      删除节点 removeChild(node)

  • 如果删除成功返回被删除的节点，如果不成功则返回null;

    判断节点 node.hasChildNodes(node1)

  • 判断node的子节点中是否存在node1，如果存在返回true，如果不存在返回false

    属性操作;

  1. getAttribute() 若果属性存在的话就返回value，如果不存在就返回空；
  2. setAttribute(value,att)
  3. removeAttribute(att); 删除属性
  4. hasAttribute(att) 判断att是否在，返回一个boolean值