JavaScript DOM操作

Posted on | Edited on | In | Views:

解释：DOM，指的是文档对象模型（Document Object Model）。是针对HTML和XML文档的

一个API,描绘了一个层次化的节点树，允许开发人员添加、删除和修改页面的某一部分。

HTML DOM树形结构如下：

DOM模型

事件

三要素：事件源（受监听的html标签）、事件（监听器）、事件驱动程序（动作）。

  1. 获取时间源的方式（DOM节点的获取）

    获取事件源的常见方式如下：

    1
    2
    3
    4
    5
    var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

    var arr1 = document.getElementsByTagName("div");     //方式二：通过 标签名 获得 标签数组，所以有s

    var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

  2. 绑定事件的方式

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div id="box1" ></div>

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

    方式二：先单独定义函数，再绑定

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     <div id="box1" ></div>

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

    方式三：行内绑定

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!--行内绑定-->
    <div id="box1" onclick="fn()"></div>

    <script type="text/javascript">

        function fn() {
            alert("我是弹出的内容");
        }

    </script>

  3. 事件驱动程序

    我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式。举例如下：

    点击鼠标时，原本粉色的div变大了，背景变红：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <head>
    <style>
        #box1{
            width:100px;
            height:100px;
           	background-color:pink;
        }
    </style>
    </head>
    <body>
        <div id="box1"></div>
        <script type="text/javascript">
        	var div1=document.getElementById("box1");
            //点击鼠标时，原本粉色的div变大了，背景变红了
            div1.onclick = function(){
                div1.style.width = "200px";  //属性值要写引号
                div1.style.height = "200px";
                div1.style.backgroundColor = "red";  //属性名是backgroundColor，不是background-color
            }
        </script>
    </body>

    实现效果如下：

    img

onload事件

onload事件比较特殊，这里单独讲一下。

当页面加载（文本和图片）完毕的时候，触发onload事件。

举例：

1
2
3
4
5
<script type="text/javascript">
    window.onload = function () {
        console.log("smyhvae");  //等页面加载完毕时，打印字符串
    }
</script>

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

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

事件举例：京东顶部广告栏

img

比如上面这张图，当鼠标点击右上角的X时，关掉整个广告栏，这就要用到事件。

代码实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .top-banner {
            background-color: pink;
            height: 80px;
        }
        .w {
            width: 1210px;
            margin: 10px auto;
            position: relative;
        }
        img {
            display: block;
            width: 1210px;
            height: 80px;
            background-color: blue;
        }
        a {
            position: absolute;
            top: 5px;
            right: 5px;
            color: #fff;
            background-color: #000;
            text-decoration: none;
            width: 20px;
            height: 20px;
            font: 700 14px/20px "simsum";
            text-align: center;
        }
        .hide {
            display: none!important;
        }
    </style>
</head>
<body>
    <div class="top-banner" id="topBanner">
        <div class="w">
            <img src="" alt=""/>
            <a href="#" id="closeBanner">×</a>
        </div>
    </div>


<script>
    //需求：点击案例，隐藏盒子。
    //思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。

    //1.获取事件源和相关元素
    var closeBanner = document.getElementById("closeBanner");
    var topBanner = document.getElementById("topBanner");
    //2.绑定事件
    closeBanner.onclick = function () {
        //3.书写事件驱动程序
        //类控制
//        topBanner.className += " hide"; //保留原类名，添加新类名
        topBanner.className = "hide";//替换旧类名（方式一），改变所属类，应用hide类的样式
//        topBanner.style.display = "none"; //方式二：与上一行代码的效果相同
    }

</script>
</body>
</html>

注意最后一行代码，这种方式会替换旧类名，意思是，不管之前的类名叫什么，都会被修改。

不要投钱给我
0%