DOM

发表于 | 分类于 ， ，

一、节点树

节点（Element）即为标签
静态页面骨架是由标签组成，把标签之间的关系叫做节点树。
在这里插入图片描述

1.1 认识DOM

DOM（document object model，文档对象模型），其实就是系统内置引用类型对象document。可以认为是整个节点树的‘根元素’【真正的是html，只是认为】，JS中的DOM对象可以通过一些手段操作结构层中的标签。

1
2
3
4
5
<script>
    // DOM是引用类型数据
    console.log(document);
    console.log(typeof document);
</script>

1.1.2 DOM四个小属性

  • documentElement属性：可以获取到html根标签
  • head属性：可以获取到head标签
  • body属性：可以获取到body标签
  • title属性：可以操作title标签文本
1
2
3
4
5
6
<script>
    console.log(document.documentElement);
    console.log(document.head);
    console.log(document.body);
    console.log(document.title);
</script>

1.1.3 DOM方法

如果想获取其他页面中的标签，需要通过一些方法获取，DOM方法有很多。
getElementById：DOM这个方法可以通过id匹配任意节点树上的标签。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" id="box">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <ul id = "box1">
            <li>吃饭</li>
            <li id="box2">睡觉</li>
        </ul>
    </div>
    
</body>
</html>
<script>
    //getElementById:DOM方法
    var meta = document.getElementById("box");
    console.log(meta);
    var ul = document.getElementById("box1");
    console.log(ul);
    var li = document.getElementById("box2");
    console.log(li);
</script>

在这里插入图片描述

  • getElementById可以通过标签ID属性值获取任意节点
  • script标签一般放在程序最下方。因为加载的先后顺序问题。

1.2 操作标签文本

我们可以通过DOM方法获取节点树上任意节点。除此之外，获取的节点经常操作自己的文本内容。

  • 如果是表单元素，需要通过value属性操作文本
  • 如果是非表单元素*，需要通过innerHTML属性操作文本

标签文本指的是标签内的文本：
<div>我是标签文本</div>

表单元素：经常结合form标签一起使用的input

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        我是表单元素：<input type="text" id="cur" value="默认文本内容">
    </div>
    <a href="http://www.baidu.com" id="box">跳转到百度</a>
    <p id="box1">欢迎光临</p>
</body>
</html>
<script>
    //如果操作表单元素文本，需要使用标签的value属性
    //操作文本：即为可以在js中获取已有文本，但也可以重新设置文本
    // 第一步，获取表单元素
    var input = document.getElementById("cur");
    console.log(input);
    //获取表单元素文本
    console.log(input.value);
    // 重新设置表单元素文本
    input.value = "修改文本";

    //非表单元素（不是input即可）
    //非表单元素操作文本：需要通过innerHTML属性
    var a = document.getElementById("box");
    //获取非表单元素文本
    console.log(a.innerHTML);
    //重新设置非表单元素文本
    a.innerHTML = "你好";
    //获取p标签
    var p = document.getElementById("box1");
    //获取非表单元素文本
    console.log(p.innerHTML);
    p.innerHTML = "最近下雨";
</script>

1.3 操作标签属性

下面高亮部分称为属性：
<img src=”./1.jpg”>

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./img/1.jpg" alt="" id="box">
    <div class="cur" id="ha">粉刷匠</div>
</body>
</html>
<script>
    //获取img标签
    var img = document.getElementById("box");
    //获取标签属性值
    console.log(img.src); //file:///D:/OtherFiles/mashibing/web%E5%89%8D%E7%AB%AF%E6%A1%88%E4%BE%8B/Day04/img/1.jpg
    //重新修改属性值
    img.src = "./img/2.jpg";

     //获取div标签
     var div = document.getElementById("ha");
    //获取标签属性值
    console.log(div.id); //ha
    console.log(div.className); //cur
    //重新修改属性值
    div.className = "rewrite";
    div.id = "ga";
    console.log(div); //<div class="rewrite" id="ga">粉刷本领强</div>
    //修改文本
    div.innerHTML = "粉刷本领强";
</script>
  • 大多情况下，操作标签的属性就是标签.属性名 进行操作
  • 有特例：class属性，class是ES6关键字，所以是className

2.4 操作标签的样式

web中的样式分为三种：

  1. link：称为外部样式
  2. style：称为内部样式
  3. 放在标签上的称为行内样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <div style="width:100px;height:100px;color: blueviolet;border: 1px solid black;" id="cur">12306</div>
</body>
</html>
<script>
    //获取div标签
    var div = document.getElementById("cur");
    // 获取已有样式
    console.log(div.style.width);
    console.log(div.style.height);
    console.log(div.style.color);
    console.log(div.style.border);
    // 设置元素样式
    div.style.width = "250 px";
    // 如果样式中中间带有横杠，变为驼峰写法
    div.style.fontSize = "30px";
    div.style.textAlign = "center";
    div.style.background = "cyan";
</script>
  • dom只能操作标签的行内样式（外部、内部暂时操作不了）
  • 如果样式中中间带有横杠，变为驼峰写法

2.5 事件

概述：event 由用户触发，触发时，标签可以做出相应的响应。

语法格式：
element.onxxx = function(){}

  • function(){}称为事件处理函数（用户触发时候才会触发一次）

2.4.1 单击事件——onclick

概述：可以给任何标签绑定单击事件（用户触发单击时），事件处理函数才会执行一次。

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
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            background:red;
            width: 600px;
            height: 100px;
            margin: 100px, auto;
            color: white;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="box">文字</div>
</body>
</html>
<script>
    // 给第一个div绑定单击事件
    var div = document.getElementById("box");
    // 全局变量 存储一下起始字号大小
    var f = 16;
    // 绑定单击事件
    div.onclick = function() {
        // 字号+1
        f++;
        div.style.fontSize = f + "px";
    }
</script>

JS属于脚本语言，脚本语言需要嵌套在静态页面中，给静态页面增加动态效果。