Web APIs学习第一天：获取 DOM 对象

很焦虑，希望能快点学完。

[Web APIs学习Day1](#Web APIs学习Day1)

复习JavaScript基础

变量声明

splice()增删

介绍

DOM概念

[DOM 树](#DOM 树)

[DOM 节点](#DOM 节点)

document对象

获取DOM对象

[根据 CSS 选择器来获取 DOM 元素](#根据 CSS 选择器来获取 DOM 元素)

[其他获取 DOM 元素的方法（了解）](#其他获取 DOM 元素的方法（了解）)

Web APIs学习Day1

了解 DOM 的结构并掌握其基本的操作，体验 DOM 的在开发中的作用

知道 ECMAScript 与 JavaScript 的关系
了解 DOM 的相关概念及DOM 的本质是一个对象
掌握查找节点的基本方法
掌握节点属性和文本的操作
能够使用间歇函数创建定时任务

复习JavaScript基础

变量声明

变量声明有三个：var、let、const。

但我们这里建议：const优先，尽量使用const，因为：

const语义化更好
很多变量我们声明的时候就知道它不会被更改了，那为什么不用const
实际开发中也是这样，比如react框架，基本都是const
有变量先使用const，如果发现它后面是要被修改的，再改为let

什么时候不用const呢？比如for循环里的 i，比如一个变量重新赋值。但给数组和对象增加删减元素依旧可以使用const。

注意：

const声明的值不能更改，而且const声明变量时需要里面进行初始化
但是对于引用数据类型，const声明的变量里面存的不是值，而是地址。因此当增加和删减元素时，只是修改堆空间里的存储内容，不改变栈空间的地址。所以，建议数组和对象都用const来声明。

比如，下面两种情况就不能改：

javascript 复制代码

 const names = []
 names = [1, 2, 3]
 // 空数组也占空间

 const obj {}
 obj = {
   uname: 'pink'
 }
 // 空对象也占空间

splice()增删

splice() 方法用于添加或删除数组中的元素。

**注意：**这种方法会改变原始数组。所以得用let定义。

**删除数组：**splice(起始位置，删除的个数)

比如：

javascript 复制代码

 let arr = ['red', 'green', 'blue']
 arr.splice(1,1) // 删除green元素
 console.log(arr) // ['red, 'blue']

添加元素：splice(起始位置，删除个数，添加数组元素)

javascript 复制代码

 let arr = ['red', 'green', 'blue']
 //arr.splice(1, 0, 'pink') // 在索引号是1的位置添加 pink
 //console.log(arr) // ['red', 'pink', 'green', 'blue']
 arr.splice(1, 0, 'pink', 'hotpink') // 在索引号是1的位置添加 pink  hotpink
 console.log(arr) // ['red', 'pink', 'hotpink', 'green', 'blue']

介绍

知道 ECMAScript 与 JavaScript 的关系，Web APIs 是浏览器扩展的功能。

严格意义上讲，我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系，ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现，并且在此基础上又扩展一些实用的功能，这些被扩展出来的内容我们称为 Web APIs。

ECMAScript 运行在浏览器中然后再结合 Web APIs 才是真正的 JavaScript，Web APIs 的核心是 DOM 和 BOM。

扩展阅读：ECMAScript 规范在不断的更新中，存在多个不同的版本，早期的版本号采用数字顺序编号如 ECMAScript3、ECMAScript5，后来由于更新速度较快便采用年份做为版本号，如 ECMAScript2017、ECMAScript2018 这种格式，ECMAScript6 是 2015 年发布的，常叫做 EMCAScript2015。

关于 JavaScript 历史的扩展阅读。

知道 DOM 相关的概念，建立对 DOM 的初步认识，学习 DOM 的基本操作，体会 DOM 的作用

DOM（Document Object Model）是将整个 HTML 文档的每一个标签元素视为一个对象，这个对象下包含了许多的属性和方法，通过操作这些属性或者调用这些方法实现对 HTML 的动态更新，为实现网页特效以及用户交互提供技术支撑。

简言之 DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。

观察一个小例子：

上述的例子中当用户分分别点击【开始】或【结束】按钮后，通过右侧调试窗口可以观察到 html 标签的内容在不断的发生改变，这便是通过 DOM 实现的。

DOM概念

DOM（文档对象模型）是用来呈现以及与任意 HTML 或 XML 文档交互的 API，其实就是DOM是浏览器提供的一套专门用来操作网页内容的功能。

作用：开发网页内容特效和实现用户交互

DOM 树

我们拿一个典型的HTML文档在做例子：

html 复制代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>标题</title>
 </head>
 <body>
   文本
   <a href="">链接名</a>
   <div id="" class="">文本</div>
 </body>
 </html>

如下图所示，将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，文档树描述网页内容关系，直观的体现了标签与标签之间的关系。

DOM 节点

节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。

【元素节点】其实就是 HTML 标签，如上图中 head、div、body 等都属于元素节点。
【属性节点】是指 HTML 标签中的属性，如上图中 a 标签的 href 属性、div 标签的 class 属性。
【文本节点】是指 HTML 标签的文字内容，如 title 标签中的文字。
【根节点】特指 html 标签。

因此，在HTML中是标签的元素，在JavaScript中是DOM对象。

DOM对象：浏览器根据 html 标签生成的 js 对象。

所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

DOM的核心思想：把网页内容当作对象来处理。

document对象

document 是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法都是用来访问和操作网页内容的，比如：document.write()。document 对象是学习 DOM 的核心。网页所有内容都在document里面。

javascript 复制代码

 <script>
   // document 是内置的对象
   // console.log(typeof document);
 
   // 1. 通过 document 获取根节点
   console.log(document.documentElement); // 对应 html 标签
 
   // 2. 通过 document 节取 body 节点
   console.log(document.body); // 对应 body 标签
 
   // 3. 通过 document.write 方法向网页输出内容
   document.write('Hello World!');
 </script>

上述列举了 document 对象的部分属性和方法，我们先对 document 有一个整体的认识。

获取DOM对象

当我们想要操作某个标签时，我们肯定是先选中这个标签，跟 css 选择器类似，选中标签才能操作。

因此，查找 DOM 元素就是利用 JS 选择页面中标签元素。

有两种获取方法：

根据 css 选择器来获取 DOM 元素（重点）
其他获取方法（了解）

根据 CSS 选择器来获取 DOM 元素

选择匹配的第一个元素。

语法：document.querySelector('css选择器')

参数：包含一个或多个有效的CSS选择器 字符串

返回值：

CSS 选择器匹配的第一个元素，一个 HTML Element 对象
如果没有匹配的元素，返回 null

html 复制代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>DOM - 查找节点</title>
   <style>
     .box {
       width: 200px;
       height: 200px;
     }
   </style>
 </head>
 <body>
   <div class="box">123</div>
   <div class="box">456</div>
   <p id="nav">导航栏</p>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ul>
   <script>
     // 获取匹配的第一个元素 也就是内容为 123 的盒子而不是 456 的盒子
     const box = document.querySelector('div')  // 基础选择器
     // 也可以这么写
     const box = document.querySelector('.box')  // 类选择器
     console.dir(box)  // dir是专门获取对象属性的方法
     
     const nav = document.querySelector('#nav')  // id选择器
     console.dir(nav)
     
     // 获取 ul中的第一个 li
     const li = document.querySelector('ul li:first-child')
   </script>
 </body>
 </html>

如果想要选择匹配的多个元素：

语法：document.querySelectorAll('CSS 选择器')

参数：包含一个或多个有效的CSS选择器 字符串 ，因此得加''

返回值：CSS 选择器匹配的NodeList 对象集合（伪数组）

html 复制代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>DOM - 查找节点</title>
   <style>
   </style>
 </head>
 <body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ul>
   <script>
     const lis = document.querySelectorAll('ul li')
     console.dir(lis)  // 结果为 NodeList(3)[li li li]
   </script>
 </body>
 </html>

如果我们想要更改单个DOM对象的属性值，即使用document.querySelector()来获取对象，我们可以直接对其进行修改。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM - 查找节点</title>
</head>
<body>
  <p id="nav">导航栏</p>
  <script>
    const nav = document.querySelector('#nav')  // id选择器
    console.dir(nav)
    // 修改导航栏文字的颜色
    nav.style.color = 'red'
  </script>
</body>
</html>

但如果获取到的是多个对象，因为得到的是一个伪数组，因此我们无法对其直接进行修改，需要遍历伪数组依次给里面的元素进行修改。

大家可能会疑惑，明明是个数组，可以直接用pop()、push()做增删呀，为什么还要遍历数组？

其实我们得到的 NodeList 数组是一个伪数组：

它是有长度有索引号的数组
但是没有pop()、push()等数组方法

因此，它不是真正意义上的数组，想要得到里面的每一个对象，需要遍历来获得。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM - 查找节点</title>
</head>
<body>
  <ul class="nav">
      <li>元素</li>
      <li>元素</li>
      <li>元素</li>
      <li>元素</li>
  </ul>
  <p id="nav">导航栏</p>
  <script>
  	const lis = document.querySelectorAll('.nav li')
    // 获取每个li对象
    for(let i = 0; i < nav.length; i++) {
      console.dir(lis[i])
    }
    
    // 尽管是只有一个元素，使用 querySelectorAll 来获取的得到的都是伪数组
    const p = document.querySelectorAll('#nav')
    console.dir(p)  // NodeList [p#nav]
    // 但可以直接修改属性值
    p[0].style.color = 'red'
  </script>
</body>
</html>

其他获取 DOM 元素的方法（了解）

有三种语法：

javascript 复制代码

// 根据 id 获取一个元素 #nav
document.getElementById('nav')
// 根据标签获取一类元素 获取页面所有的 div
document.getElementsByTagName('div')
// 根据类名获取元素 获取页面所有类名为 w 的类
document.getElementsByClassName('w')

总结：

document.getElementById 专门获取元素类型节点，根据标签的 id 属性查找
任意 DOM 对象都包含 nodeType 属性，用来检检测节点类型
但由于获取的范围太大，不便于区分使用，所以这些方式逐渐被淘汰了