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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/418265.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

wireshark安装及抓包新手使用教程

Wireshark是非常流行的网络封包分析软件&#xff0c;可以截取各种网络数据包&#xff0c;并显示数据包详细信息。常用于开发测试过程各种问题定位。本文主要内容包括&#xff1a; 1、Wireshark软件下载和安装以及Wireshark主界面介绍。 2、WireShark简单抓包示例。通过该例子学…

Ollama—87.4k star 的开源大模型服务框架!!

这一年来&#xff0c;AI 发展的越来越快&#xff0c;大模型使用的门槛也越来越低&#xff0c;每个人都可以在自己的本地运行大模型。今天再给大家介绍一个最厉害的开源大模型服务框架——ollama。 项目介绍 Ollama 是一个开源的大语言模型&#xff08;LLM&#xff09;服务工具…

IDM 工具下载 地图高程数据

巧用IDM工具 快捷下载ASTER GDEM v3高程数据 ASTER GDEM v3是NASA推出的30米高清DEM,覆盖了几乎全部的地球陆地。那么,在NASA官网怎么下载ASTER GDEM v3的地形高程数据呢? 首先,你需要注册一个nasa的账号 注册网址: https://urs.earthdata.nasa.gov/users/new 注册方式和国…

基于人工智能的聊天情感分析系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 1. 引言 情感分析是一种自然语言处理任务&#xff0c;旨在识别文本中的情感&#xff0c;如“积极”、“消极”或“中立”。在聊天应用中&#…

iPhone手机清理软件:照片清理功能全解析

在数字化生活中&#xff0c;智能手机成为我们记录生活点滴的主要工具&#xff0c;尤其是iPhone&#xff0c;以其卓越的相机功能备受用户青睐。然而&#xff0c;成千上万的照片迅速堆积&#xff0c;不仅占用了大量存储空间&#xff0c;还使得设备运行缓慢。在众多解决方案中&…

多环境jdk安装,CentOS,统信UOS,Ubuntu,KylinOS,windows

文章目录 1.CentOS1.1yum安装1.2压缩包安装 本文档只是为了留档方便以后工作运维&#xff0c;或者给同事分享文档内容比较简陋命令也不是特别全&#xff0c;不适合小白观看&#xff0c;如有不懂可以私信&#xff0c;上班期间都是在得 1.CentOS 1.1yum安装 yum install -y jav…

【pyhton】python如何实现将word等文档中的文字转换成语音

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

【TomCat】安装部署

首先得进行Java的安装和部署java1.8对应tomcat9 TomCat下载Apache Tomcat - Apache Tomcat 10 Software Downloads

Verilog和Matlab实现RGB888互转YUV444

文章目录 一、色彩空间1.1 RGB色彩空间1.2 CMYK色彩空间1.3 YUV色彩空间 二、色彩空间转换公式2.1 RGB转CMYK2.2 CMYK转RGB2.3 RGB888转YUV4442.4 YUV444转RGB888 三、MATLAB实现RGB888转YUV4443.1 matlab代码3.2 matlab结果 四、Verilog实现RGB888转YUV444 一、色彩空间 色彩空…

【Python】数据可视化之分类图

目录 条形图 箱形图 散点图 分簇散点图 小提琴 分簇小提琴 条形图 条形图是一种直观的图表形式&#xff0c;它通过不同长度的矩形条&#xff08;即“条形”&#xff09;来展示数值变量的中心趋势估计值&#xff0c;其中每个矩形的高度直接对应于该组数据的某个中心量度&…

2024 年高教社杯全国大学生数学建模竞赛B题第三问详细解题思路(终版)

示例代码&#xff1a; import numpy as np import pandas as pd# 参数设定 params {m: 8, # 零配件数量n: 2, # 半成品数量p: [0.10, 0.10, 0.10, 0.10, 0.10, 0.10, 0.10, 0.10], # 零配件次品率c: [2, 8, 12, 2, 8, 12, 8, 12], # 购买单价d: [1, 1, 2, 1, 1, 2, 1, 2]…

