javascript学习笔记之二(DOM操作)

  • 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>

效果图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值