• 关于DOM的事件操作


    1.事件:

    JS是以事件驱动为核心的一门语言。
    事件的三要素:
    事件的三要素:事件源、事件、事件驱动程序。 谁引发的后续事件,谁就是事件源。

    总结如下:

    • 事件源:引发后续事件的html标签。

    • 事件:js已经定义好了(见下图)。

    • 事件驱动程序:对样式和html的操作。也就是DOM。

    代码书写步骤如下:(重要)

    • (1)获取事件源:document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];

    • (2)绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 };

    • (3)书写事件驱动程序:关于DOM的操作

    <body>
    <div id="box1"></div>
    
    <script type="text/javascript">
        // 1、获取事件源
        var div = document.getElementById("box1");
        // 2、绑定事件
        div.onclick = function () {
            // 3、书写事件驱动程序
            alert("我是弹出的内容");
        }
    </script>
    
    </body>
    View Code

    常见事件如下:

    1、获取事件源的方式(DOM节点的获取)

    var div1 = document.getElementById("box1");      //方式一:通过id获取单个标签
     
    var arr1 = document.getElementsByTagName("div1");     //方式二:通过 标签名 获得 标签数组,所以有s
     
    var arr2 = document.getElementsByClassName("hehe");  //方式三:通过 类名 获得 标签数组,所以有s

    2、绑定事件的方式

    方式一:直接绑定匿名函数

    <div id="box1" ></div>
    
    <script type="text/javascript">
        var div1 = document.getElementById("box1");
        //绑定事件的第一种方式
        div1.onclick = function () {
            alert("我是弹出的内容");
        }
    </script>
    View Code

    方式二:先单独定义函数,再绑定

    <div id="box1" ></div>
    
    <script type="text/javascript">
        var div1 = document.getElementById("box1");
        //绑定事件的第二种方式
        div1.onclick = fn;   //注意,这里是fn,不是fn()。fn()指的是返回值。
        //单独定义函数
        function fn() {
            alert("我是弹出的内容");
        }
    </script>
    View Code

    注意上方代码的注释。绑定的时候,是写fn,不是写fn()。fn代表的是整个函数,而fn()代表的是返回值。

    方式三:行内绑定

    <!--行内绑定-->
    <div id="box1" onclick="fn()"></div>
    
    <script type="text/javascript">
    
        function fn() {
            alert("我是弹出的内容");
        }
    
    </script>
    View Code

    注意第一行代码,绑定时,是写的"fn()",不是写的"fn"。因为绑定的这段代码不是写在js代码里的,而是被识别成了字符串

    3、事件驱动程序

    <style>
            #box {
                 100px;
                height: 100px;
                background-color: pink;
                cursor: pointer;
            }
        </style>
    </head>
    
    <body>
    
    <div id="box" ></div>
    
    <script type="text/javascript">
        var oDiv = document.getElementById("box");
        //点击鼠标时,原本粉色的div变大了,背景变红了
        oDiv.onclick = function () {
            oDiv.style.width = "200px";   //属性值要写引号
            oDiv.style.height = "200px";
            oDiv.style.backgroundColor = "red";   //属性名是backgroundColor,不是background-Color
        }
    </script>
    View Code

    上方代码的注意事项:

    • 在js里写属性值时,要用引号
    • 在js里写属性名时,是backgroundColor,不是CSS里面的background-Color。记得所有的像css属性的text-*,line-*、backgroun-*等在js中都写成驼峰

    onload事件

    当页面加载(文本和图片)完毕的时候,触发onload事件。

    举例:

    <script type="text/javascript">
        window.onload = function () {
            console.log("小马哥");  //等页面加载完毕时,打印字符串
        }
    </script>

    有一点我们要知道:js的加载是和html同步加载的。因此,如果使用元素在定义元素之前,容易报错。这个时候,onload事件就能派上用场了,我们可以把使用元素的代码放在onload里,就能保证这段代码是最后执行。

    建议是:整个页面上所有元素加载完毕在执行js内容。所以,window.onload可以预防使用标签在定义标签之前。

    事件案例

    1、京东顶部广告栏关闭

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .top-banner{
                /*position: relative;*/
                background-color: rgb(230, 15, 82);
            }
            .top-banner .w{
                 1190px;
                position: relative;
                margin: 0 auto;
            }
            .top-banner .banner{
                display: block;
                 100%;
                height: 80px;
                background: url('./close.jpg') no-repeat center 0;
            }
            .top-banner .close{
                position: absolute;
                right: 0;
                top:0;
                text-decoration: none;
                color: white;    
                 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;    
            }
            .hide{
                display: none;
            }
    
        </style>
    </head>
    <body>
        <div class="top-banner" id="topBanner">
            <div class="w">
                <a href="#" class="banner"></a>
                <a href="#" class="close" id="closeBanner">x</a>
            </div>
        </div>
        <script type="text/javascript">
            // /需求:点击案例,隐藏盒子。
                //思路:点击a链接,让top-banner这个盒子隐藏起来(加隐藏类名)。
    
            window.onload  = function(){
                // /1.获取事件源和相关元素
                var closeBanner = document.getElementById('closeBanner');
                var topBanner = document.getElementById('topBanner');
                //2.绑定事件
                closeBanner.onclick = function(){
                    //3.书写事件驱动程序
                            //类控制
                    //topBanner.className += ' hide';//保留原类名,添加新类名
                    //topBanner.className = 'hide';
                    //替换旧类名
                    topBanner.style.display = 'none';
                }
            }
        </script>
    
        
    </body>
    </html>
    View Code

    2.要求实现效果:当鼠标悬停在img上时,更换为另外一张图片;鼠标离开时,还原为本来的图片。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script>
            //window.onload页面加载完毕以后再执行此代码
            window.onload = function () {
                //需求:鼠标放到img上,更换为另一张图片,也就是修改路径(src的值)。
                //步骤:
                //1.获取事件源
                //2.绑定事件
                //3.书写事件驱动程序
    
                //1.获取事件源
                var img = document.getElementById("box");
                //2.绑定事件(悬停事件:鼠标进入到事件源中立即出发事件)
                img.onmouseover = function () {
                    //3.书写事件驱动程序(修改src)
                    img.src = "image/jd2.png";
    //                this.src = "image/jd2.png";
                }
    
                //1.获取事件源
                var img = document.getElementById("box");
                //2.绑定事件(悬停事件:鼠标进入到事件源中立即出发事件)
                img.onmouseout = function () {
                    //3.书写事件驱动程序(修改src)
                    img.src = "image/jd1.png";
                }
            }
        </script>
    </head>
    <body>
    
        <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
    
    </body>
    </html>
    View Code

     二、DOM介绍:

    1.什么是DOM?

    DOM:文档对象模型。DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

    DOM就是由节点组成的

    2.DOM树:

    在HTML中,一切都是节点。

      元素的节点:HTML标签

      文本的节点:标签中的文字(比如换行,空格)

      属性节点:标签的属性

    3.DOM可以做什么?

    • 找对象(元素节点)

    • 设置元素的属性值

    • 设置元素的样式

    • 动态创建和删除元素

    • 事件的触发响应:事件源、事件、事件的驱动程序

    4.获取父节点:

    调用者就是节点。一个节点只有一个父节点,调用方式就是:

    节点.parebtNode

      (1)nextSibling:值得是下一个节点(包括标签,空文档和换行节点)

    • 火狐、谷歌、IE9+版本:都指的是下一个节点(包括标签、空文档和换行节点)。

    • IE678版本:指下一个元素节点(标签)。

      (2)nextElementSibling:

      火狐、谷歌、IE9+版本:都指的是下一个元素节点(标签)。

    总结:为了获取下一个元素节点,我们可以这样做:在IE678中用nextSibling,

    在火狐谷歌IE9+以后用nextElementSibling,于是,综合这两个属性,可以这样写:

     下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling

    previous的中文是: 前一个

    (1)previousSibling:

    • 火狐、谷歌、IE9+版本:都指的是前一个节点(包括标签、空文档和换行节点)。

    • IE678版本:指前一个元素节点(标签)。

    (2)previousElementSibling:

    • 火狐、谷歌、IE9+版本:都指的是前一个元素节点(标签)。

    总结:为了获取前一个元素节点,我们可以这样做:在IE678中用previousSibling,在火狐谷歌IE9+以后用previousElementSibling,于是,综合这两个属性,可以这样写:

     前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling

    3、补充:获得任意一个兄弟节点:

    节点自己.parentNode.children[index];  //随意得到兄弟节点

    5.获取单个的子节点

    1、第一个子节点 | 第一个子元素节点

    (1)firstChild:

    • 火狐、谷歌、IE9+版本:都指的是第一个子节点(包括标签、空文档和换行节点)。

    • IE678版本:指第一个子元素节点(标签)。

    (2)firstElementChild:

    • 火狐、谷歌、IE9+版本:都指的是第一个子元素节点(标签)。

    总结:为了获取第一个子元素节点,我们可以这样做:在IE678中用firstChild,在火狐谷歌IE9+以后用firstElementChild,于是,综合这两个属性,可以这样写:

     第一个子元素节点 = 节点.firstElementChild || 节点.firstChild

    2、最后一个子节点 | 最后一个子元素节点

    (1)lastChild:

    • 火狐、谷歌、IE9+版本:都指的是最后一个子节点(包括标签、空文档和换行节点)。

    • IE678版本:指最后一个子元素节点(标签)。

    (2)lastElementChild:

    • 火狐、谷歌、IE9+版本:都指的是最后一个子元素节点(标签)。

    总结:为了获取最后一个子元素节点,我们可以这样做:在IE678中用lastChild,在火狐谷歌IE9+以后用lastElementChild,于是,综合这两个属性,可以这样写:

     最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild

    6.获取所有的子节点

    (1)childNodes:标准属性。返回的是指定元素的子节点的集合(包括元素节点、所有属性、文本节点)。是W3C的亲儿子。

    • 火狐 谷歌等高本版会把换行也看做是子节点。(了解)

    用法:

    子节点数组 = 父节点.childNodes;   //获取所有节点。

    (2)children:非标准属性。返回的是指定元素的子元素节点的集合。【重要】

    • 它只返回HTML节点,甚至不返回文本节点。
    • 在IE6/7/8中包含注释节点(在IE678中,注释节点不要写在里面)。

    虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所有浏览器的支持。

    用法:(用的最多

    子节点数组 = 父节点.children;   //获取所有节点。用的最多。

    nodeType

    这里讲一下nodeType。

    • nodeType == 1 表示的是元素节点(标签) 。记住:元素就是标签。

    • nodeType == 2 表示是属性节点 了解

    • nodeType == 3 是文本节点 了解

     7.DOM节点的操作:

    1.创建节点:

     新的标签(元素节点)=document.creteElement("标签名");

    比如我们要创建一个li标签,或者创建一个不存在的abcd标签,可以这怎么做:

    <script type="text/javascript">
        var a1 = document.createElement("li");   //创建一个li标签
        var a2 = document.createElement("adbc");   //创建一个不存在的标签
    
        console.log(a1);
        console.log(a2);
    
        console.log(typeof a1);
        console.log(typeof a2);
    </script>

     2.插入节点:

    插入节点有两种方式,但是他们的含义是不同的。方式1:父节点.appendChild(新的节点);表示在父节点的最后插入一个新的子节点。

    方式2:父节点.insertBefore(新的子节点,作为参考的子节点);表示:在参考节点之前插入一个新的节点,

    如果参考节点是null,那么他将在父节点最后插入一个子节点。

    3.删除节点:

    格式:父节点.removeChild(子节点);

    解释:用父节点删除子节点。必须要指定是删除哪个子节点。

    自己删除自己的节点:node1.parentNode.removeChild(node1);

    4.复制节点:

    格式:

    1.要复制的节点.cloneNode();不带参数,只复制节点本身,不复制子节点

    2.要复制的节点.cloneNode();带参数true,即复制节点本身,也复制其所有的子节点。

    8.设置节点的属性

    1.获取节点的属性

    方式1:元素的节点.属性  元素的节点[属性];

    举例:

     1 <body>
     2 <img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
     3 
     4 <script type="text/javascript">
     5     var myNode = document.getElementsByTagName("img")[0];
     6 
     7     console.log(myNode.src);
     8     console.log(myNode.className);    //注意,是className,不是class
     9     console.log(myNode.title);
    10 
    11     console.log("------------");
    12 
    13     console.log(myNode["src"]);
    14     console.log(myNode["className"]); //注意,是className,不是class
    15     console.log(myNode["title"]);
    16 </script>
    17 </body>

    方式2:(推荐)

    素节点.getAttribute("属性名称");
      console.log(myNode.getAttribute("src"));
        console.log(myNode.getAttribute("class"));   //注意是class,不是className
        console.log(myNode.getAttribute("title"));

    2.设置节点的属性

    方式1举例:(设置节点的属性值)

       myNode.src = "images/2.jpg"   //修改src的属性值
        myNode.className = "image2-box";  //修改class的name

    方式2:(推荐)

     元素节点.setAttribute(属性名, 新的属性值);
        myNode.setAttribute("src","images/3.jpg");
        myNode.setAttribute("class","image3-box");
        myNode.setAttribute("id","你好");

    3.删除节点的属性

    格式:元素节点.removeAttribute(属性名);

    举例:(删除节点的属性)

     myNode.removeAttribute("class");
        myNode.removeAttribute("id");
  • 相关阅读:
    Django的高级用法
    Django信号和缓存
    初识Django框架
    虚拟化之KVM(上)
    jQuery操作页面-day13
    SSM整合
    新闻发布系统
    jsp
    分层
    简单工厂
  • 原文地址:https://www.cnblogs.com/wqzn/p/9704371.html
Copyright © 2020-2023  润新知