《python语言程序设计》第8章第12题生物信息:找出基因,生物学家使用字母A C T和G构成字符2串建模一个基因组(上)

草稿一、用单一方法遍历文本 9.1代码 genome_text TTATGTTTTAAGGATGGGGCGTTAGTTdef div_word(word_to_judge):len_num len(word_to_judge)save_word ""if len_num % 3 0:print("This word is valid")if save_word.find("ATG") "ATG&qu…

以太网--TCP/IP协议(二)

上文中讲述了IP协议&#xff0c;本文主要来讲一下TCP协议。 TCP协议 &#xff08;1&#xff09;端到端通信 直接把源主机应用程序产生的数据传输到目的主机使用这 些数据的应用程序中&#xff0c;就是端到端通信。 &#xff08;2&#xff09;传输层端口 公认端口&#xff0…

统计学习方法与实战——统计学习方法之感知机

感知机 感知机三要素分析模型策略损失函数选择 算法原始形式对偶形式 相关问题 例子iris数据集分类实战数据集查看 显示结果sklearn 实战感知机 习题解答习题2.1解题步骤反证法 习题2.2习题2.3凸壳线性可分线性可分证明凸壳不相交证明充分性&#xff1a;凸壳不相交\Rightarrow⇒…

【优化】Nginx 配置页面请求不走缓存 浏览器页面禁用缓存

【优化】Nginx 配置页面请求不走缓存 禁用缓存 目录 【优化】Nginx 配置页面请求不走缓存 禁用缓存 对所有请求禁用缓存 对特定location禁用缓存 注意事项 全局禁用缓存 要配置Nginx使其不缓存内容&#xff0c;通常是指禁止浏览器缓存响应的内容&#xff0c;或者是在代理…

Java语言程序设计基础篇_编程练习题**17.21 (十六进制编辑器)

目录 题目&#xff1a;**17.21 (十六进制编辑器) 代码示例 结果展示 题目&#xff1a;**17.21 (十六进制编辑器) 编写一个 GUI 应用程序&#xff0c;让用户在文本域输入一个文件名&#xff0c;然后按回车键&#xff0c;在文本域显示它的十六进制表达形式。用户也可以修改十六…

HarmonyOS 是如何实现一次开发多端部署

一次开发多端部署遇到的几个关键问题 为了实现“一多”的目标&#xff0c;需要解决如下三个基础问题&#xff1a; 问题1&#xff1a;页面如何适配 不同设备间的屏幕尺寸、色彩风格等存在差异&#xff0c;页面如何适配。 问题2&#xff1a;功能如何兼容 不同设备的系统能力…

glsl着色器学习(九)屏幕像素空间和设置颜色

在上一篇文章中&#xff0c;使用的是裁剪空间进行绘制&#xff0c;这篇文章使用屏幕像素空间的坐标进行绘制。 上一篇的顶点着色器大概是这样子的 回归一下顶点着色的主要任务&#xff1a; 通常情况下&#xff0c;顶点着色器会进行一系列的矩阵变换操作&#xff0c;将输入的顶…

【笔记-流程记录】从零开始做一个人形怪兽(建模阶段)

大型 1.第一步还是找素模&#xff0c;打开材质球&#xff0c;吸管点一下&#xff0c;就会出现素模的贴图&#xff0c;一共有四个 比如&#xff0c;点进去第一个&#xff0c;再点漫反射&#xff0c;再点psd就会得到相应的贴图 2.然后我们依然是面片然后插入参考图 如果透视窗口…

KEIL中编译51程序 算法计算异常的疑问

KEIL开发 51 单片机程序 算法处理过程中遇到的问题 ...... by 矜辰所致前言 因为产品的更新换代&#xff0c; 把所有温湿度传感器都换成 SHT40 &#xff0c;替换以前的 SHT21。在 STM32 系列产品上的替换都正常&#xff0c;但是在一块 51 内核的无线产品上面&#xff0c;数据…