javascript学习笔记之二（DOM操作）

最新推荐文章于 2024-08-22 10:43:59 发布

头不光不回头

最新推荐文章于 2024-08-22 10:43:59 发布

阅读量150

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_42742066/article/details/82354779

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JS DOM--document object model 文档对象模型将网页的元素构成一个有层次节点的文档。

       1.DOM的属性：
       childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
       children：获取作为对象直接后代的 DHTML 对象的集合
       firstChild : 返回第一个子节点
lastChild : 返回最后一个子节点
       nextSibling :获取该节点的下一个同级节点对象
previousSibling :获取该节点的上一个同级节点对象
       Elements :获取表单对象的下所有表单元素
ALL :所有的HTML元素节点[直接与间接节点]

       2.DOM的方法
       setAttribute(key,value)--给节点的某个属性设值也可以直接设置标签.type=""等
       createElement(element) ：创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针
       appendChild(node) ：插入节点（往节点内部）
       removeChild(node) ：将从一个给定元素利删除一个子节点，返回一个指向已被删除的子节点的引用指针。
       getElementById():寻找一个有着给定id属性值的元素，返回一个元素节点
       getElementsByTagName()通过标签名获取元素
       getElementsByClassName()通过类名获取元素

       3.节点通用属性：
       nodeName 返回节点名称（大写）
       nodeType 返回节点类型
       nodeValue 返回节点值

history学习

       history是用来封装访问页面历史记录（地址）
       history.back() :回退一个页面，相当于浏览上的回退按钮
       history.forward() ：前进以一个页面，相当于浏览器的前进按钮
       history.go():传一个整数位参数
                   1.正整数--向前跳指定页面个数
                   2.负整数--向后跳指定的页面个数

Location对象的学习：

           location--浏览器地址
           reload--刷新页面
               参数：true---缓存
           assin--加载新的文档

下面代码实现动态为表格填删除行，用节点方式

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title></title>
       <script type="text/javascript">
           /**
           * 实现动态为表格删除新增行
           */
           function addNewClow(){
               var new_tr=document.createElement("tr");
               var new_td1=document.createElement("input");
               new_td1.value="输入试试";
               new_td1.type="text";
               var new_td2=document.createElement("input");
               new_td2.value="删除";
               new_td2.type="button";
               new_td2.οnclick=function(){
                   document.getElementById("tb_1").removeChild(new_tr);
               }
               new_tr.appendChild(new_td1);
               new_tr.appendChild(new_td2);
               document.getElementById("tb_1").appendChild(new_tr);
           }
           function addNewClow2(){

           }
       </script>
   </head>
   <body>
       <table border="red 2px solid" width="400px" height="100px" id="tb_1">
           <tr>
               <td>文本值</td>
               <td><input type="button" name="" id="add_new" value="新增1" οnclick="addNewClow()" />
               <input type="button" name="" id="add_new2" value="新增2" οnclick="addNewClow2()" />
               </td>
           </tr>
       </table>
   </body>
</html>