WebAPI (一)DOM树、DOM对象，操作元素样式(style className,classList)。表单元素属性。自定义属性。间歇函数定时器

2024-09-07 16:12
文章标签 函数 自定义 表单 元素 操作 对象 定时器 属性 style 样式 dom webapi classname 间歇 classlist

本文主要是介绍WebAPI (一)DOM树、DOM对象，操作元素样式(style className,classList)。表单元素属性。自定义属性。间歇函数定时器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • Web API基本认知
  • 一、 变量声明
  • 二、 DOM
    • 1. DOM 树
    • 2. DOM对象
    • 3. 获取DOM对象
      • (1)、选择匹配的第一个元素
      • (2)、选择匹配多个元素
  • 三、 操作元素
    • 1. 操作元素内容
    • 2. 操作元素属性
      • (1)、常用属性（href之类的）
      • (2)、通过style属性操作CSS
      • (3)、通过类名(className)操作CSS
      • (4)、通过classList操作控制CSS
      • (5)、操作表单元素属性
      • (6)、自定义属性
  • 四、 定时器-间歇函数
    • 1. 开启定时器
    • 2. 关闭定时器

Web API基本认知

web API包括DOM和BOM

一、 变量声明

建议：const优先，尽量使用const。有了 变量先给const，后面发现是要被修改的，再改为let。

  • const 声明的变量的值不能更改，而且const声明变量的时候需要里面进行初始化
  • 但是对于引用数据类型，const声明的变量，里面存的不是值，是地址。
    在这里插入图片描述

什么时候使用let声明变量？

  • 如果基本数据类型的值或者引用数据类型的地址发生变化的时候，需要用let

案例一：问以下内容可不可以把let 改为 const？

    let num1 = +prompt('输入第一个数值')let num2 = +prompt('输入第二个数值')alert(`两者相加的结果是：${num1 + num2}`)let person = {uname: 'Tom',age: 19}person.address = '山东'

可以，因为变量的内容没发生变化

案例二：
在这里插入图片描述

二、 DOM

DOM–文档对象模型，操作网页内容，实现用户交互

1. DOM 树

HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，直观的体现了标签与标签之间的关系。
在这里插入图片描述

2. DOM对象

DOM对象怎么创建的？

  • 浏览器根据html标签生成的 JS对象（DOM对象）
  • DOM的核心就是把内容当对象来处理

html里的标签，对应到dom树里，是一个个的JS对象。比如div在html里是标签，通过JS获取过来，在dom树里，div是个对象，div不同的属性就是对象的属性。

document对象

  • 是 DOM 里提供的一个对象（是dom树里最大的对象）
  • 网页所有内容都在document里面

3. 获取DOM对象

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

(1)、选择匹配的第一个元素

document.querySelector('css选择器')  //在style里怎么写css选择器，这里就可以怎么填

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

(2)、选择匹配多个元素

document.querySelectorAll('css选择器')

返回值：CSS选择器匹配的NodeList 对象集合。得到的一个伪数组，有长度、索引号的数组。但是不能用push等数组方法。

<body><!-- 练习： 依次输出3个li的DOM对象 --><ul class="nav"><li>我的首页</li><li>产品介绍</li><li>联系方式</li></ul><script>// 2. 选择匹配的多个元素 querySelectorAll 返回伪数组const lis = document.querySelectorAll('ol li')console.log(lis);// 练习--依次输出3个li的DOM对象const navList = document.querySelectorAll('.nav li')for (let index = 0; index < navList.length; index++) {console.log(navList[index]);}</script>
</body>

在这里插入图片描述

三、 操作元素

1. 操作元素内容

  • innerText：修改文本内容，不解析标签
  • innerHTML：修改文本内容，解析标签
<body><div class="box">这是文本内容</div><script>// 1. innerText 不解析标签const box = document.querySelector('.box')box.innerText = '改成innerText'// 2. innerHTML 可解析标签box.innerHTML = '改成inner HTML'box.innerHTML = '<strong>改成inner HTML</strong>'</script>
</body>

