web APIs-day01-CSDN博客

本文链接：https://blog.csdn.net/qq_44697315/article/details/129283482

本文介绍了WebAPI的基本概念，强调了使用const变量的原因，并详细讲解了DOM的作用、DOM树以及如何通过querySelector和querySelectorAll获取DOM元素。此外，还讨论了如何操作元素内容，如innerText和innerHTML属性，以及修改元素属性、样式和类名的方法，包括使用classList进行类名管理。最后提到了定时器的使用，如setInterval和clearInterval。

摘要由CSDN通过智能技术生成

web API基本认知

变量声明

建议：const优先，尽量使用const，原因是：

const语义化更好

很多变量我们声明的时候就知道不会被更改了

实际开发中也是，比如react框架，基本const

若纠结，有了变量先给const，如果发现它后面是要被修改的再改为let

1.1作用和分类

作用：就是使用js去操作html和浏览器

分类：DOM（文档对象模型）、BOM（浏览器对象模型）

1.2什么是DOM

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

白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能

DOM作用

开发网页内容特效和实现用户交互

1.3DOM树

DOM树是什么

将HTML文档以树状结构直观地表现出来，我们称之为文档树或DOM树

描述网页内容关系的名词

作用：文档树直观的体现了标签与标签之间的关系

1.4DOM对象（重要）

DOM对象：浏览器根据html标签生成JS对象

所有的标签属性都可以在这个对象上面找到

修改这个对象的属性会自动映射到标签身上

DOM的核心思想

把网页内容当作对象来处理

document对象

是DOM里提供的一个对象

所以它提供的属性和方法都是用来访问和操作网页内容的

获取DOM对象

2.1根据CSS选择器来获取DOM元素（重点）

选择匹配的第一个元素

语法：

document.querySelector('css选择器')

参数：

包含一个或多个CSS选择器字符串

返回值：

CSS选择器匹配的第一个元素，一个HTMLElement对象

如果没有匹配到，则返回null

2.选择匹配的多个元素

document.querySelectorAll('css选择器')

参数：

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

返回值：

CSS选择器匹配的NodeList 对象集合

得到的是一个伪数组：

有长度有索引号的数组

但是没有pop() push()等数组方法

想要得到里面的每一个对象，则需要遍历（for）的方式获得

操作元素内容

DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象

就是操作对象使用的点语法

如果想要修改标签元素里面的内容，则可以通过如下几种方式：

对象.innerText属性

对象.innerHTML属性

3.1元素innerText属性

将纯文本内容添加/更新到任意标签位置

显示纯文本，不解析标签

3.2.innerHTML属性

将文本内容添加/更新到任意标签位置

会解析标签，多标签建议使用模版字符

操作元素属性

4.1常用属性修改

还可以通过JS设置/修改标签元素属性，比如通过src更换图片

最常见的属性比如：href、title、src等

语法：

对象.属性 = 值

4.2控制样式属性

还可以通过JS设置/修改标签元素的样式属性

比如通过轮播图小圆点自动更换颜色样式

点击按钮可以滚动图片，这是移动的图片的位置left等等

语法：

对象.style.样式属性 = 值

操作类名（className）操作css

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助css类名的形式。

语法：

元素.className = 'active' //active是一个css类名

注意：

由于class是关键字，所以使用className去代替

className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

通过classList操作控制css（重点）

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

语法：

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')

4.3操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

正常的有属性有取值的跟其他的标签属性没有任何区别

获取：DOM对象.属性名

设置：DOM对象.属性名=新值

表单.value = '用户名'
表单.type = 'password'

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加了该属性如果为false代表移除了该属性

比如：disabled、checked、selected

4.4自定义属性

标准属性：标签天生自带的属性比如class id title等，可以直接使用点语法操作比如：disabled、checked、selected

自定义属性：

在html5中推出来了专门的data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以database对象方式获取

<body>
    <div class="box" data-id="10">盒子</div>
    <script>
        const box = document.querySelector('.box')
        console.log(box.dataset.id)
    </script>
</body>

定时器-间歇函数

1开启定时器

作用：每隔一段时间调用这个函数

间隔时间单位是毫秒

setInterval(函数, 间隔时间)
setInterval(function(){
    console.log('一秒钟打印一次')
},1000)

2关闭定时器

let 变量名 = setInterval(函数, 间隔时间)
clearInterval(变量名)

web APIs-day01

web API基本认知

1.1作用和分类

1.2什么是DOM

1.3DOM树

1.4DOM对象（重要）

获取DOM对象

2.1根据CSS选择器来获取DOM元素（重点）

操作元素内容

3.1元素innerText属性

3.2.innerHTML属性

操作元素属性

4.1常用属性修改

4.2控制样式属性

4.3操作表单元素属性

4.4自定义属性

定时器-间歇函数