JavaScript基础（七）DOM 1. DOM 概述我们在前面的文章中学习了 JavaScrip 语言的核心部分，

`DOM`

1. `DOM` 概述

我们在前面的文章中学习了 JavaScrip 语言的核心部分，也就是 ECMAScript，一般都是在控制条、输出语句或者 node 环境中运行。接下来我们开始学习 DOM 部分。

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

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

DOM 对很多东西做了抽象、提供了丰富的API： 获取元素、CSS样式、事件、运动、元素尺寸位置、节点操作

体会 DOM 操作

// 获得元素
var box = document.getElementById('box');
var img = document.getElementById('img');
// 修改CSS样式
box.style.backgroundColor = 'lightgreen';
// 鼠标移入
img.onmouseover = function () {
  img.src = './js1.jpg'
}
// 鼠标移出
img.onmouseout = function () {
  img.src = './js.jpg'
}

<!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>DOM</title>
  <style>
    * { padding: 0; margin: 0; }
    div { width: 150px; height: 150px; background-color: lightblue; }
  </style>
</head>
<body>
  <div class="box" id="box">内部文字</div>
  <img src="./js.jpg" alt="js" id="img">
  <script>
    // 获得元素
    var box = document.getElementById('box');
    var img = document.getElementById('img');
    // 修改CSS样式
    box.style.backgroundColor = 'lightgreen';
    // 鼠标移入
    img.onmouseover = function () {
      img.src = './js1.jpg';
    }
    // 鼠标移出
    img.onmouseout = function () {
      img.src = './js.jpg';
    }
  </script>
</body>
</html>

2. `HTML` 操作

JavaScript 通过document 对象 表示文档，它表示整个页面。有很多属性和方法，包含了绝大多数页面的特性和操作

DOM 操作：一般是指通过一些方法获取到页面上的 HTML 元素，然后对这些元素进行一些操作

常用的获取元素的方法

document.getElementById(); ：通过id得到元素

注：括号中不需要 #，只需要 id 即可
```
// 错误写法
var img = document.getElementById('#img');
```
document.getElementsByTabName(); ：通过标签名得到元素的方法

通过 id 获得的元素是对象类型，可以直接通过 点操作 调用属性和方法

console.log(typeof box);
//object
console.log(img.id);
// img
console.log(img.src);
// file:///C:/Users/vience/Desktop/js.jpg

可以通过使用等于 = 进行赋值操作，其他的属性都可以进行赋值，但是 id不能，因为 id 是只读属性不能更改

document.title = 'html操作';
img.src = './js1.jpg';
console.log(img.id); // img

自定义属性不能使用打点调用，

console.log(box.hua); //undefined

自定义属性的读取和赋值

读取：getAttribute(key) 赋值： setAttribute(key, value) key为自定义属性名 value为自定义属性的值

console.log(box.getAttribute('hua'))
// 油菜花
box.setAttribute('hua', "玫瑰花")
console.log(box.getAttribute('hua'))
// 玫瑰花

<!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>HTML操作</title>
  <style>
    * { padding: 0; margin: 0; }
    div { width: 150px; height: 150px; background-color: lightblue; }
  </style>
</head>
<body>
  <div class="box" id="box" hua="油菜花" style="background-color: antiquewhite;color: #000;">内部文字</div>
  <img src="./js.jpg" alt="js" id="img">
  <input type="button" value="这是按钮" id="btn">
  <script>
    // 通过id获取元素
    var box = document.getElementById('box');
    var img = document.getElementById('img');
    var btn = document.getElementById('btn');
    console.log(typeof box);
    console.log(img.id);
    console.log(img.src);
    document.title = 'html操作';
    img.src = './js1.jpg';
    console.log(box.getAttribute('hua'))
    box.setAttribute('hua', "玫瑰花")
    console.log(box.getAttribute('hua'))
  </script>
</body>
</html>

点操作和 getAttribute(key)、setAttribute(key, value) 的区别

点操作 只能用于操作 HTML 原有的属性，不能操作自定义属性，而getAttribute(key)、setAttribute(key, value) 可以操作自定义属性，也可以才做原有属性
```
console.log(box.getAttribute('hua'))
// 油菜花
box.setAttribute('hua', "玫瑰花")
console.log(box.getAttribute('hua'))
// 玫瑰花
```
点操作 操作 HTML 的属性时，属性名可能需要更改，而getAttribute(key)、setAttribute(key, value) 不需要
- class ===》 className
- for ===》 htmlFor
- colspan ===》colSpan
- rowspan ===》rowSpan
```
console.log(box.className);
// box
console.log(box.getAttribute('class'));
// box
```

点操作 操作对象时得到的是对象，而getAttribute(key)得到的时字符串

console.log(typeof box.style);
//object
console.log( typeof box.getAttribute('style'));
// string

点操作 ：style 是对象可以继续打点，而getAttribute(key)得到的时字符串不能继续操作，点操作 时需要用到复合属性需要使用驼峰命名法，而getAttribute(key)不需要
```
console.log(box.style.backgroundColor);
// antiquewhite
```

总结：工作中，一般都是使用点操作，只有自定义属性才使用 getAttribute(key)、setAttribute(key, value)

3. `CSS` 操作

我们通过点操作得到的 style 是一个对象，继续使用点操作调用属性

通过 style 只能获取和设置行内样式，不能得到计算后的样式

通过获取属性使用等号进行赋值时，等号右边的值使用引号包括，引号里需要写完成的css样式值

style 再下一级的样式属性如果是复合属性，需要使用驼峰命名法。

box.style.backgroundColor = 'pink';
box.style.borderWidth = '10px';

4. 事件

事件监听：我们计算机在解析 JavaScript 代码时，会检查元素是否添加了事件。随时监听这些事件有没有触发，如果触发就会执行相应的行为

常见的事件

onclick：鼠标单击事件
ondbclick：鼠标双击事件
onmouseover：鼠标移入事件
onmouseout：鼠标移出事件
onmousedown：鼠标按下事件
onmouseup：鼠标弹起事件
onfocus：获得焦点事件
onblur：失去焦点事件
onload：加载完成事件

添加事件监听方法：通过给一个对象添加事件，赋值一个函数，当事件触发时函数会立即执行

box.onclick = fun;
function fun() {
  console.log(box.innerHTML);
}
// 内部文字

执行函数的方法：把函数绑定给事件，触发事件就会立即执行所绑定的函数

JavaScript熟悉位置：

如果写在 body 部分需要将 JavaScript 写在所有的 html 元素的最后

如果写在 head 底部需要使用window.onload事件，等 html 加载完成后执行

window,onload = function () {
    // 这里的语句会等html加载完成后执行
}

//head 标签中书写的代码
console.log(1)
window.onload = () => {
    console.log(2)
}
console.log(3)
// 输出顺序为 1 3 2

5. 定时器

setInterval

setInterval(() => {
  // statement 1
}, interval);

每隔 interval 时间执行一次箭头函数中的语句

一直循环执行, interval为毫秒不需要单位

var a = 0;
setInterval(() => {
  a ++;
  console.log(a)
}, 1000);
// 每隔1秒控制台打印一个数，依次是1 2 3 4 ...

setTimeout

setTimeout(() => {
  // statement 2
}, interval);

interval 时间后执行一次箭头函数中的语句

只执行一次, interval为毫秒不需要单位

var a = 0;
setTimeout(() => {
  a ++;
  console.log(a)
}, 1000);
// 1秒后控制台打印 1

JavaScript基础（七）

DOM

1. DOM 概述

2. HTML 操作

3. CSS 操作