QM.C

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

JS DOM 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /*
        1.获取元素节点
        1）直接获取
            【1】document.getElementById()
            【2】document.getElementByName()
            【3】document.getElementByTagName()
         */
        function getEle(){
            var obj = document.getElementById("sec");
            console.log(typeof obj);
            console.log(obj);
        }

        window.setInterval(getEles,1000);
        function getEles(){
            var sec = document.getElementById("sec").innerHTML;
            var number = parseInt(sec);
            document.getElementById("sec").innerHTML = --number;
            if(sec==0){
               window.close();
            }

        }

        function getEle2(){
            //获取的是一个数组
            var obj = document.getElementsByName("fav");
            console.log(obj)
        }

        function getEle3(){
            var obj = document.getElementsByTagName("input");
            console.log(obj);
       }

        /*
        2)间接获取
            父子关系
            childNodes firstChild lastChild
            子父关系
            parentNode
            兄弟关系
            nextSibling previousSibling
        */
        function getEle4(){
            var father = document.getElementById("regForm");
            var sons = father.childNodes;
            console.log(sons[1]);
        }

        function getEle5(){
            var sons = document.getElementById("userid");
            console.log(sons.parentNode);
        }

        function getEle6(){
            var bro = document.getElementById("userid");
            console.log(bro.nextSibling.nextSibling);
            console.log(bro.previousSibling);
        }

        /*
        * 2.操作属性节点
        *1)通过对象“.”属性
        *   优点：可以动态获取用户修改的属性值
        *   缺点：不能获取自定义属性的值
        * 2)getAttribute  setAttribute  removeAttribute
        *   优点：可以获取自定义属性的值
        *   缺点：不能动态获取用户修改的属性值
        *   */


        function getField1(){
            var obj = document.getElementById("nickid");
            console.log(obj.type);

//            obj.type = "password";
        var objval = obj.getAttribute("abcd");
        var objval2 = obj.setAttribute("abcd",5678);
        }
        /*
         * 3.处理文本节点
         *1)通过对象.innerText获取标签内部的文本信息
         * 2)通过对象.innerHTML获取标签内部的HTML代码
         * */
        function getText1(){
           var myDiv = document.getElementById("myDiv")
            console.log(myDiv.innerText);

        }

        function getText2(){
            var myDiv = document.getElementById("myDiv")
            console.log(myDiv.innerHTML);

        }
        function getText3(){
            var myDiv = document.getElementById("myDiv")
            myDiv.innerText = "<img src='1.jpg'/>";

        }
        function getText4(){
            var myDiv = document.getElementById("myDiv")
            myDiv.innerHTML = "<img src='webp.jpg' height='200px' width='200px'/>";

        }

    </script>
</head>
<body>

<button onclick="getEle()">点我测试！</button>
<button onclick="getEle2()">点我测试2！</button>
<button onclick="getEle3()">点我测试3！</button>
<button onclick="getEle4()">点我测试4！</button>
<button onclick="getEle5()">点我测试5！</button>
<button onclick="getEle6()">点我测试6！</button>
<hr/>
<button onclick="getField1()">属性测试1！</button>
<hr/>
<button onclick="getText1()">文本测试1！</button>
<button onclick="getText2()">文本测试2！</button>
<button onclick="getText3()">文本测试3！</button>
<button onclick="getText4()">文本测试4！</button>
<form id="regForm">
    用户名：<input id="userid" type="text" name="username"/><br/>
    密码：<input type="password" name="password"><br/>
    昵称：<input id="nickid" type="text" name="nickname" abcd="1234"><br/>
    性别：男<input type="radio" name="gender" value="nan">&nbsp;
          女<input type="radio" name="gender" value="nv"><br/>
    爱好：狗<input type="checkbox" name="fav" value="dog">
    猫<input type="checkbox" name="fav" value="cat"><br/>
    <input type="submit" value="注册">;

</form>
页面将在<span id="sec">1000</span>s后关闭


<p id="myDiv">hello</p>
</body>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="application/javascript">
        /*
        4.动态改变DOM结构
        1）创建一个节点对象
        document.createElement("标签名")
        2）（父节点）追加子节点对象
        fatherNode.appendChild("子节点对象")
        3）（父节点）在指定节点前添加子节点
        fatherNode.insertBefore(新节点对象参考节点对象)
        4）（父节点）替换旧的子节点对象
        fatherNode.replaceChild(新节点对象，旧节点对象)
        5)（父节点）删除旧的子节点对象
        fatherNode.removeChild(旧节点对象)

        .
        * */
        function changeDom1(){
            var ipt = document.createElement("input");
            ipt.type = "text";
        }
        function changeDom2(){
            var father = document.getElementById("regForm");

            var ipt = document.createElement("input");
            ipt.type = "text";
            father.appendChild(ipt);

        }
        function changeDom3(){
            var father = document.getElementById("regForm");
            //参考节点
            var refNode = document.getElementById("brid");

            var ipt = document.createElement("input");
            ipt.type = "text";
            father.insertBefore(ipt,refNode);
        }
        function changeDom4(){
            var father = document.getElementById("regForm");
            //参考节点
            var refNode = document.getElementById("brid");

            var ipt = document.createElement("input");
            ipt.type = "text";
            father.replaceChild(ipt,refNode);
        }

        function changeDom5(){
            var father = document.getElementById("regForm");
            var refChild = document.getElementById("nickid");
            father.removeChild(refChild);
        }


    </script>
</head>
<body>
<button onclick="changeDom1()"> 创建节点</button>
<button onclick="changeDom2()"> 追加子节点对象</button>
<button onclick="changeDom3()"> 插入子节点对象</button>
<button onclick="changeDom4()"> 替换子节点对象</button>
<button onclick="changeDom5()"> 删除子节点对象</button>
<hr/>
<form id="regForm">
    用户名：<input id="userid" type="text" name="username"/><br/>
    密码：<input type="password" name="password"><br id="brid"/>
    昵称：<input id="nickid" type="text" name="nickname" abcd="1234"><br/>
    性别：男<input type="radio" name="gender" value="nan">&nbsp;
    女<input type="radio" name="gender" value="nv"><br/>
    爱好：狗<input type="checkbox" name="fav" value="dog">
    猫<input type="checkbox" name="fav" value="cat"><br/>
    <input type="submit" value="注册">

</form>
<hr/>

<table id="tableid" border="1" style="border-collapse: collapse">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
        <td><a href="javascript:void(0)" onclick="deleteRow(this),confirmDemo()">删除</a> </td>
    </tr>
    <tr>
        <td>李四</td>
        <td>19</td>
        <td>男</td>
        <td><a href="javascript:void(0)" onclick="deleteRow(this),confirmDemo()">删除</a> </td>
    </tr>

</table>

<script type="application/javascript">
    function deleteRow(item){
        var delNode = item.parentNode.parentNode;
        var father = delNode.parentNode;
        father.removeChild(delNode);
    }
    function confirmDemo(){
        confirmDemo("是否确定删除");
    }
</script>

</body>
</html>

 

</html>

 

posted on 2019-05-05 18:09  QM.C  阅读(199)  评论(0)    收藏  举报