JavaScript学习(6)-文档对象模型基础

JavaScript学习6-文档对象模型基础

1.节点方法

节点对象方法（W3C DOM Level2）

方法 说明
appendChild(newChild) 添加子节点到当前节点的末端
cloneNode(deep) 获取当前节点的拷贝
hasChildNodes() 确定当前节点是否具有子节点(Boolean)
insertBefore(new,ref) 在一个子节点前面插入一个新的子节点
removeChild(old) 删除一个子节点
replaceChild(new,old) 使用新的子节点替换旧的
isSupported(feature,version) 确定节点是否支持特定功能

看看增删改的几个方法把

<html>
<head>
    <title>js_14.5</title>
    <script type="text/javascript"> 
      var newelement=document.createElement("p");
      newelement.id="newp";
      newelement.setAttribute("style","background:#ff0000");
      var newText=document.createTextNode("I am a new p");
      newelement.appendChild(newText);
      var parentElement;
      function load(){
        parentElement=document.getElementById("parentNode");
      }
      function callme(){
        alert("I am a new button");
      }
      function add(){     
        parentElement.appendChild(newelement);
      }
      function insert(){
        var newinput=document.createElement("input");
        newinput.id="inputBtn";
        newinput.setAttribute("type","button");
        newinput.setAttribute("onclick","callme()");
        newinput.value="insert button";
        parentElement.appendChild(newinput);
      }
      function replace(){
        var newText=document.createElement("input");
        newText.id="newText1";
        newText.type="text";
        parentElement.replaceChild(newText,newelement)
      }
      function removeNode(){
        var oldText=document.getElementById("newText1");
        parentElement.removeChild(oldText);
      }
    </script>
</head>
<body onload="load()">
    <input type="button" name="AddBtn" value="Add" onclick="add()">
    <input type="button" name="InsertBtn" value="Insert" onclick="insert()">
    <input type="button" name="ReplaceBtn" value="Replace" onclick="replace()">
    <input type="button" name="RemoveBtn" value="Remove" onclick="removeNode()">
    <h3>node object method show</h3>
    <div id="showDiv">
        <p id="parentNode">this is parent node</p>
 
    </div>
</body>
</html>
posted @ 2015-01-16 01:24  KeithMorning  阅读(327)  评论(0)  编辑  收藏  举报