js05-DOM对象二

一、节点操作

创建节点：var ele_a = document.createElement('a');
添加节点：ele_parent.appendChild(ele_img);
删除节点：ele_parent.removeChild(ele_p);
替换节点：ele_parent.replaceChild(新标签,旧标签);

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>节点操作</title>

    <style>

        .c1 {

            width: 300px;

            height: 200px;

            border: 1px solid red;

        }

    </style>

</head>

<body>

<div class="c1">

    <p id="p1">年后</p>

    <p id="p2">hello</p>

</div>

<button class="addBtn">ADD</button>

<button class="delBtn">DEL</button>

<button class="replaceBtn">Replace</button>

<ul>

    <li>创建节点：var ele_a = document.createElement('a');</li>

    <li>添加节点：ele_parent.appendChild(ele_img);</li>

    <li>删除节点：ele_parent.removeChild(ele_p);</li>

    <li>替换节点：ele_parent.replaceChild(新标签,旧标签);</li>

</ul>

<table border="1">

    <tbody id="t1">

        <tr>

            <td><input type="checkbox"></td>

            <td><input type="text"></td>

            <td><button class="delbtn">del1</button></td>

        </tr>

        <tr>

            <td><input type="checkbox"></td>

            <td><input type="text"></td>

            <td><button class="delbtn">del2</button></td>

        </tr>

        <tr>

            <td><input type="checkbox"></td>

            <td><input type="text"></td>

            <td><button class="delbtn">del3</button></td>

        </tr>

        <tr>

            <td><input type="checkbox"></td>

            <td><input type="text"></td>

            <td><button class="delbtn">del4</button></td>

        </tr>

    </tbody>

</table>

<script>

    var ele_add = document.getElementsByClassName('addBtn')[0];

    var ele_del = document.getElementsByClassName('delBtn')[0];

    var ele_repleace = document.getElementsByClassName('replaceBtn')[0];

    console.log(ele_add);

    //绑定的添加节点的事件

    ele_add.onclick = function () {

        //先创建一个标签

        var ele_a = document.createElement('a');

        console.log(ele_a); //<a></a>

        ele_a.innerHTML = '点击'; //<a>点击</a>

        ele_a.href = 'http://www.baidu.com'; //<a href='http://www.baidu.com'>点击</a>

        //先创建一个标签

        var ele_img = document.createElement('img');

        ele_img.src = '1.png';

        ele_img.width = 50;

        ele_img.height = 50;

        //找到父标签

        var ele_parent = document.getElementsByClassName('c1')[0];

        //然后添加

        ele_parent.appendChild(ele_a);

        ele_parent.appendChild(ele_img);

    };

    //绑定的删除节点的事件

    ele_del.onclick = function () {

        //先获取要删除的元素

        var ele_p = document.getElementById('p1');

        //获取它的父元素

        var ele_parent = document.getElementsByClassName('c1')[0];

        //然后删除（注意是父元素删除子元素）

        ele_parent.removeChild(ele_p)

    };

    //绑定的替换节点的事件

    ele_repleace.onclick = function () {

        //找被替换的标签（旧标签）

        var ele_p = document.getElementById('p2');

        //创建一个替换后的标签（新标签）

        var ele_img = document.createElement('img');

        ele_img.src = '2.png';

        ele_img.width = 100;

        ele_img.height = 50;

        //找到父节点

        var ele_parent = document.getElementsByClassName('c1')[0];

        //做替换（父节点替换子节点中的某一个节点）：相当于一次删除加一次添加

        ele_parent.replaceChild(ele_img, ele_p);

    }

</script>

<script>

    //绑定删除节点的事件

    var ele_dels = document.getElementsByClassName('delbtn');

    for(var i=0;i<ele_dels.length;i++){

        ele_dels[i].onclick = function () {

            //获取删除的元素

            var ele_tr = this.parentElement.parentElement;

//            console.log(ele_tr)

            //找到父节点

            var ele_tbody_parent =document.getElementById('t1');

            //然后删除

            ele_tbody_parent.removeChild(ele_tr)

        }

    }

