JavaScript Web API的基本概念(DOM树、DOM对象)、获取DOM元素、修改元素内容(表单元素属性、自定义属性)、定时器(间歇函数、延时函数)

本文链接：https://blog.csdn.net/yy8623977/article/details/133700222

1. Web API的基本概念

作用: 就是使用JS去操作html和浏览器
分类：DOM(文档对象模型)、BOM(浏览器对象模型)

1.1 DOM介绍

DOM(Document Object Model—文档对象模型)是用来呈现以及与任意HTML或XML文档交互的API。是浏览器提供的一套专门用来操作网页内容的功能

1.2 DOM树

将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树。文档树直观的体现了标签与标签之间的关系。如下所示：
DOM树

说明:

最上级是docment，第二级是HTML
dom树中可以有元素节点、属性节点、文本节点、其它节点

1.3 DOM对象

DOM对象：浏览器根据html标签生成的JS对象。所有的标签属性都可以在这个对象上面找到，修改这个对象的属性会自动作用到标签身上
document对象: 是DOM提供的一个对象, 网页所有内容都在document里面。所以它提供的属性和方法都是用来访问和操作网页内容的，例如例：document.write()

DOM对象

2. 获取DOM元素

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

document.querySelector: 选择匹配的第一个元素。如果没有匹配到，则返回null。示例如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>测试1</li>
        <li>测试2</li>
        <li>测试3</li>
    </ul>

    <script>
        const firstLi = document.querySelector('ul li:first-child')
        console.log(firstLi)
        firstLi.style.color = 'red'
    </script>
</body>
</html>

效果如下：
document.querySelector效果
2. document.querySelectorAll: 选择匹配的多个元素，返回一个NodeList伪数组(有长度有索引号, 但没有pop和push等方法)。示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head&g