文章目录
- WebAPI背景知识
- DOM基本概念
-
- 什么是DOM
- DOM树
- 查找HTML元素
-
- 方法概览
-
- [1. `document.getElementById(id)`](#1.
document.getElementById(id)
) - 2.`document.getElementsByTagName(name)`
- [3. `document.getElementsByClassName(name)`](#3.
document.getElementsByClassName(name)
) - [4. `document.querySelector(CSS选择器)`](#4.
document.querySelector(CSS选择器)
) - [5. `document.querySelectorAll(CSS选择器)`](#5.
document.querySelectorAll(CSS选择器)
)
- [1. `document.getElementById(id)`](#1.
- 获取HTML的值
-
- 方法概览
-
- [1. 元素节点.innerText](#1. 元素节点.innerText)
- [2. 元素节点.innerHTML](#2. 元素节点.innerHTML)
- [3. 元素节点.属性](#3. 元素节点.属性)
- [4. 元素节点.getAttribute(attribute)](#4. 元素节点.getAttribute(attribute))
- [5. 元素节点.style.样式](#5. 元素节点.style.样式)
- 改变HTML的值
- 修改HTML元素
-
- 方法概览
-
- [1. `document.createElement(element)`](#1.
document.createElement(element)
) - [2. `document.createAttribute(attribute)`](#2.
document.createAttribute(attribute)
) - [3. `document.createTextNode(text)`](#3.
document.createTextNode(text)
) - [4. `元素节点.removeChild(element)`](#4.
元素节点.removeChild(element)
) - [5. `元素节点.appendChild(element)`](#5.
元素节点.appendChild(element)
) - [6. `元素节点.replaceChild(element)`](#6.
元素节点.replaceChild(element)
) - [7. `元素节点.insertBefore(element)`](#7.
元素节点.insertBefore(element)
)
- [1. `document.createElement(element)`](#1.
- 查找HTML父子
- 事件概述
-
- 什么是事件
- JavaScript中的常见DOM文档事件
-
- [1. `DOMContentLoaded`](#1.
DOMContentLoaded
) - [2. `click`](#2.
click
) - [3. `keyup` 和 `keydown`](#3.
keyup
和keydown
) - [4. `mouseover` 和 `mouseout`](#4.
mouseover
和mouseout
) - [5. `submit`](#5.
submit
) - [6. `resize`](#6.
resize
) - [7. `focus` 和 `blur`](#7.
focus
和blur
) - [8. `change`](#8.
change
) - [9. `scroll`](#9.
scroll
)
- [1. `DOMContentLoaded`](#1.
- 结论
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通常是唯一的。
示例代码
html
<!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)
示例代码
html
<!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
类似,它返回的是一个动态集合。
示例代码
html
<!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选择器的第一个元素。如果有多个匹配的元素,只返回第一个。
示例代码
html
<!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
不同,它返回所有匹配的元素。
示例代码
html
<!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>
获取HTML的值
方法概览
方法 | 描述 |
---|---|
元素节点.innerText |
获取 HTML 元素的 inner Text。 |
元素节点.innerHTML |
获取 HTML 元素的 inner HTML。 |
元素节点.属性 |
获取 HTML 元素的属性值。 |
元素节点.getAttribute(attribute) |
获取 HTML 元素的属性值。 |
元素节点.style.样式 |
获取 HTML 元素的行内样式值。 |
1. 元素节点.innerText
innerText
属性用于获取或设置HTML元素的文本内容。它返回元素及其所有子元素的"可见"文本内容。
示例代码:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>InnerText 示例</title>
</head>
<body>
<div id="example">Hello, <span>World</span>!</div>
<script>
const element = document.getElementById("example");
console.log(element.innerText); // 输出: "Hello, World!"
element.innerText = "Hello, JavaScript!";
</script>
</body>
</html>
在上面的示例中,innerText
获取了div
元素及其子元素span
的可见文本,并将其输出到控制台。
2. 元素节点.innerHTML
innerHTML
属性用于获取或设置HTML元素的内容,包括HTML标记。与innerText
不同,innerHTML
会解析标签并返回元素的所有内容。
示例代码:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>InnerHTML 示例</title>
</head>
<body>
<div id="example">Hello, <span>World</span>!</div>
<script>
const element = document.getElementById("example");
console.log(element.innerHTML); // 输出: "Hello, <span>World</span>!"
element.innerHTML = "Hello, <strong>JavaScript</strong>!";
</script>
</body>
</html>
innerHTML
不仅可以获取元素的内容,还可以通过设置innerHTML
属性来更新元素的内容,包括嵌套的HTML标签。
3. 元素节点.属性
通过直接访问元素的属性,可以获取或设置元素的属性值。例如,element.id
或element.className
。
示例代码:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性访问示例</title>
</head>
<body>
<div id="example" class="demo">示例内容</div>
<script>
const element = document.getElementById("example");
console.log(element.id); // 输出: "example"
console.log(element.className); // 输出: "demo"
element.id = "newID";
element.className = "newClass";
</script>
</body>
</html>
在上面的示例中,element.id
和 element.className
分别用于获取和设置元素的id
和class
属性。
4. 元素节点.getAttribute(attribute)
getAttribute
方法用于获取元素上指定的属性值。
示例代码:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getAttribute 示例</title>
</head>
<body>
<div id="example" data-custom="value">示例内容</div>
<script>
const element = document.getElementById("example");
console.log(element.getAttribute("id")); // 输出: "example"
console.log(element.getAttribute("data-custom")); // 输出: "value"
</script>
</body>
</html>
getAttribute
是一个通用方法,可以用于获取任何存在于元素上的属性值,不仅限于标准属性。
5. 元素节点.style.样式
style
属性用于访问元素的内联样式,可以用来获取或设置内联样式值。
示例代码:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式访问示例</title>
</head>
<body>
<div id="example" style="color: red;">示例内容</div>
<script>
const element = document.getElementById("example");
console.log(element.style.color); // 输出: "red"
element.style.color = "blue";
</script>
</body>
</html>
通过style
属性,可以直接操作元素的内联样式。例如,在上面的代码中,style.color
用于获取和设置文本颜色。
改变HTML的值
方法 | 描述 |
---|---|
元素节点.innerText = new text content | 改变元素的 inner Text。 |
元素节点.innerHTML = new html content | 改变元素的 inner HTML。 |
元素节点.属性 = new value | 改变 HTML 元素的属性值。 |
元素节点.setAttribute(attribute, value) | 改变 HTML 元素的属性值。 |
元素节点.style.样式 = new style | 改变 HTML 元素的行内样式值。 |
这个比上面查找的就多了一个赋值,改变HTML的值,此处不再赘述
修改HTML元素
方法概览
方法 | 描述 |
---|---|
document.createElement(element) |
创建 HTML 元素节点。 |
document.createAttribute(attribute) |
创建 HTML 属性节点。 |
document.createTextNode(text) |
创建 HTML 文本节点。 |
元素节点.removeChild(element) |
删除 HTML 元素。 |
元素节点.appendChild(element) |
添加 HTML 元素。 |
元素节点.replaceChild(element) |
替换 HTML 元素。 |
元素节点.insertBefore(element) |
在指定的子节点前面插入新的子节点。 |
1. document.createElement(element)
功能: 创建一个新的 HTML 元素节点。
示例:
javascript
let newDiv = document.createElement("div");
说明: 该方法创建了一个新的 div
元素,但此时它还没有被添加到页面中,需要使用其他方法将其插入到 DOM 中。
2. document.createAttribute(attribute)
功能: 创建一个新的 HTML 属性节点。
示例:
javascript
let newAttr = document.createAttribute("class");
newAttr.value = "new-class";
说明: 此方法创建了一个新的属性(如 class
),但该属性还没有应用到任何元素,需要手动将其附加到元素上。
3. document.createTextNode(text)
功能: 创建一个文本节点,用于包含纯文本内容。
示例:
javascript
let textNode = document.createTextNode("Hello, World!");
说明: 创建了一个包含文本 "Hello, World!" 的文本节点,可以将它插入到一个元素中显示在页面上。
4. 元素节点.removeChild(element)
功能: 从 DOM 中删除子元素。
示例:
javascript
let parentElement = document.getElementById("parent");
let childElement = document.getElementById("child");
parentElement.removeChild(childElement);
说明: 此方法从父节点中移除了指定的子节点 childElement
。
5. 元素节点.appendChild(element)
功能: 将一个新的子节点添加到指定的父节点中。
示例:
javascript
let parentElement = document.getElementById("parent");
let newDiv = document.createElement("div");
parentElement.appendChild(newDiv);
说明: 该方法将创建的 newDiv
元素添加到父元素 parentElement
的子节点列表末尾。
6. 元素节点.replaceChild(element)
功能: 替换当前子节点。
示例:
javascript
let parentElement = document.getElementById("parent");
let oldChild = document.getElementById("oldChild");
let newDiv = document.createElement("div");
parentElement.replaceChild(newDiv, oldChild);
说明: 此方法用 newDiv
替换了 oldChild
节点。
7. 元素节点.insertBefore(element)
功能: 在指定的子节点前面插入新的子节点。
示例:
javascript
let parentElement = document.getElementById("parent");
let newDiv = document.createElement("div");
let referenceNode = document.getElementById("referenceNode");
parentElement.insertBefore(newDiv, referenceNode);
说明: 此方法将 newDiv
插入到 referenceNode
节点之前。
查找HTML父子
方法概览
方法 | 描述 |
---|---|
元素节点.parentNode |
返回元素的父节点。 |
元素节点.parentElement |
返回元素的父元素。 |
元素节点.childNodes |
返回元素的一个子节点的数组(包含空白文本Text节点)。 |
元素节点.children |
返回元素的一个子元素的集合(不包含空白文本Text节点)。 |
元素节点.firstChild |
返回元素的第一个子节点(包含空白文本Text节点)。 |
元素节点.firstElementChild |
返回元素的第一个子元素(不包含空白文本Text节点)。 |
元素节点.lastChild |
返回元素的最后一个子节点(包含空白文本Text节点)。 |
元素节点.lastElementChild |
返回元素的最后一个子元素(不包含空白文本Text节点)。 |
元素节点.previousSibling |
返回某个元素紧接之前的兄弟节点(包含空白文本Text节点)。 |
元素节点.previousElementSibling |
返回指定元素的前一个兄弟元素(相同节点树层中的前一个元素节点)。 |
元素节点.nextSibling |
返回某个元素紧接之后的兄弟节点(包含空白文本Text节点)。 |
元素节点.nextElementSibling |
返回指定元素的后一个兄弟元素(相同节点树层中的下一个元素节点)。 |
事件概述
什么是事件
JS 要构建动态页面, 就需要感知到用户的行为. 用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作.
浏览器就是一个哨兵, 在侦查敌情(用户行为). 一旦用户有反应(触发具体动作), 哨兵就会点燃烽火台的狼烟(事件), 后方就可以根据狼烟来决定下一步的对敌策略.
JavaScript中的常见DOM文档事件
1. DOMContentLoaded
DOMContentLoaded
事件在初始HTML文档被完全加载和解析后触发,不等待样式表、图片和子框架的加载。
javascript
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM完全加载并解析完成");
});
解释: 当你想在文档完全加载后执行某些JavaScript代码,并确保可以安全地操作DOM时,此事件非常有用。
addEventListener 方法
addEventListener 是绑定事件的标准方法,推荐在大多数情况下使用。它可以为一个 DOM
元素添加一个或多个事件监听器,当事件触发时,执行指定的回调函数。
示例:
html
// 获取 DOM 元素
const button = document.querySelector('button');
// 为按钮添加点击事件监听器
button.addEventListener('click', function() {
alert('按钮被点击了!');
});
优点: 可以为同一元素绑定多个相同或不同类型的事件,不会互相覆盖。 支持事件捕获和事件冒泡机制,可以通过传递第三个参数来设置。
缺点:
在某些老旧浏览器(如 IE8 及更早版本)中不支持。
2. click
click
事件发生在用户点击一个元素(例如按钮、链接或图片)时。此事件通常用于触发特定动作。
javascript
document.getElementById("myButton").addEventListener("click", function() {
alert("按钮被点击了!");
});
解释: 当点击ID为 myButton
的按钮时,触发一个弹出框,显示"按钮被点击了!"。
3. keyup
和 keydown
keyup
和 keydown
事件在用户按下键盘上的按键时触发。keydown
发生在按下按键时,keyup
发生在按键释放时。
javascript
document.addEventListener("keydown", function(event) {
console.log("按下的键是: " + event.key);
});
解释: 当任意按键被按下时,按键的对应值将会记录在控制台中。
4. mouseover
和 mouseout
mouseover
事件发生在用户将鼠标移到一个元素上时,而 mouseout
事件则是在鼠标移出元素时触发。
javascript
document.getElementById("hoverElement").addEventListener("mouseover", function() {
console.log("鼠标移到了元素上!");
});
解释: 当用户将鼠标悬停在ID为 hoverElement
的元素上时,控制台将打印一条消息。
5. submit
submit
事件在表单提交时触发。通常用于在表单提交之前验证表单数据。
javascript
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault();
console.log("表单已提交!");
});
解释: 表单的默认提交行为被 event.preventDefault()
阻止,而是打印了一条消息。
6. resize
resize
事件在浏览器窗口被调整大小时触发。它在创建响应式布局或处理窗口变化时非常有用。
javascript
window.addEventListener("resize", function() {
console.log("窗口大小已调整为: " + window.innerWidth + "x" + window.innerHeight);
});
解释: 每当窗口大小发生变化时,新的窗口尺寸将会打印在控制台中。
7. focus
和 blur
focus
事件在元素获得焦点时触发,而 blur
事件在元素失去焦点时触发。这些事件常用于表单字段的验证或提示。
javascript
let inputField = document.getElementById("username");
inputField.addEventListener("focus", function() {
console.log("输入框获得焦点");
});
inputField.addEventListener("blur", function() {
console.log("输入框失去焦点");
});
解释: 当用户点击输入框时,触发 focus
事件;当用户点击其他地方离开输入框时,触发 blur
事件。
8. change
change
事件在用户改变输入元素的值后触发,常用于 input
、select
、textarea
等表单元素。
javascript
document.getElementById("mySelect").addEventListener("change", function() {
console.log("选择的值发生了变化");
});
解释: 当用户在下拉框中选择不同的选项时,触发 change
事件。
9. scroll
scroll
事件在用户滚动页面或元素时触发,适用于具有滚动条的元素或整个窗口的滚动。
javascript
window.addEventListener("scroll", function() {
console.log("页面正在滚动");
});
解释: 每当用户滚动页面时,控制台将打印消息。
结论
理解和处理常见的DOM文档事件对于创建互动性和动态的网页至关重要。上面讨论的事件涵盖了许多常见的用户交互场景,掌握它们可以极大地增强构建响应式用户界面的能力,并改善网站的用户体验。
以上就是关于【前端基础篇】JavaScript之DOM介绍的内容啦,各位大佬有什么问题欢迎在评论区指正,您的支持是我创作的最大动力!❤️