核心DOM与HTML DOM

最新推荐文章于 2022-10-19 23:11:53 发布

Albert-Wilson

最新推荐文章于 2022-10-19 23:11:53 发布

阅读量461

点赞数

分类专栏： JavaScript 文章标签： JavaScript 核心DOM HTML DOM

本文链接：https://blog.csdn.net/hxwm_8937/article/details/77453160

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 
  核心DOM之节点的修改
  
  节点的修改： 
  1.创建节点

 
 2.复制节点 

 
 3.删除节点 

 
 4.替换节点 

 
 1.创建节点—— 
 createElement 

 
 insertBefore 
 ： 
 放在什么之前 

 
 <body> 

 
 <div id="div1"> 

 
 <h1>喜欢的图片</h1> 

 
 <button οnclick="newNode()">增加一幅图片</button> 

 
 <br> 

 
 <img id="img1" src="../../img/3.jpg" alt=""> 

 
 </div> 

 
 </body> 

 
 <script> 

 
 function newNode() { 

 
  
 var div1 = document.getElementById("div1"); 

 
 var oldNode = document.getElementById("img1"); 

 
 var image = 
  document.createElement 
 ("img"); 

 
 image.src = "../../img/2.jpg"; 

 
 div1. 
 insertBefore(image,oldNode);

}

 
 </script> 

 
 2.复制节点—— 
 cloneNode 

 
 appendChild： 
 放在什么之后 

 
 <body> 

 
 <div id="div1"> 

 
 <h1>喜欢的图片</h1> 

 
 <button οnclick="copyNode()">复制图片</button> 

 
 <br> 

 
 <img id="img1" src="../../img/3.jpg" alt=""> 

 
 </div> 

 
 </body> 

 
 <script> 

 
 function copyNode() { 

 
  
 var image = document.getElementById("img1"); 

 
 var copyIamge = 
  image.cloneNode 
 (); 

 
 document.body. 
 appendChild 
 (copyIamge) 
 ;

}

 
 </script> 

 
 3.删除节点—— 
 removeChild 

 
 <body> 

 
 <h1>图片</h1> 

 
 <img id="img1" src="../../img/4.jpg" alt=""> 

 
 <button οnclick="remove1()">删除图片</button> 

 
 </body> 

 
 <script> 

 
 function remove1(){ 

 
  
 var img1 = document.getElementById("img1"); 

 
 document.body.removeChild 
 (img1);

}

 
 </script> 

 
 4.替换节点—— 
 replaceChild 

 
 <body> 

 
 <h1>图片</h1> 

 
 <img id="img1" src="../../img/4.jpg" alt=""> 

 
 <button οnclick="replace1()">替换图片</button> 

 
 </body> 

 
 <script> 

 
 function replace1() { 

 
  
 var oldIamge = document.getElementById("img1"); 

 
 var newImage = document.createElement("img"); 

 
 newImage 
 .src 
  = "../../img/2.jpg"; 

 
 document.body.replaceChild 
 (newImage,oldIamge);

}

 
 </script> 

 
  </script> 
 
  HTML DOM之表格行列的修改 
  
    表格对象： 
    1.增加一行 
   
    2.删除第几行 
   
    3.修改标题 
   
    4.实现购物车删除栏效果 
   
    1.增加一行—— 
    insertRow 
   
    增加该行中的第几列—— 
    insertCell 
   
    <body> 
   
    <table id="myTable" border="1" style="border-collapse: collapse" width="300" height="100"> 
   
    <tr> 
   
    <td>书名</td> 
   
    <td>价格</td> 
   
    <td><button οnclick="delete3(this)">删除</button></td> 
   
    </tr> 
   
    <tr> 
   
    <td>看得见风景的房间</td> 
   
    <td>￥30</td> 
   
    <td><button οnclick="delete3(this)">删除</button></td> 
   
    </tr> 
   
    <tr id="tr2"> 
   
    <td>幸福从天而降</td> 
   
    <td>￥18.5</td> 
   
    <td><button οnclick="delete3(this)">删除</button></td> 
   
    </tr> 
   
    <tr> 
   
    <td>60个瞬间</td> 
   
    <td>￥32</td> 
   
    <td><button οnclick="delete3(this)">删除</button></td> 
   
    </tr> 
   
    </table> 
   
    <button οnclick="insert1()">增加一行</button> 
   
    </body> 
   
    <script> 
   
    function insert1() { 
   
    var table = document.getElementById("myTable"); 
   
    var row1 = 
     table.insertRow(2) 
    ; 
   
    var cell1 = 
     row1.insertCell(0) 
    ; 
   
    var cell2 = row1.insertCell(1); 
   
    var cell3 = row1.insertCell(2); 
   
    cell1 
    .innerHTML  
    = "钢铁是怎样炼成的"; 
   
    cell2.innerHTML = "￥50"; 
   
    cell3.innerHTML = "<button οnclick='delete3(this)'>删除</button>"; 
   
    } 
   
    </script> 
   
    2.删除第几行—— 
    deleteRow 
   
    <body> 
   
    <button οnclick="delete2()">删除第二行</button> 
   
    <script> 
   
    function delete2() { 
   
    var table = document.getElementById("myTable"); 
   
    table.deleteRow(1) 
    ; 
   
    } 
   
    </script> 
   
    3.修改标题—— 
    row[] 
    ：返回某一行 
   
    <body> 
   
    <button οnclick="changeTitle()">修改标题</button> 
   
    </body> 
   
    <script> 
   
    function changeTitle() { 
   
    var table = document.getElementById("myTable"); 
   
    table.rows[0].cells[0].align 
     = "center"; 
   
    table.rows[0].cells[1].align = "center"; 
   
    } 
   
    </script> 
   
    4.实现购物车删除栏效果—— 
    rowIndex[] 
    ：返回该行所在的行数 
   
    <body> 
   
    <table id="myTable" border="1" style="border-collapse: collapse" width="300" height="100"> 
   
    <tr> 
   
    <td>书名</td> 
   
    <td>价格</td> 
   
    <td> 
    <button οnclick="delete3 
    (this 
    )">删除</button> 
    </td> 
   
    </tr> 
   
    <tr> 
   
    <td>看得见风景的房间</td> 
   
    <td>￥30</td> 
   
    <td> 
    <button οnclick="delete3 
    (this 
    )">删除</button> 
    </td> 
   
    </tr> 
   
    <tr id="tr2"> 
   
    <td>幸福从天而降</td> 
   
    <td>￥18.5</td> 
   
    <td> 
    <button οnclick="delete3 
    (this 
    )">删除</button> 
    </td> 
   
    </tr> 
   
    <tr> 
   
    <td>60个瞬间</td> 
   
    <td>￥32</td> 
   
    <td> 
    <button οnclick="delete3 
    (this 
    )">删除</button> 
    </td> 
   
    </tr> 
   
    </table> 
   
    </body> 
   
    <script> 
   
    function delete3(obj) { 
   
    var num = 
     obj.parentNode.parentNode 
    .rowIndex 
    ; 
   
    var table = document.getElementById("myTable"); 
   
    table.deleteRow(num) 
    ; 
   
    } 
   
    </script>