1.Web API 了解

1.1 作用和分类

Web API 的作用是使用 JS 去操作 HTML 和 浏览器

Web API 的分类：DOM（文档对象模型）、BOM（浏览器对象模型）

1.2 DOM 定义、DOM 树

DOM 是文档对象模型（Document Object Model），用来与任意的 HTML 或 XML 文档交互的 API ，通俗来说就是，DOM 是浏览器提供的一套专门用来 操作网页内容 的功能，具有 开发网页内容特效 和实现 用户交互 的功能。

将 HTML 文档以树状结构直观的表现出来，称之为 文档树 或 DOM树，是描述网页内容关系的名词，它直观的体现了 标签与标签 之间的关系。

1.3 DOM 对象

DOM 对象： 浏览器根据 HTML 标签生成的 JS 对象 ，所有的标签属性都可以在这个对象上面找到，修改这个对象的属性会自动映射到标签身上。

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

document 对象 是 DOM 里提供的一个对象，它提供的属性和方法都是用来访问和操作网页内容的，网页所有的内容都在 document 里面。

2. 获取 DOM 对象

我们想要操作某个标签时，首先应该选中这个标签，与 CSS 选择器类似，选中标签才能操作，查找 DOM 元素就是选择页面中的标签元素

2.1 根据 CSS 选择器来获取 DOM 元素 - 选择匹配第一个元素

选择匹配第一个元素 ：document.querySelector('CSS选择器') ，参数中可以包含一个或多个有效的 CSS 选择器 字符串 ，其返回结果是 CSS 选择器匹配到的 第一个元素 ，一个 HTMLElement 对象，如果没有匹配到，则返回 null

参考网址：Document - Web API | MDN (mozilla.org)

示例：

  <body>
    <a href="#">超链接名称</a>
    <div id="name" class="text">文本</div>
    <div>文本2</div>

    <script>
      let div = document.querySelector('div')
      console.log(div)
    </script>
  </body>

只匹配到了第一个 div 元素：

示例2：

  <body>
    <a href="#">超链接名称</a>
    <div>文本1</div>
    <div>文本2</div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <script>
      let li = document.querySelector('ul li:last-child')
      console.log(li)
    </script>
  </body>

2.2 根据 CSS 选择器来获取 DOM 元素 - 选择匹配多个元素

选择匹配多个元素 ：document.querySelectorAll('CSS选择器') ，参数中可以包含一个或多个有效的 CSS 选择器 字符串 ，其返回结果是 CSS 选择器匹配到的 NodeList 对象集合 ，返回一个数组

例如：

  <body>
    <a href="#">超链接名称</a>
    <div>文本1</div>
    <div>文本2</div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <script>
      let divs = document.querySelectorAll('div')
      console.log(divs)
    </script>
  </body>

querySelector 与 querySelectorAll 的区别在于前者可以直接操作修改，而后者只能通过遍历的方式给元素做修改。

querySelector 与 querySelectorAll 得到的都是一个 伪数组 ，只不过前者获取过来的伪数组里面只有一个元素，后者获取到是有长度、有索引号的伪数组，但是它没有 pop()、push() 等数组方法，想要得到伪数组里面的每一个对象，需要用遍历的方式获得。

示例：

  <body>
    <a href="#">超链接名称</a>
    <div>文本1</div>
    <div>文本2</div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script>
      let lis = document.querySelectorAll('ul li')
      for (let i = 0; i < lis.length; i++) {
        console.log(lis[i])
      }
    </script>
  </body>

2.3 其他获取 DOM 元素的方法

其他获取 DOM 元素的方法：

  <body>
    <a href="#">超链接名称</a>
    <div class="one">文本1</div>
    <div>文本2</div>
    <ul>
      <li class="one">1</li>
      <li>2</li>
      <li id="three">3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script>
      // 1.根据 id 获取一个元素
      document.getElementById('three')

      // 2.根据标签获取一类元素 获取页面所有的 li
      document.getElementsByTagName('li')

      // 3.根据类名获取元素 获取页面所有类名为 one 的元素
      document.getElementsByClassName('one')
    </script>
  </body>

1. DOM 获取元素、修改属性（1）之 Web API 了解及获取 DOM 对象