zoukankan      html  css  js  c++  java
  • js操作节点

    js操作节点(添加、删除、更改属性)

    1.创建节点并添加内容:使用的方法:createElement和createTextNode

    <html>
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>HTML DOM</title>
            <script type=text/javascript>
    function Message()
            {
             var op=document.createElement("p");
             var oText=document.createTextNode("hello world!");
             op.appendChild(oText);
             document.body.appendChild(op);
            }
            </script>
    </head>
    <body onload="Message();">
    </body>
    </html>

    2,删除节点 方法:getElementsByTagName和removeChild

    <html>
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>HTML DOM</title>
            <script type=text/javascript>
            function removeMessage()
            {
             var op=document.body.getElementsByTagName("p")[0];
             op.parentNode.removeChild(op);
            }
            </script>
    </head>
    <body onload="removeMessage();">
            <p>hello world!</p>
    </body>
    </html>

    3.替换节点 方法replace(new,old)

    <html>
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <title>HTML DOM</title>
    <script type=text/javascript>
          function replaceMessage()
          {
           var oNewp=document.createElement("p");
           var oText=document.createTextNode("World Hello");
           oNewp.appendChild(oText);
           var oOldp=document.body.getElementsByTagName("p")[0];
           oOldp.parentNode.replaceChild(oNewp,oOldp);
          }
          </script>
    </head>
    <body onload="replaceMessage();">
          <p>hello world!</p>
    </body>
    </html>

    4.插入新消息 insertBefore(new,old)

    <html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
         <title>HTML DOM</title>
    <script type=text/javascript>
         function replaceMessage()
         {
          var oNewp=document.createElement("p");
          var oText=document.createTextNode("World Hello");
          oNewp.appendChild(oText);
          var oOldp=document.body.getElementsByTagName("p")[0];
          document.body.insertBefore(oNewp,oOldp);
         }
         </script>
    </head>
    <body onload="replaceMessage();">
         <p>hello world!</p>
    </body>
    </html>

    5,文档碎片

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>HTML DOM</title>
    <script type=text/javascript>
        /****************
         * 当向document中添加大量的节点时,如果逐个添加将会十分缓慢,这时可以使用文档碎片一次性添加到document中
         * 方法:createDocumentFragment()
         ********************************************/
        function replaceMessage()
        {
         var arrText=["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"];
         var oFragment=document.createDocumentFragment();//文档碎片
         for(var i=0;i<arrText.length;i++)
         {
          var op=document.createElement("p");
          var oText=document.createTextNode(arrText[i]);
          op.appendChild(oText);
          oFragment.appendChild(op);
         }
         document.body.appendChild(oFragment);
        }
        </script>
    </head>
    <body onload="replaceMessage();">
        <p>hello world!</p>
    </body>
    </html>

    6,操作document元素属性

    <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <title>HTML DOM</title>
       <script type=text/javascript>
       function   Load_message()
       {
        var oimg=document.getElementById("a");
           alert(oimg.getAttribute("border"));
        oimg.setAttribute("alt","DOM Test");
       }
       </script>
    </head>
    <body onload="Load_message();">
       <img border="0" width="100" height="150" id="a"/>
    </body>
    </html>

  • 相关阅读:
    迭代器和生成器
    案例:复制大文件
    案例:使用seek倒查获取日志文件的最后一行
    Leetcode165. Compare Version Numbers比较版本号
    Leetcode137. Single Number II只出现一次的数字2
    Leetcode129. Sum Root to Leaf Numbers求根到叶子节点数字之和
    Leetcode116. Populating Next Right Pointers in Each Node填充同一层的兄弟节点
    Leetcode114. Flatten Binary Tree to Linked List二叉树展开为链表
    Leetcode113. Path Sum II路径总和2
    C++stl中vector的几种常用构造方法
  • 原文地址:https://www.cnblogs.com/itcx/p/3556076.html
Copyright © 2011-2022 走看看