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

最新推荐文章于 2024-05-28 11:44:38 发布

Bulut0907

最新推荐文章于 2024-05-28 11:44:38 发布

阅读量761

点赞数 24

分类专栏： Javascript 文章标签： javascript DOM树 DOM元素修改元素内容定时器

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

版权

Javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>
<body>
    <ul>
        <li>测试1</li>
        <li>测试2</li>
        <li>测试3</li>
    </ul>

    <script>
        const lis = document.querySelectorAll('ul li')
        console.log(lis)

        for (let i = 0; i < lis.length; i++) {
            lis[i].style.backgroundColor = 'red'
        }
    </script>
</body>
</html>

效果如下：
document.querySelectorAll效果

2.2 其他获取DOM元素方法

document.getElementById: 根据id获取一个元素
document.getElementsByClassName: 根据类名获取多个元素
document.getElementsByTagName: 根据标签名获取多个元素

示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="nav" class="w">测试</div>

    <script>
        const div1 = document.getElementById('nav')
        const div2 = document.getElementsByClassName('w')
        const div3 = document.getElementsByTagName('div')
        console.log(div1)
        console.log(div2)
        console.log(div3)
    </script>
</body>
</html>

效果如下：
其他获取DOM元素方法效果

3. 修改元素内容

修改元素的文本内容
- innerText: 以纯文本显示，不解析标签
- innerHTML: 会解析标签

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>

    <script>
        const box1 = document.querySelector('#box1')
        console.log(box1.innerText)
        box1.innerText = '<strong>我不会加粗</strong>'
        
        const box2 = document.querySelector('#box2')
        console.log(box2.innerHTML)
        box2.innerHTML = '<strong>我会加粗</strong>'
    </script>
</body>
</html>

效果如下：
修改元素内容效果

修改元素的常见属性，比如： href、title、src等。直接通过对象.属性 = '值'进行修改
修改元素样式属性
- 通过对象.style.样式属性 = '值'修改。添加的是行内样式，权重较高
- 通过对象.className = '类名'修改。可以将多个样式的封装到一个类中。如果之前的标签有class属性，会对class的值进行替换
- 通过对象.classList进行修改。不会对class的值进行替换
  - 对象.classList.add('类名')给class的值追加一个样式类
  - 对象.classList.remove('类名')给class的值删除一个样式类
  - 对象.classList.toggle('类名'): class的值有该样式类则删除，class的值没有该样式类则追加
  - 对象.classList.contains('类名'): class的值是否有该样式类，有则返回true，没有则返回false

使用示例：

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

    <style>
        .box {
            width: 200px;
            height: 200px;
        }

        .active {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>123</div>
    <script>
        const div = document.querySelector('div')
        // 赋予类名，就会得到css的这个类样式
        div.className = 'box'

        div.classList.add('active')
        div.classList.remove('active')
        div.classList.toggle('active')
        div.classList.contains('active')
    </script>
</body>
</html>

效果如下：
修改元素样式属性效果

3.1 修改表单元素属性

也是通过对象.属性 = '值'进行修改，比如input.value = 'password1'、input.type = 'text'
对于表单属性disabled、checked、selected。添加就有效果, 移除就没有效果，所以属性值使用布尔值true或false

示例:

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

</head>
<body>
    <input type="password" value="tmp_password">

    <input type="checkbox" id="checkInput">

    <button>我不能点击</button>

    <script>
        const input = document.querySelector('input')
        input.value = 'password1'
        input.type = 'text'

        const checkInput = document.getElementById('checkInput')
        checkInput.checked = true       // 默认为false

        const button = document.querySelector('button')
        button.disabled = true   // 默认为false

    </script>
</body>
</html>

效果如下：
修改表单元素属性效果

3.2 自定义属性

标签的自定义属性名以data-开头
DOM对象获取属性值以对象.dataset.xxx获取

示例：

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

</head>
<body>
    <div data-id="1" data-name="user1"></div>
    <script>
        const div = document.querySelector('div')
        console.log(div.dataset.id)
        console.log(div.dataset.name)  
    </script>
</body>
</html>

效果如下：
自定义属性效果

4. 定时器

定时器函数有两种

4.1 间歇函数

定时器函数可以进行开启和关闭

开启定时器: let timer = setInterval(函数, 1000)。时间单位为ms，定时器返回一个数值id
关闭定时器: clearInterval(timer)

示例：

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

</head>

<body>
    <script>
        // 使用匿名函数
        setInterval(function () {
          console.log('定时器1')
        }, 1000)

        function func() {
            console.log('定时器2')
        }
        let timer = setInterval(func, 1000)
        // let timer = setInterval('func()', 1000)
        clearInterval(timer)

    </script>
</body>
</html>

效果如下：
间歇函数效果

4.2 延时函数

延时函数setTimeout，让代码延迟只执行一次

开启定时器: let timer = setTimeout(函数, 1000)。时间单位为ms，定时器返回一个数值id
关闭定时器: clearTimeout(timer)

示例：

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

</head>
<body>
  <script>
    let timer = setTimeout(function () {
      console.log('时间到了')
    }, 2000)
    // clearTimeout(timer)
  </script>
</body>
</html>

打开页面，等待两秒，控制台输出消息。如果清除定时器，则控制台不会输出消息