一、DOM

发表于 | 更新于: | 分类于 ， ， |
| 字数: 2.2k | 时长 ≈ 9 分钟

一、DOM

1.1 DOM整体感知

我们前面JS学习都是核心语言部分，也就是ECMAscript。一般都是在控制台，输出语句里操作。JS还包括DOM和BOM。

DOM（Document Object Model，文档对象模型）描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

UkWP41.png

这使得JavaScript操作HTML，不是在操作字符串，而是在操作节点，极大的降低了编程难度。

DOM对很多东西做了抽象，提供了丰富的API：

取得元素、CSS样式、事件、运动、元素尺寸位置、节点操作。

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
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            color: red;
        }
    </style>
</head>

<body>
    <div class="box" id="box">盒子</div>
    <img src="images/nv0.jpg" alt="">
    
    <script>
        // 获取元素
        var oBox = document.getElementById("box");
        // 使用变量，使用的是变量保存的值
        console.log(oBox);
        // 更改样式
        oBox.style.width = "300px";
    </script>

UkWd5n.png

1.2 html操作

document：表示整个文档对象，document具有很多的方法或者属性，通过点语法进行调用

1.2.1 document.title 网页标题

1
2
3
4
5
6
7
<title>标题</title>

<script>
    // 获取网页标题  = 表示赋值
    console.log(document.title);
    document.title = "html操作";
</script>

UkWLad.png

1.2.2 通过点语法获取body对象

1
2
3
4
// 通过点语法获取body对象
console.log(document.body);
// 更改样式 = 
document.body.style.fontSize = "50px";

UkfEin.png

1.2.3 读取设置元素属性值

一般我们操作元素都是从获取元素对象开始

1.2.3.1 getElementById()获取元素对象

  • getElementById()：

    • 调用对象：document

    • 参数：id名。注意不要写#

    • 返回值：元素对象

  • id是唯一的，通过id获取元素对象不能更改id名。id属性是只读属性，不能更改
1
2
3
// 获取元素对象
var oBox = document.getElementById("box");
console.log(oBox);

UA8ain.png

  • id可以通过点语法调用属性值，但不允许更改
1
2
// 通过点语法读取元素的属性值
console.log(oBox.id);         // box
  • 可以使用 = 进行属性值的设置
1
2
3
4
5
6
<img src="images/nv0.jpg" alt="" id="pic">

// 获取元素对象
var oPic = document.getElementById("pic");
// 可以使用 = 进行属性值的设置
oPic.src = "images/001.png";

UA8rsU.png

  • 元素对象.innerHTML 可以读取元素的内部文本
1
2
3
4
5
6
<div class="box" id="box">盒子</div>

// .innerHTML 可以读取内部文本
console.log(oBox.innerHTML);
// 更改属性值
oBox.innerHTML = "箱子";

UA8cdJ.png

  • value：获取表单元素文本
1
2
3
4
5
6
7
8
<p>
    <input type="text" value="默认文本" id="txt">
</p>

// 获取元素
var oTxt = document.getElementById("txt");
// 获取value属性值
console.log(oTxt.value);

UA87ee.png

  • 想获取class属性值需要改名字className
1
2
3
// 想获取class属性值需要改名字className
console.log(oBox.class);
console.log(oBox.className);

UA8vSP.png

1.2.3.2 getAttribute()获取元素属性值

  • getAttribute()：可以读取元素自带的属性值，还可以读取元素自定义属性值

    • 调用对象：元素对象

    • 参数：属性名

    • 返回值：属性值

1
2
3
4
5
<div class="box" id="box" data-ming="xiangzi">盒子</div>

// 通过点语法不能读取元素自定义属性
// getAttribute()可以读取自定义属性
console.log(oBox.getAttribute("data-ming"));    // xiangzi

1.2.3.3 setAttribute()设置属性值

  • setAttribute()：设置属性值

    • 调用对象：元素对象

    • 参数：第一个参数：属性名 第二个参数：属性值