2. 操作元素属性

(1)、常用属性（href之类的）

常用属性比如：href，title，src
语法：对象.属性 = 值

(2)、通过style属性操作CSS

语法：对象.style.样式属性 = 值

注：
  如果属性有-连接符，需要转换为小驼峰命名，比如background-color,此处需写成backgroundColor；
  赋值的时候不要忘记加css单位

<body><div class="box">div</div><script>//获取对象const box = document.querySelector('.box')box.style.width = '200px'box.style.height = '200px'box.style.backgroundColor = 'skyblue'</script>
</body>

(3)、通过类名(className)操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，可以通过借助于css类名的形式。
语法：对象.className = '类名'
className的本质是替换类名，如果需要添加类名，需要保留之前的类名

<style>.test {width: 200px;height: 200px;background-color: greenyellow;}.test2 {width: 250px;height: 250px;color: purple;}
</style>
<body><div class="test">className测试</div><script>// className操作CSS// (1)获取元素const testBox = document.querySelector('.test')// (2)修改类名,覆盖原来的类名testBox.className = 'test2'// 若仍要保持原来的属性testBox.className = 'test test2'</script>
</body>

(4)、通过classList操作控制CSS

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

// 追加一个类
testBox.classList.add('类名')
// 删除一个类
testBox.classList.remove('类名')
// 切换一个类，有则删掉，没有就加上
testBox.classList.toggle('类名')

toggle：类似于开关，可用于切换背景模式(白天，黑夜)

(5)、操作表单元素属性

  • 获取表单值用value（innerHTML获取不到表单的值）
  • 设置表单属性： DOM对象.属性名 = 值
  • 表单中添加就有效果,移除就没有效果的属性一律使用布尔值表示。如果为true 代表添加了该属性 如果是false 代表移除了该属性，比如disabled，checked，selected.
<body><input type="text" value="computer"><br><br><input type="checkbox" id="hobby" name="喝酒" checked> 喝酒<input type="checkbox" id="hobby" name="抽烟"> 抽烟<input type="checkbox" id="hobby" name="烫头"> 烫头<br><br><input type="button" disabled class="buton"><script>// 获取表单的值  value属性const ipt = document.querySelector('input')console.log(ipt.value); // computer// console.log(ipt.innerHTML);  innerHTML获取不到表单的值// 设置表单的值ipt.value = 'tree'ipt.type = 'password'console.log(ipt.value); // tree// 复选框const hobbys = document.querySelectorAll('#hobby')hobbys[0].checked = false// 字符串只有null或空字符串会被解析为false,这里只接受boolean值,发生了隐式转换！hobbys[1].checked = 'true'// 按钮disabledconst buton = document.querySelector('.buton')buton.disabled = false</script>
</body>

(6)、自定义属性

data-自定义属性，注意要以data- 开头。DOM对象上通过dataset对象获取自定义的属性

<body><!-- data-自定义属性 --><div data-id="1" data-name="nothing">1</div><div data-id="2">2</div><div data-id="3">3</div><div data-id="4">4</div><div data-id="5">5</div><script>const one = document.querySelector('div')console.dir(one);console.log(one.dataset.id); // 1console.log(one.dataset.name); // nothing</script>
</body>

在这里插入图片描述

四、 定时器-间歇函数

1. 开启定时器

语法： setInterval(函数名,间隔时间)

  • 该函数返回的是该定时器的id。每隔一段时间调用这个函数
  • 参数间隔时间的单位是毫秒
  • 函数不是立即执行，而是过了间隔时间后，执行该函数
    • 也就是：间隔时间，执行函数，间隔时间，执行函数
    • 而不是：执行函数，间隔时间，执行函数，间隔时间
// 匿名函数
let num = setInterval(function () {
console.log('3秒钟执行一次');
}, 1000)// 不用匿名函数
function fn () {
console.log('1S执行一次');
}
let num2 = setInterval(fn, 1000) //如果是写fn()的话,则会出错,因为fn()是调用函数

2. 关闭定时器

