前言
在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果，更易理解喔😘
WebAPI背景知识
什么是WebAPI
前面学习的 JS 分成三个大的部分
- ECMAScript: 基础语法部分
- DOM API: 操作页面结构
- BOM API: 操作浏览器
WebAPI 就包含了 DOM + BOM. 这个是 W3C 组织规定的. (和制定 ECMAScript 标准的大佬们不是一伙人).
前面学的 JS 基础语法主要学的是 ECMAScript, 这让我们建立基本的编程思维. 相当于练武需要先扎马步. 但是真正来写一个更加复杂的有交互式的页面, 还需要 WebAPI 的支持. 相当于各种招式.
什么是API
API是一个更广义的概念，念. 而 WebAPI 是一个更具体的概念, 特指 DOM+BOM
所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发.
相当于一个工具箱. 只不过程序猿用的工具箱数目繁多, 功能复杂.
API参考文档
可以在搜索引擎中按照 “MDN + API 关键字” 的方式搜索, 也能快速找到需要的 API 文档.
DOM基本概念
什么是DOM
什么是 DOM DOM 全称为 Document Object Model.
W3C 标准给我们提供了一系列的函数, 让我们可以操作:
- 网页内容
- 网页结构
- 网页样式
DOM树
一个页面的结构是一个树形结构, 称为 DOM 树.
页面结构形如:
DOM树形结构形如：
重要概念:
- 文档: 一个页面就是一个 文档, 使用
document表示. - 元素: 页面中所有的标签都称为元素. 使用
element表示. - 节点: 网页中所有的内容都可以称为节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用
node表示.
这些文档等概念在 JS 代码中就对应一个个的对象.
所以才叫 “文档对象模型” .
查找HTML元素
下面我们将介绍几种常见的DOM元素选择方法。
方法概览
| 方法 | 描述 |
document.getElementById(id) |
通过元素 id 来查找元素。 |
document.getElementsByTagName(name) |
通过标签名来查找元素。 |
document.getElementsByClassName(name) |
通过类名来查找元素。 |
document.querySelector(CSS选择器) |
通过CSS选择器选择一个元素。 |
document.querySelectorAll(CSS选择器) |
通过CSS选择器选择多个元素。 |
1. document.getElementById(id)
getElementById 方法用于通过元素的 id 来查找并返回单个元素。这是最常用的方法之一，因为ID通常是唯一的。
示例代码
<!DOCTYPE html> <html> <head> <title>getElementById 示例</title> </head> <body> <div id="myDiv">这是一个 div 元素。</div> <script> var element = document.getElementById("myDiv"); console.log(element.innerText); // 输出: 这是一个 div 元素。 </script> </body> </html>
getElementsByTagName 方法返回具有指定标签名的所有元素的集合（HTMLCollection）。该方法返回的是一个动态集合，意味着如果DOM发生变化，该集合也会更新。
2.document.getElementsByTagName(name)
示例代码
<!DOCTYPE html> <html> <head> <title>getElementsByTagName 示例</title> </head> <body> <p>这是第一个段落。</p> <p>这是第二个段落。</p> <script> var elements = document.getElementsByTagName("p"); console.log(elements.length); // 输出: 2 console.log(elements[0].innerText); // 输出: 这是第一个段落。 </script> </body> </html>
3. document.getElementsByClassName(name)
getElementsByClassName 方法返回具有指定类名的所有元素的集合（HTMLCollection）。与 getElementsByTagName 类似，它返回的是一个动态集合。
示例代码
<!DOCTYPE html> <html> <head> <title>getElementsByClassName 示例</title> </head> <body> <div class="myClass">这是第一个 div 元素。</div> <div class="myClass">这是第二个 div 元素。</div> <script> var elements = document.getElementsByClassName("myClass"); console.log(elements.length); // 输出: 2 console.log(elements[1].innerText); // 输出: 这是第二个 div 元素。 </script> </body> </html>
4. document.querySelector(CSS选择器)
querySelector 方法返回匹配指定CSS选择器的第一个元素。如果有多个匹配的元素，只返回第一个。
示例代码
<!DOCTYPE html> <html> <head> <title>querySelector 示例</title> </head> <body> <div class="container"> <p>这是一个段落。</p> <p>这是另一个段落。</p> </div> <script> var element = document.querySelector(".container p"); console.log(element.innerText); // 输出: 这是一个段落。 </script> </body> </html>
5. document.querySelectorAll(CSS选择器)
querySelectorAll 方法返回匹配指定CSS选择器的所有元素的静态集合（NodeList）。与 querySelector 不同，它返回所有匹配的元素。
示例代码
<!DOCTYPE html> <html> <head> <title>querySelectorAll 示例</title> </head> <body> <div class="container"> <p>这是第一个段落。</p> <p>这是第二个段落。</p> </div> <script> var elements = document.querySelectorAll(".container p"); console.log(elements.length); // 输出: 2 console.log(elements[1].innerText); // 输出: 这是第二个段落。 </script> </body> </html>
【前端基础篇】JavaScript之DOM介绍2：https://developer.aliyun.com/article/1617359