</script>

</body>

</html>

具体的节点操作实例

节点例子

二、onload事件

onload 属性开发中只给 body元素加.这个属性的触发标志着页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

什么时候加载完什么时候触发（如果你想把script放在body上面去，就用到onload事件了）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #box{

                width: 300px;

                height: 300px;

                background-color: green;

                margin: 0 auto;

            }

        </style>

        <script type="text/javascript">

            window.onload = function(){

                var box1 = document.getElementById("box");

                box1.style.width = 200 + "px";

                box1.style.height = 200 + "px";

                box1.style.marginTop = 50 + "px";

            }

        </script>

    </head>

    <body>

        <div onclick="click1(this)" id="box" >

            <p id="bode">我有一头小毛驴,我从来也不骑,有一天我心血来潮骑着去赶集.....</p>

        </div>

    </body>

</html>

onload事件

三、onkeydown事件

Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>event事件</title>

    </head>

    <body>

        <input type="text" name="" id="t1" value="" />

    </body>

    <script type="text/javascript">

        var keyStat = document.getElementById("t1");

        keyStat.onkeydown = function(event){

            var num = event.keyCode;

            console.log(event);

            console.log(event.keyCode);

            console.log(String.fromCharCode(num))

            if (event.keyCode == 13) {

                alert("你按下了回车键!")

            } else{

            }

        }

    </script>

</html>

event事件

四、onsubmit事件

当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>onsubmit事件</title>

        <!--在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.-->

      <!--提交按钮本身就有一个默认事件（你点击提交的时候就会把数据发过去）-->

    </head>

    <body>

        <form action="https://www.baidu.com" method="get" id="sub">

            用户名:

            <input type="text" value="" class="user"/>

            密码:

            <input type="password" value="" class="pwd"/>

            <input type="submit" />

        </form>

    </body>

     <!--提交按钮被点击时,判断用户名和密码是否和数据库中的吻合--> 

    <script type="text/javascript">

        var submit1 = document.getElementById("sub");

        var username = document.getElementsByClassName("user")[0];

        var passwd = document.getElementsByClassName("pwd")[0];

        submit1.onsubmit = function(event){

            var uName = username.value;

            var passWd = passwd.value;

            if (uName == "jack" && passWd == "123") {

                alert("登录成功")

            } else{

                alert("登录失败")

//                event.preventDefault() //默认阻止提交

                //方法2

                return false        //如果不阻止提交,会跳向action的网址.

            }

        }

    </script>

</html>

五、事件传播

本例中:box2是box1的子元素,默认继承了box1的事件.所以点击box2的时候,也会执行box1元素的点击事件.如果不想让box2执行,就必须阻止事件传播.具体看代码.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>事件传播</title>

<!--因为盒子1是盒子2的父亲，所以当给父亲绑定一个事件，给儿子也绑定一个事件，就像

  继承一样，儿子会继承父亲的事件，所以现在运行的时候如果点击盒子2，会把自己的是事件和

  父亲的事件都执行了。所以如果只想让儿子执行自己的事件，那么就得阻止发生事件传播-->

    </head>

    <style type="text/css">

        *{padding: 0;margin: 0;}

        #box1{

            width: 300px;

            height: 300px;

            background: red;

            position: relative;

        }

        #box2{

            width: 150px;

            height: 150px;

            background: green;

            position: absolute;

            left: 400px;

        }

    </style>

    <body>

        <div id="box1">

            <div id="box2"></div>

        </div>

    </body>

    <script type="text/javascript">

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

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

        box1.onclick = function(){

            alert(1111111)

        }

        box2.onclick = function(event){

            alert(222)

            //阻止事件传播

            event.stopPropagation()

        }

    </script>

</html>

事件传播