语法：clearInterval(定时器id)

// 关闭定时器2
clearInterval(num2)

这篇关于WebAPI (一)DOM树、DOM对象，操作元素样式(style className,classList)。表单元素属性。自定义属性。间歇函数定时器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1145536。

相关文章

Python 中的 with open文件操作的最佳实践

Python 中的 with open文件操作的最佳实践

《Python中的withopen文件操作的最佳实践》在Python中,withopen()提供了一个简洁而安全的方式来处理文件操作,它不仅能确保文件在操作完成后自动关闭,还能处理文件操作中的异... 目录什么是 with open()？为什么使用 with open()？使用 with open() 进行
阅读更多...
MySQL高级查询之JOIN、子查询、窗口函数实际案例

MySQL高级查询之JOIN、子查询、窗口函数实际案例

《MySQL高级查询之JOIN、子查询、窗口函数实际案例》：本文主要介绍MySQL高级查询之JOIN、子查询、窗口函数实际案例的相关资料,JOIN用于多表关联查询,子查询用于数据筛选和过滤,窗口函... 目录前言1. JOIN（连接查询）1.1 内连接（INNER JOIN）1.2 左连接（LEFT JOI
阅读更多...
Linux ls命令操作详解

Linux ls命令操作详解

《Linuxls命令操作详解》通过ls命令,我们可以查看指定目录下的文件和子目录,并结合不同的选项获取详细的文件信息,如权限、大小、修改时间等,：本文主要介绍Linuxls命令详解,需要的朋友可... 目录1. 命令简介2. 命令的基本语法和用法2.1 语法格式2.2 使用示例2.2.1 列出当前目录下的文
阅读更多...
MySQL中FIND_IN_SET函数与INSTR函数用法解析

MySQL中FIND_IN_SET函数与INSTR函数用法解析

《MySQL中FIND_IN_SET函数与INSTR函数用法解析》：本文主要介绍MySQL中FIND_IN_SET函数与INSTR函数用法解析,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一... 目录一、功能定义与语法1、FIND_IN_SET函数2、INSTR函数二、本质区别对比三、实际场景案例分
阅读更多...
如何高效移除C++关联容器中的元素

如何高效移除C++关联容器中的元素

《如何高效移除C++关联容器中的元素》关联容器和顺序容器有着很大不同,关联容器中的元素是按照关键字来保存和访问的,而顺序容器中的元素是按它们在容器中的位置来顺序保存和访问的,本文介绍了如何高效移除C+... 目录一、简介二、移除给定位置的元素三、移除与特定键值等价的元素四、移除满足特android定条件的元
阅读更多...
C++ Sort函数使用场景分析

C++ Sort函数使用场景分析

《C++Sort函数使用场景分析》sort函数是algorithm库下的一个函数,sort函数是不稳定的,即大小相同的元素在排序后相对顺序可能发生改变,如果某些场景需要保持相同元素间的相对顺序,可使... 目录C++ Sort函数详解一、sort函数调用的两种方式二、sort函数使用场景三、sort函数排序
阅读更多...
C语言函数递归实际应用举例详解

C语言函数递归实际应用举例详解

《C语言函数递归实际应用举例详解》程序调用自身的编程技巧称为递归,递归做为一种算法在程序设计语言中广泛应用,：本文主要介绍C语言函数递归实际应用举例的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录前言一、递归的概念与思想二、递归的限制条件 三、递归的实际应用举例（一）求 n 的阶乘（二）顺序打印
阅读更多...
Spring Security基于数据库的ABAC属性权限模型实战开发教程

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》：本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA
阅读更多...
C/C++错误信息处理的常见方法及函数

C/C++错误信息处理的常见方法及函数

《C/C++错误信息处理的常见方法及函数》C/C++是两种广泛使用的编程语言,特别是在系统编程、嵌入式开发以及高性能计算领域,：本文主要介绍C/C++错误信息处理的常见方法及函数,文中通过代码介绍... 目录前言1. errno 和 perror()示例：2. strerror()示例：3. perror(
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2