1
2
// 设置属性 setAttribute()
oBox.setAttribute("data-ming", "hezi");

UAJ0DU.png

1.2.4 点语法、getAttribute()、setAttribute()区别

① 点语法只能读取，设置元素的自带属性值

1
2
3
4
5
6
7
8
// 获取元素
var oBox = document.getElementById("box");
// 点语法只能读取设置自带属性值
console.log(oBox.id);  // box
console.log(oBox.data-ming);  // 报错
// getAttribute() setAttribute()可以设置自带或者自定义属性
console.log(oBox.getAttribute("id"));  // box
console.log(oBox.getAttribute("data-ming"));  // xiangzi

UAYp5j.png

② 点语法在读取属性值时可能需要改名字，get，setAttribute()不需要改名字

class 改为 className

for 改为 htmlFor

colspan 改为 colSpan

rowspan 改为 rowSpan

1
2
3
// get不需要改名，点语法可能需要改名
console.log(oBox.className);              // box
console.log(oBox.getAttribute("class"));  // box

③ 点语法读取 style，获取的是对象，返回的是所有样式的集合

getAttribute()读取style获取的是字符串

1
2
3
4
5
// 点语法得到的是style对象  get得到的是字符串
console.log(typeof oBox.style);
console.log(typeof oBox.getAttribute("style"));
console.log(oBox.style);
console.log(oBox.getAttribute("style"));

UAYp5j.png

④ 点语法得到的是style对象，可以继续打点调用其他的属性

getAttribute()不能继续打点

1
2
3
// 点语法style可以继续打点
console.log(oBox.style.width);                    // 300px
console.log(oBox.getAttribute("style").width);    // undefined

1.3 CSS操作

1.3.1 获取样式

元素对象可以通过style获取所有样式集合对象，可以继续打点调用属性名的元素的行内样式，而不是计算后的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    color: red;
}

<div class="box" id="box" data-ming="xiangzi" style="width: 300px;height: 300px;">盒子</div>

// 获取元素
var oBox = document.getElementById("box");
// 通过点语法获取样式集合对象
console.log(oBox.style);
// 只能读取行内样式，不能读取计算后样式
console.log(oBox.style.width);
// 数据类型为字符串
console.log(typeof oBox.style.width);

UAYNIH.png

1.3.2 属性更改设置

1
2
3
4
// 设置 = ，添加在行内，右侧属性值，写法和CSS属性值一样,有双引号
oBox.style.color = "#000";
// 单一属性需要改为驼峰命名法
oBox.style.backgroundColor = "red";

UAYsL8.png

1.4 事件

事件监听：

我们计算机在解析到我们JS代码的时候，会去看某一些元素身上是否添加了事件。随时监听这些事件有没有被触发，如果触发就立即执行相应的行为。

1
2
3
4
5
6
7
8
9
onclick	        单击
ondblclick	    双击
onmouseenter	鼠标进入
onmouseleave	鼠标离开
onmousedown	    鼠标按下
onmouseup	    鼠标弹起
onfocus	        获取焦点
onblur	        失去焦点
onload	        加载完毕之后

1.4.1 单击onclick

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<p>
    <input type="button" value="点击我" id="btn">
</p>


// 元素通过点语法绑定事件名，然后使用 = 赋值一个匿名函数
// 元素、事件名 = function(){}
// 获取元素对象
var oBtn = document.getElementById("btn");
// 单击 onclick，点击btn，弹出内部文本
// 触发事件，函数会立即执行，不需要添加调用小括号
oBtn.onclick = function(){
    // 除了自定义属性使用get或set，其他都是用点语法
    alert(oBtn.value);
}

UAY5Q0.png

1.4.2 双击ondblclick

1
2
3
4
5
6
7
8
9
<p>
    <input type="button" value="点击我两次" id="btn2">
</p>

