WebAPIs

什么是API？

应用程序接口（API，Application Programming Interface）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。

JavaScript，API 和其他 JavaScript 工具之间的关系：

JavaScript——一种内置于浏览器的高级脚本语言，你可以用来实现 Web 页面/应用中的功能。注意 JavaScript 也可用于其他像 Node 这样的编程环境。但现在你不必考虑这些。
客户端 API — 内置于浏览器的结构程序，位于 JavaScript 语言顶部，使你可以更容易的实现功能。
第三方 API — 置于第三方普通的结构程序（例如 Twitter，Facebook），使你可以在自己的 Web 页面中使用那些平台的某些功能（例如在你的 Web 页面显示最新的 Tweets）。
JavaScript 库 — 通常是包含具有特定功能的一个或多个 JavaScript 文件，把这些文件关联到你的 Web 页以快速或授权编写常见的功能。例如包含 jQuery 和 Mootools
JavaScript 框架 — 从库开始的下一步，JavaScript 框架视图把 HTML、CSS、JavaScript 和其他安装的技术打包在一起，然后用来从头编写一个完整的 Web 应用。

了解DOM

1、作用和分类

2、什么是DOM

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

DOM（Document Object Model）是一种用于表示和操作HTML或XML文档的编程接口。它将文档中的每个元素、属性、文本等都表示为对象，形成一个由这些对象组成的树状结构，这个树状结构被称为文档对象模型。通过DOM，开发人员可以使用编程语言（如JavaScript）来动态地访问和修改文档的内容、结构和样式。

在DOM中，文档的根节点是 document 对象。document 对象提供了访问文档中其他元素和节点的入口。DOM 树的节点可以是元素节点、属性节点、文本节点等。

3、获取DOM对象

2、怎么获取

通过ID获取元素：
使用 getElementById 方法，传入元素的ID来获取对应的DOM对象。
1
const myElement = document.getElementById("elementId");

通过标签名、类名获取元素：
使用 getElementsByTagName、getElementsByClassName 方法来获取匹配的元素集合。

1 2	const elementsByTag = document.getElementsByTagName("div"); const elementsByClass = document.getElementsByClassName("myClass");

通过选择器获取元素：
使用 querySelector 和 querySelectorAll 方法，传入CSS选择器来获取元素。

1 2	const element = document.querySelector("#myElement"); const elements = document.querySelectorAll(".myClass");

通过节点关系获取元素：
使用节点关系，如父节点、子节点、兄弟节点等，来获取相关的DOM对象。

1
2
3

const parentElement = myElement.parentNode;
const firstChildElement = parentElement.firstChild;
const nextSiblingElement = myElement.nextSibling;

1、css选择器要清楚：

CSS 选择器

1、基本选择器

通用选择器：将匹配文档的所有元素。*
元素选择器：elementname，如input
类选择器：.classname，如.box
ID选择器：#idname，如#toc
属性选择器：[attr] [attr=value] 等等;选择所有具有属性的元素，[autoplay]autoplay

2、分组选择器

选择器列表

,是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。

语法：A, B

示例： 会同时匹配元素和

元素。div, span

3、组合器

1、后代组合器

“ “（空格）组合器选择前一个元素的后代节点。

语法：A B

1
2
3

selector1 selector2 {
  /* property declarations */
}

2、直接子代组合器

语法：A > B。>组合器选择前一个元素的直接子代的节点。

1
2
3

div > span {
  background-color: yellow;
}

3、一般兄弟组合器

后续兄弟选择器 ~ 将两个选择器分开，并匹配第二个选择器的所有迭代元素，位置无须紧邻于第一个元素，只须有相同的父级元素。

1
2
3

p ~ span {
  color: red;
}

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>//这个被选中了
<span>And this is a red span!</span>//这个被选中了
<code>More code…</code>
<div>How are you?</div>
<p>Whatever it may be, keep smiling.</p>
<h1>Dream big</h1>
<span>And yet again this is a red span!</span>//这个被选中了

4、紧邻兄弟组合器

接续兄弟选择器 +介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

1
2
3

li:first-of-type + li {
  color: red;
}

<ul>
  <li>One</li>
  <li>Two!</li>//这个被选择
  <li>Three</li>
</ul>

5、列组合器

通过列合并符 || 链接两个元素时，它只会匹配被第二个 CSS 选择器匹配的元素，且此元素属于被第一个 CSS 选择器匹配的列元素。

4、伪选择器

CSS 伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类 ：hover 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。

/* 用户的指针悬停在其上的任何按钮 */
button:hover {
  color: blue;
}

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。下例中的：：first-line 伪元素可改变段落首行文字的样式。

/* 每一个 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

4、定时器-间歇函数

setTimeout： 该函数用于在指定的延迟时间后执行一次指定的代码。

javascriptCopy code
// 示例：在3秒后执行一次特定的代码
setTimeout(function() {
    console.log("执行一次");
}, 3000);

setTimeout 接受两个参数：第一个参数是要执行的函数，第二个参数是延迟的时间（以毫秒为单位）。

setInterval： 该函数用于按照指定的时间间隔重复执行指定的代码。

setInterval(函数，间隔时间)
//以毫秒为单位
setInterval(function(){
  //函数体
},1000)
//写函数名
setInterval(fn,1000)

//关闭指定的定时器
let n=setInterval(fn,1000)
clearInterval(n)

与 setTimeout 类似，setInterval 也接受两个参数：第一个参数是要执行的函数，第二个参数是时间间隔。

定时器的注意事项：

清除定时器： 通过 clearTimeout 和 clearInterval 可以用来取消由 setTimeout 和 setInterval 创建的定时器。这是防止定时器继续执行的重要步骤。
1
2
3
4
5
6
7
javascriptCopy code
var timerId = setTimeout(function() {
console.log("执行一次");
}, 3000);

// 取消定时器
clearTimeout(timerId);
异步执行： 定时器的执行是异步的，即代码不会等待定时器完成，而是继续往下执行。这可以用于在不阻塞主线程的情况下执行延迟操作。