博学谷学习记录 | 学习总结，用心分享 | 前端学习之Web APIs（一）

程序二次猿

已于 2023-01-27 21:32:47 修改

阅读量79

点赞数

文章标签：学习 javascript 前端 html

于 2023-01-27 00:22:15 首次发布

本文链接：https://blog.csdn.net/m0_47321226/article/details/128717735

版权

API（Application Programming Interface），中文名为应用程序接口，又称应用编程接口，就是软件系统不同组成部分衔接的约定。在JavaScript中，API的作用就是操作HTML和浏览器，分别对应DOM (文档对象模型)、BOM（浏览器对象模型）。

DOM

1 基本概念

1.定义

DOM（即Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。

这句话非常抽象，通俗一点说就是：当我们想让由HTML和CSS组成的静态网页动起来时（不仅仅局限于动画效果，还有数据的实时更新功能），我们只要使用JavaScript语言并按照“文档对象模型”这个模型中的规则书写代码，我们就能够做到对静态网页的控制。

如果做个比喻，我们可以把DOM比作螺丝刀，由HTML和CSS组成的网页比作螺母，当我们想要拧紧螺母时，只需要按照规则（螺丝刀和螺母尺寸上匹配）找到合适的螺丝刀然后使用即可，并不需要关心螺丝刀是如何生产的（DOM底层）。

2.DOM树

在定义中我们知道了DOM是一个由文档对象组成模型，为了能更加直观地解释，可以用一幅图表示该模型中的关系，如下所示（暂时不用管图中的节点）

因为这幅图的形状和现实中“树”的形象类似（倒过来的树），因此该图又被称为“DOM树”。

3.DOM对象

DOM的中文翻译中有一个很重要但也很抽象的词----对象。我们只需要知道这个对象是一个很大的东西，包含了很多内容，具体有什么之后会一点点的提到。总而言之，你可以把对象想象成一个现实中存在的“人”，人既有姓名、年龄、性别、喜好之类的名词（又称为“属性”），也有走路、跑步、工作之类的动词（又称为“方法”）。

DOM的核心思想就是把网页内容当做对象来处理，其中最重要的对象就是document 对象，网页所有内容都在document里面，它提供的属性和方法都是用来访问和操作网页内容的

2 获取DOM元素

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

0.选择器

1. 选择匹配的第一个元素（重点）

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

2. 选择匹配的多个元素

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

△ 伪数组：

① 有长度、有索引号的数组，可以用 for 循环遍历数组

② 没有 pop() push() 等数组方法

③ 即便只有一个元素，通过querySelectAll() 获取过来的也是一个（里面只有一个元素）伪数组。

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

3 操作元素内容

在开始本节前，需要说明何为元素内容。因为元素即标签，所以元素内容即标签内容，就是某个标签里的代码。举个例子，下列代码中<span>hello world</span>为div标签（或者是box类）里的内容，hello world是span标签里的内容，以此类推。

<body>
  <div class="box"><span>hello world</span></div>
  <script>
    const box = document.querySelector('.box')
    const box_span = document.querySelector('.box span')
  </script>
</body>

如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
① 对象.innerText 属性
② 对象.innerHTML 属性

3.1 innerText 属性

innerText 属性是将文本内容添加/更新到任意标签位置，该属性只能显示纯文本，不解析标签。如果在文本里加上了标签，innerText并不会把标签应有的效果表现出来，而是当做文本处理。

<body>
  <div></div>
  <script>

    const div = document.querySelector('div')


    div.innerText = '大家好，我是xxx！'

  </script>
</body>

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')

    div.innerText = '大家好，我是<strong>xxx</strong>！'
  </script>
</body>

3.2 innerHTML 属性

innerHTML 属性将文本内容添加/更新到任意标签位置，并且会解析标签（多标签建议使用模板字符（`内容`））

<body>
  <div></div>
  <script>

    const div = document.querySelector('div')

    div.innerHTML = '大家好，我是<strong>xxx</strong>！'
    div.innerHTML = `大家好，我是<strong>xxx</strong>！`
  </script>
</body>

4 操作元素属性

4.1 操作元素常用属性

这里说的常用属性是指标签内常见的属性，例如 href、title、src 等。要想对这些属性进行操作，只需写成对象.属性 = 值的形式即可。

<body>
  <img src="" alt=""> //图1 
  <script>
    const img = document.querySelector('img')

    img.src = './xxx/xxx/xxx.png'
  </script>
</body>

<body>
  <img alt=""> //图2
  <script>
    const img = document.querySelector('img')

    img.src = './xxx/xxx/xxx.png'
  </script>
</body>

若 img 标签原先有 src 的值，则 img.src 的值会覆盖原值，若 img 标签没有 src 这个属性，img.src 会在 img 标签的末尾添加一个 src 属性。

4.2 操作元素样式属性

1.通过style属性操作CSS

由于行内的style是元素的属性之一，因此我们可以通过 对象.style.样式属性 的方式对元素样式进行操作。

  <div style="width: 100px; height: 100px; background-color: green;"></div>
  <script>
    const div = document.querySelector('div')

    div.style.width = '200px' //会修改原有的100px的宽
    div.style.backgroundColor = 'yellow' //会修改原有的绿色背景颜色

  </script>

需要注意的是，行内样式里的宽、高、背景色等属性都是字符串，在对对象.style.样式属性赋值时也需要用字符串，而且类似 background-color 这种中间带有-的属性，需要转换为小驼峰命名法

2.通过类名/类名列表操作CSS

除了使用行内样式规定元素样式外，还可以通过操控类选择器来修改元素样式，比如给某个元素加上/删除某一个类名，或者给某个元素加上/删除某些类名等。

（1）通过className属性操作类名

<style>
      .active {
        width: 100px;
        height: 100px;
        background-color: green;
      }

      .setting {
        font-size: 20px;
        color: yellow;
      }
</style>

<div></div>



<script>
      const div = document.querySelector("div");

      div.className = "active setting";

</script>

此方法可以直接给被选中的元素添加类属性，并且一次可以添加多个类，但是每次添加都会覆盖掉原有的类。

（2）通过classList属性来操作类集合

使用className属性会覆盖掉原有类名，如果想要保留原有类名的话就需要在赋值时写上原有类名，在原有类名很多的时候这么写会很麻烦，因此我们就需要用到另一种方法，即classList来操控类的增删查改。

add 和 remove 都很好理解，就是在原有基础上加上一个类名或者删除一个类名而不影响其他的类名，而 toggle 则是先检查原来的类名中是否包含括号中的类名，如果有，则删除，如果没有，则添加。

4.3 操作表单元素属性

与 4.2 1. 通过style属性操作CSS 类似，都是对象.属性名 = 属性值的语法。

4.4 自定义属性

自定义属性是一个在html5中新推出的属性，在标签上一律以 data- 开头来定义，在DOM对象上一律以 dataset 对象方式获取。具体定义方式如下，

data- 后可接任意名字，dataset. 后需接相同名，

  <body>
    <div data-let="1"></div> //随意起名
    <div data-abc="1"></div> //随意起名
    <script>
      const div = document.querySelector("div");

      console.log(div.dataset.let); //与标签内的名字相同
      console.log(div.dataset.abc); //与标签内的名字相同
    </script>
  </body>