var oBtn2 = document.getElementById("btn2");
// 双击 ondblclick，点击btn2，输出type属性值
oBtn2.ondblclick = function(){
    console.log(oBtn2.type);
}

UAYIyV.png

1.4.3 鼠标进入onmouseenter

1
2
3
4
5
6
7
<img src="images/nv0.jpg" alt="" id="pic">

var oPic = document.getElementById("pic");
// 鼠标进入img,img换图  onmouseenter
oPic.onmouseenter = function(){
    oPic.src = "images/001.png";
}

UAYHwF.png

1.4.4 鼠标离开 onmouseleave

1
2
3
4
// 鼠标离开 恢复原图 onmouseleave
oPic.onmouseleave = function(){
    oPic.src = "images/nv0.jpg";
}

UAYOY9.png

1.4.5 鼠标按下onmousedown

1
2
3
4
5
6
7
8
9
10
11
12
<a href="" id="txt">我是超级链接</a>
<p>
    <input type="button" value="点击我" id="btn">
</p>

var oBtn = document.getElementById("btn");
var oTxt = document.getElementById("txt");
//鼠标按下btn，输出a的内部文本
oBtn.onmousedown = function(){
    // 控制其他元素对象
    console.log(oTxt.innerHTML);
}

UAt9eO.png

1.4.6 鼠标弹起onmouseup

1
2
3
4
5
6
7
//鼠标弹起btn，更改a的颜色，字号变大
oBtn.onmouseup = function () {
    // 控制其他元素对象
    oTxt.style.color = "red";
    // 右侧属性值和CSS书写一致，有单位必须书写
    oTxt.style.fontSize = "50px";
}

UAtPTe.png

1.4.7 获取焦点onfocus

1
2
3
4
5
6
7
8
9
<p>
    <input type="text" value="默认文本" id="btn">
</p>

//获取焦点 onfocus 改变边框颜色
oBtn.onfocus = function(){
    oBtn.style.borderColor = "red";
    oBtn.style.borderWidth = "10px";
}

UAtVSI.png

1.4.8 失去焦点onblur

1
2
3
4
//失去焦点 onblur img更换图片
oBtn.onblur = function () {
    oPic.src = "images/001.png";
}

UAtK0S.png

1.4.9 加载完毕之后onload

JS语句要书写在所有的标签最后，标签加载完毕之后，JS语句才执行。

如果JS语句书写在标签之前，JS先加载，html标签还没有加载完毕，我们没办法获取元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    </style>
    <script>
        // 元素通过点语法绑定事件名，然后使用 = 赋值一个匿名函数
        // 元素、事件名 = function(){}
        // 获取元素对象
        var oBtn = document.getElementById("btn");
        var oPic = document.getElementById("pic");
        var oTxt = document.getElementById("txt");

        console.log(oBtn);                          // null

        // oBtn.onclick = function () {
        //     alert(oBtn.value);
        // }
    </script>
</head>

<body>

如果书写了onload事件，表示JS在所有标签加载完毕之后才执行事件内部的语句。

调用对象只能是window

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    </style>
    <script>
        // 想让标签加载完毕之后再执行JS语句
        window.onload = function(){
            // 元素通过点语法绑定事件名，然后使用 = 赋值一个匿名函数
            // 元素、事件名 = function(){}
            // 获取元素对象
            var oBtn = document.getElementById("btn");
            var oPic = document.getElementById("pic");
            var oTxt = document.getElementById("txt");

            console.log(oBtn);

            // oBtn.onclick = function () {
            //     alert(oBtn.value);
            // }
        }
    </script>
</head>

<body>

UAta0U.png

相关文章
点击查看

本文标题:一、DOM

文章作者:Mango

发布时间:2020年07月08日 - 22:06:56

最后更新:2020年07月08日 - 22:35:39

原始链接:https://mango185.github.io/post/701aa0b2.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
欢迎光临
❤️
Mango小站
请多关照
❤️
❤️