js教程（6）

最新推荐文章于 2024-07-11 20:55:36 发布

乔冠宇

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量963

点赞数 25

分类专栏：前端 WebAPI 文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/2301_77523019/article/details/136633082

版权

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

WebAPI

9 篇文章 0 订阅

订阅专栏

一、Web API概述

1.作用和分类

Web API的作用是让我们可以用JavaScript去操作HTML和浏览器，其中又分为文档对象模型DOM和浏览器对象模型BOM。

2.DOM概述

DOM是指文档对象模型（Document Object Model），是一种用于表示和操作HTML、XML等文档的标准编程接口。它将HTML或XML文档表示为树状结构，每个节点都代表文档的一部分。通过DOM，开发者可以使用编程语言（例如JavaScript）来访问和修改文档的内容、结构和样式。DOM提供了一系列的API，用于增删改查文档的节点，以及处理事件和执行脚本等操作。在Web开发中，DOM是非常重要的一部分，它使得开发者可以以编程的方式操作文档，实现丰富的交互和动态效果。

简单来说，就是浏览器提供的一套专门用来操作网页内容的功能。

DOM树

DOM树（Document Object Model Tree）是用于表示HTML或XML文档的树状结构。在DOM树中，每个节点都代表文档的一部分，包括元素（标签）、文本、注释等。DOM树的根节点称为文档节点（document node），代表整个文档。文档节点下可以有多个子节点，每个子节点可以是元素节点、文本节点、注释节点等。元素节点表示HTML或XML文档中的标签，文本节点表示标签中的文本内容，注释节点表示注释内容。

DOM树的结构是通过解析HTML或XML文档而创建的，它反映了文档的层次结构和关系。开发者可以通过DOM树来访问和操作文档的内容、结构和样式，例如通过节点之间的父子关系、兄弟关系等。DOM树提供了一系列的API，可以方便地增删改查文档的节点，以及处理事件和执行脚本等操作。DOM树是Web开发中非常重要的概念，它使得开发者可以以编程的方式操作文档，实现丰富的交互和动态效果。

总而言之，文档树直观的体现了标签与标签之间的关系。

DOM对象

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

学习前端我们要学会DOM的核心思想，就是把网页内容当做对象来处理，DOM里提供了一个对象document，所以它他提供属性和方法都是用来访问和操作网页内容的，网页的所有内容都在document里面。

二、DOM对象的获取

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

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

语法：

document.querySelector('CSS选择器');

参数：包含一个或多个有效的CSS选择器字符串。

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

（2）选择匹配的多个元素

语法：

document.querySelectorAll('CSS选择器');

参数：包含一个或多个有效的CSS选择器字符串。

返回值：CSS选择器匹配的NodeList对象集合。

（3）示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div class="one">我是第一个盒子</div>
	<div class="two">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
	<script>
		let oneDiv = document.querySelector(".one");
		console.log(oneDiv);
		let liList = document.querySelectorAll("ul li");
		console.log(liList);
	</script>
</body>
</html>

结果：

2.其他获取DOM元素的方法（了解即可）

//根据id获取一个元素

document.getElementById('目标元素id属性值');

//根据标签获取一类元素，获取页面所有div

document.getElementsByTagName('目标标签');

//根据类名获取元素获取页面所有类名为w的

//document.getElementsByClassName('w');

三、操作元素

1.操作元素内容

（1）元素的innerText属性

将文本内容添加/更新到任意标签位置，显示是纯文本，不能解析标签。

（2）元素的innerHTML属性

将文本内容添加/更新到任意标签位置，会解析标签，多标签建议使用模板字符。

（3）示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
	<script>
		const oneDiv = document.querySelector(".one");
		oneDiv.innerText += '我是innerText属性，显示纯文本';
		oneDiv.innerText += '<p>我是p标签</p>';
		const twoDiv = document.querySelector(".two");
		twoDiv.innerHTML += '我是innerHTML属性，可以解析标签';
		twoDiv.innerHTML += '<p>我是p标签</p>';
	</script>
</body>
</html>

输出结果：

如果你不知道做什么，无脑选择innerHTML就行了。

2.操作元素属性

（1）操作元素属性

语法：

对象.属性 = 值;

像操作元素内容中的操作，本质上就是在操作元素属性，处理操作文本，还有一些常见的如href、title、src等。

（2）操作元素样式属性

通过style属性操作CSS

语法：

对象.style.样式属性 = 值;

通过类名操作CSS

语法：

对象.className = '新类名';

通过classList操作类控制CSS

语法：

//追加一个类

对象.classList.add(‘类名’);

//删除一个类

对象.classList.remove('类名');

//切换一个类

对象.classList.toggle('类名');

用法

如果只想改变一个元素的样式属性，可以用style来进行修改；
如果想大量一个元素的样式属性，可以用className来进行修改；
如果想追加一个元素的样式属性，可以用classList来进行追加或删除，长用于导航栏等地方，配合事件监听（后面会讲）可以代替CSS中hover等伪类的作用。

3.操作表单元素

表单有很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框。正常的有属性有取值的，根其他的标签属性没有任何区别，如value、type等，除了这些，表单中还有一些属性添加了就有效果，移除后就没有效果，属性值一律用布尔值表示，例如：disabled、checked、selected等，在开发中也经常使用。

4.自定义属性

标准的标签属性天生自带的属性比如class、id、title等，可以直接使用点语法操作。在HTML5中推出来了专门的data-自定义属性，在标签上一律以data-开头，在DOM对象上一律以dataset对象方式获取。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div data-class="one" class="two"></div>
	<script>
		const one = document.querySelector('.two');
		console.log(one.dataset.class);
	</script>
</body>
</html>

输出结果：

自定义属性可以用来存储与元素相关的额外信息，以便在JavaScript中进行处理或使用。在此示例中，我们可以使用自定义属性来存储有关段落的额外信息，例如标记它为特殊段落或将其与其他操作相关联。

四、定时器

JavaScript中的定时器是一种机制，用于在指定的时间间隔后执行代码或在指定时间后执行代码。定时器主要有两种类型：setInterval和setTimeout。

1.setInterval: setInterval方法用于按照指定的时间间隔重复执行一段代码，直到被清除。它接受两个参数：要执行的代码（函数或代码字符串）和时间间隔（以毫秒为单位）。

2.setTimeout: setTimeout方法用于在指定的时间间隔后执行一段代码，只执行一次。它接受两个参数：要执行的代码（函数或代码字符串）和延迟时间（以毫秒为单位）。

上述代码将在延迟2秒后，在控制台输出"Hello World"。

除了上述两种常见的定时器类型外，还可以使用clearInterval和clearTimeout来清除定时器。

clearInterval用于清除通过setInterval创建的定时器。
clearTimeout用于清除通过setTimeout创建的定时器。

定时器在很多情况下非常有用，例如在需要定期更新数据、轮播图、定时提醒等场景下。但需要注意，过度或不恰当地使用定时器可能会导致性能问题，因此在使用定时器时应慎重考虑。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div></div>
	<script>
		const div = document.querySelector('div');
		let index = 0;
		let interval = setInterval(function(){
			div.innerHTML += `第${index}次`;
			index++;
		},1000);
		setTimeout(()=>{
            clearInterval(interval);
			div.innerHTML += '已停止';
		},5000);
	</script>
</body>
</html>

输出结果：