js----DOM对象(事件)

节点操作：

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

添加节点：ele_parent.appendChild(ele_img);

删除节点：ele_parent.removeChild(ele_p);
删除父元素下所有子节点：ele_parent.innerHTML = ""   ,也可以用循环做(循环父元素的子元素的个数，循环删除)

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

事件：

onload事件

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>节点操作</title>

    <style>

        .c1 {

            width: 300px;

            height: 200px;

            border: 1px solid red;

        }

    </style>

    <script>

        //如果要把script写在body的上面就可以用onload事件

        //onload什么时候加载完什么时候触发这个事件

        window.onload = function () {

            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);

            };

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

            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>

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

</body>

</html>

onload事件(基于节点操作的修改)

示例1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

         /*

              window.onload=function(){

                   var ele=document.getElementById("ppp");

                   ele.onclick=function(){

                   alert(123)

                };

             };

         */

          function fun() {

              var ele=document.getElementById("ppp");

               ele.onclick=function(){

                alert(123)

            };

          }

    </script>

</head>

<body onload="fun()">

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

</body>

</html>

onload示例二

示例2

onkeydown事件

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text" class="test">

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

<script>

    //测试event对象

    var ele = document.getElementsByClassName('test')[0];

//    event :每次触发事件时所有的状态信息

//    event.keyCode ：保存着所有的状态信息

    ele.onkeydown =function (event) {

//        onkeydown按下键盘触发的事件

        console.log(event);

        console.log(event.keyCode);

        if (event.keyCode==13){

            //按回车就会弹出

            alert(666)

        }

    }

</script>

<script type="text/javascript">

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

    ele.onkeydown=function(e){

        e=e||window.event;

        var keynum=e.keyCode;

        var keychar=String.fromCharCode(keynum);

//        console.log(keynum); //每次键盘敲下的状态信息

//        console.log(keychar);  //输入的字符

//        alert(keynum);

//        alert(keychar)  //你键盘输入的字符

    };

</script>

</body>

</html>

onkeydown事件

示例

onsubmit事件

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>onsubmit事件</title>

    <!--onsubmit事件:确定按钮被点击-->

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

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

</head>

<body>

<form action="" id="submit">

    <p>姓名：<input type="text" class="name"></p>

    <p>年龄：<input type="text" class="age"></p>

    <input type="submit">

</form>

<input type="text" class="test">

<script>

    var ele_form = document.getElementById('submit');

    var ele_name = document.getElementsByClassName('name')[0];

    var ele_age = document.getElementsByClassName('age')[0];

    ele_form.onsubmit = function (event) {

        var username = ele_name.value;

        var age = ele_age.value;

        alert(username);

        alert(age);

        if (username=='haiyan'){

            //阻止默认事件的两种方式

//            方式一：

//            return false;

//            方式二

//            给函数给一个形参，这个形参写什么都行，一般我们写成event

            event.preventDefault() //阻止默认事件（表单的提交）

        }

    }

</script>

<script>

    //测试event对象

    var ele = document.getElementsByClassName('test')[0];

//    event :每次触发事件时所有的状态信息

//    event.keyCode ：保存着所有的状态信息

    ele.onkeydown =function (event) {

//        onkeydown按下键盘触发的事件

        console.log(event);

        console.log(event.keyCode);

        if (event.keyCode==13){

            //按回车就会弹出

            alert(666)

        }

    }

</script>

</body>

</html>

onsubmit

示例

事件传播

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件传播</title>

    <style>

        .box1 {

            width: 300px;

            height: 300px;

            background-color: rebeccapurple;

        }

        .box2{

            width: 150px;

            height: 150px;

            background-color: yellow;

        }

    </style>

</head>

<body>

<div class="box1">

    <div class="box2"></div>

</div>

<script>

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

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

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

    var ele1 = document.getElementsByClassName('box1')[0];

    var ele2 = document.getElementsByClassName('box2')[0];

    ele1.onclick = function () {

        alert(123)

    };

    ele2.onclick = function (event) {

        alert(456);

        console.log(event);

        console.log(event.keyCode);

        //    阻止事件传播的方式

        event.stopPropagation();

    };

</script>

</body>

</html>

事件传播

示例

onchange事件

当标签发生改变的时候

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>onchange事件</title>

