码迷,mamicode.com
首页 > Web开发 > 详细

js05-DOM对象二

时间:2018-09-02 20:28:44      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:har   css   元素   加载完成   length   对象   技术   gif   box   

一、节点操作

创建节点: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事件

 

js05-DOM对象二

标签:har   css   元素   加载完成   length   对象   技术   gif   box   

原文地址:https://www.cnblogs.com/lovepy3/p/9574548.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!