zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    PCB 规则引擎之脚本语言JavaScript应用评测
    PCB 挺有意思的基数排序----C#代码实现
    PCB NOSQL MongoDb MI流程指示数据存储结构
    PCB javascript解析Gerber274X格式实现方法
    PCB javascript解析钻孔(Excellon)格式实现方法
    PCB 围绕CAM自动化,打造PCB规则引擎
    PCB Genesis拼SET画工艺边 实现方法(一)
    约瑟夫环的三种解法
    Microsoft edge真香!
    商城规格参数
  • 原文地址:https://www.cnblogs.com/keithmoring/p/4227593.html
Copyright © 2011-2022 走看看