</head>

<body>

<select name="" id="s1">

    <option value="">甘肃省</option>

    <option value="">安徽省</option>

    <option value="">湖北省</option>

</select>

<script>

    var ele = document.getElementById('s1');

    //下拉菜单，和你当前事件不同的时候出发事件

    ele.onchange= function () {

        alert(123)

    }

</script>

</body>

</html>

onchange

示例

用onchange事件实现二级联动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>二级联动</title>

</head>

<body>

<select name="" id="s1">

    <option value="">请选择省份</option>

    <option value="gansu">甘肃省</option>

    <option value="hebei">河北省</option>

    <option value="henan">河南省</option>

</select>

<select name="" id="c1">

    <option value="city">请选择城市</option>

</select>

<script>

    var data = {'gansu':['兰州市','天水市','武威市'],'hebei':['保定','石家庄'],'henan':['郑州','开封']}

    var ele_select = document.getElementById('s1');

    var ele_critys = document.getElementById('c1');//父亲标签

    ele_select.onchange  =function () {

        ele_critys.innerHTML=""      //清除所有的子元素

        var ele_provice = this.value;

        var citys = data[ele_provice];

        console.log(citys);

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

            var ele_option = document.createElement('option');

            ele_option.innerHTML = citys[i]

            ele_option.value = i + 1;

            console.log(ele_option);

            ele_critys.appendChild(ele_option);

        }

    }

</script>

</body>

</html>

onmouse事件(鼠标移进去，移出来)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>onmouse事件</title>

    <style>

        .box{

            width: 300%;

            /*height: 200px;*/

        }

        .title{

            background: steelblue;

            line-height: 40px;

        }

        .con{

            background: slategray;

            line-height: 30px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div class="box">

    <div class="title">onmouse</div>

    <div class="con hide">

        <div><a href="" class="item">你好吗？</a></div>

        <div><a href="" class="item">我好啊</a></div>

        <div><a href="" class="item">好就好呗</a></div>

    </div>

</div>

<script>

    var ele_title = document.getElementsByClassName('title')[0];

    var ele_box = document.getElementsByClassName('box')[0];

    //鼠标指上去的事件

    ele_title.onmouseover = function () {

        this.nextElementSibling.classList.remove('hide');

    };

    //鼠标移走的事件的两种方式

//    方式一（推荐）

     ele_box.onmouseleave= function () {

        ele_title.nextElementSibling.classList.add('hide');

    };

//    方式二

//        ele_box.onmouseout = function () {

//            console.log("1")

//           ele_title.nextElementSibling.classList.add('hide');

//        }

//    方式一和方式二的区别：

//    不同点

//      onmouseout：不论鼠标指针离开被选元素还是任何子元素，都会触发onmouseout事件

//      onmouseleave：只有在鼠标指针离开被选元素时，才会触发onmouseleave事件

//    相同点：都是鼠标移走触发事件

</script>

</body>

</html>

事件委派：

还没有实现功能

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件委派（委派给所有的子元素）</title>

</head>

<body>

<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

</ul>

<button class="addbtn">点我添加</button>

</body>

<script>

    var ele_btn = document.getElementsByClassName('addbtn')[0];

    var ele_ul = document.getElementsByTagName('ul')[0];

    var ele_li =document.getElementsByTagName('li');

    //绑定事件

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

         ele_li[i].onclick = function () {

            alert(this.innerHTML)

        }

    }

    //事件委派

    ele_btn.onclick = function () {

        var ele_li = document.createElement('li');

        ele_li.innerText = Math.round(Math.random()*1000);

        ele_ul.appendChild(ele_li);//吧创建的li标签添加到ul标签

//         ele_ul.addEventListener('click',function (e) {

//             if (e.target.tagName=='LI'){

//                 console.log('ok');

// //              alert(ele_li.innerHTML)

//             }

//         })

    }

</script>

</html>

js----DOM对象(事件)的更多相关文章

JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
2018-06-19 js DOM对象
DOM对象: Doucument Object Model即文档对象 DOM对象的操作: 1.找元素返回元素对象: var obj=document.getElementById();//通过Id查 ...
JS & DOM 对象
22:36 2013/6/4 详情参照W3C文档标准 Browser 对象(顶层对象) DOM Window DOM Navigator DOM Screen DOM History DOM Loca ...
引用 1.9.1.min.js dom对象没有live 绑定事件方法，引用 1.7.js 就有live 绑定事件方法
问题:相同环境,引用 1.9.1.min.js $('div[data-role="page"]').live('pagehide', function (event, ui) { ...
w3c标准 dom对象事件冒泡和事件捕获
http://www.cnblogs.com/chengxs/p/6388779.html http://www.jb51.net/article/42492.htm W3C标准是什么? 1.表现(c ...
Node.js自定义对象事件监听与发射
一.Node.js是以事件驱动的,那我们自定义的一些js对象就需要能监听事件以及发射事件.在Node.js中事件使用一个EventEmitter对象发出,该对象在events模块中.它应该是使用观察者 ...
JS 操作对象事件样式
1.获取标记对象 css 1 - class 2 - id 3 - 标记选择器 js 1 - class 2 - id 3 - 标记 4 - name + document.getElementByI ...
js Dom对象的属性与方法
1.对象集合: (1).all[]; (2).images[]; (3).anchors[]; (4).forms[]; (5).links[]; ...
js DOM常见事件
js事件命名为on+动词 1.onclick事件,点击鼠标时触发,ondbclick双击事件 <h1 onclick="this.innerHTML='点击后文本'"> ...
JS DOM对象与jQuery对象的转换
JS转jQuery // 直接用$()来包裹如同$(this) $(document) var jsObj = document.getElementById('test'); var jquery ...

随机推荐

Java记录-SpringMVC整合Echarts画地图加散点图
1.搭建eclipse+JDK+Maven+SpringMVC+Spring+Mybatis后台架构,详细就不过多阐述了 2.下载百度eharts插件:http://echarts.baidu.com ...
Web压力测试工具 LoadRunner12.x简易入门教程--（一）回放与录制
LoadRunner12.x简易入门教程--(一)回放与录制今天在这里分享一下LoadRunner12.x版本的入门使用方法,希望对刚接触LoadRunner的童鞋有所帮助. LoadRun ...
UVALive - 7639 G - Extreme XOR Sum（思维）
题目链接题意给出一个序列,相邻两两异或,生成一个新序列,再相邻两两异或,直到只剩下一个元素,问最后结果为多少.m个查询,每次都有一个待查询区间. 分析既然有多组查询,n只是1e4,那么可以考虑预 ...
Elastic Job入门（3） - 集成Springboot
引入pom文件 <dependency> <groupId>com.dangdang</groupId> <artifactId>elastic-job ...
查看Mac电脑的核心数量
#显示物理核心数sysctl hw.physicalcpu#显示逻辑核心数sysctl hw.logicalcpu
【apache tika】apache tika获取文件内容(与FileUtils的对比)
Tika支持多种功能: 文档类型检测内容提取元数据提取语言检测重要特点: 统一解析器接口:Tika封装在一个单一的解析器接口的第三方解析器库.由于这个特征,用户逸出从选择合适的解析器库的负担, ...
【Python】zip文件密码破解
掌握基础语法后,尝试使用python的zipfile模块练手. zipfile是Python里用来做zip格式编码的压缩和解压缩的. 这里将大体的思路分解成四段代码,逐一完善功能: 第一段代码:解压z ...
caffe-win10-cifar10另
上一篇主要以bat形式实现了leveldb形式的cifar10,因为对于shell脚本不甚熟悉,所以这次专门利用.sh调用来实现lmdb形式的cifar10. 1.下载数据同上一篇. 2.数据转换和 ...
UML和模式应用4：初始阶段(2)--需求科目之进化式需求
1. 前言 UP开发包括四个阶段:初始阶段.细化阶段.构建阶段.移交阶段: UP每个阶段包括业务建模.需求.设计等科目: 需求是UP科目之一,在初始阶段需求科目的工作量占据较大的部分.但是初始阶段的 ...
Vulcan 基于Meteor的APollO框架， grapesjs 用于可视化生成Html 页面
Vulcan 基于Meteor的APollO框架 :http://vulcanjs.org/ grapesjs 用于可视化生成Html http://grapesjs.com/

js----DOM对象(事件)

js----DOM对象(事件)的更多相关文章

随机推荐

热门专题