js+DOM创建和操作节点

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>

你可能感兴趣的:(dom)