Web APIs--Dom获取属性操作

news2024/11/26 0:44:28

目录

1.DOM(操作网页内容、用户交互)

2.DOM对象获取(querySelect(‘’)、querySelectAll(‘’))

总结:

3.操作元素内容(修改元素的文本更换内容)

1. 元素innerText 属性

2.元素.innerHTML 属性

3.总结

4.操作元素属性

1.常用属性(href、title、src 等)

2.操作元素样式属性(轮播图)

(通过 style 、通过操作类名(className) 、 通过 classList 操作类控制CSS)

3. 操作表单元素 属性

4.自定义

5.定时器(间歇函数)

1.定时器函数可以开启(setInterval(函数,间隔时间))

2.定时器函数可以关闭(clearInterval(id编号))

6.案例(用户阅读60s才可以点确认)


1. 有了变量先给const,如果发现它后面是要被修改的,再改为let
2.为什么const声明的对象可以修改里面的属性?
因为对象是引用类型,里面存储的是地址,只要地址不变,就不会报错
建议数组和对象使用 const 来声明
3.什么时候使用let声明变量?
如果基本数据类型的值或者引用类型的地址发生变化的时候,需要用let
比如 一个变量进行加减运算,比如 for循环中的 i++
作用: 就是使用 JS 去操作 html 和浏览器
分类: DOM (文档对象模型)、 BOM (浏览器对象模型)

1.DOM(操作网页内容、用户交互)

DOM:用来呈现以及与任意 HTML 或 XML文档交互的API
(DOM是浏览器提供的一套专门用来 操作网页内容 的功能) (开发网页内容特效和实现用户交互)
DOM树:将 HTML 文档以树状结构直观的表现出来 (描述网页内容关系的名词)
作用: 文档树直观的体现了标签与标签之间的关系
DOM对象:( 浏览器根据html标签生成的 JS对象(DOM对象)
标签属性和对象一一对应,相互作用 ------ 核心思想(把网页内容当做对象来处理
document 对象 是 DOM 里提供的一个 对象 , 它提供的属性和方法都是 用来访问和操作网页内容的
  例:document.write()  网页所有内容都在document里面



2.DOM对象获取(querySelect(‘’)、querySelectAll(‘’)

1.匹配第一个元素(没有匹配到,返回null)
2. 选择匹配的多个元素(返回: CSS选择器匹配的 NodeList 对象集合
哪怕只有一个元素,通过querySelectAll() 获取过来的也是一个 伪数组 ,里面只有一个元素而已

总结:

3.操作元素内容(修改元素的文本更换内容

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

方法:1. 对象.innerText 属性   2. 对象.innerHTML 属性

1. 元素innerText 属性

将文本内容添加/更新到任意标签位置
显示纯文本, 不解析标签

2.元素.innerHTML 属性

将文本内容添加/更新到任意标签位置
会解析标签 ,多标签建议使用模板字符

3.总结

4.操作元素属性

1.常用属性(href、title、src 等

2.操作元素样式属性(轮播图)

通过 style 、通过操作类名(className) 、 通过 classList 操作类控制CSS

修改的样式比较多,通过style属性修改比较繁琐,可以通过借助于css类名的形式(className)
为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名

3. 操作表单元素 属性

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代 表移除了该属性( 比如: disabled、checked、selected)
ipt. checked=true//勾选
button. disabled=true//禁用

4.自定义

5.定时器(间歇函数)

目标:能够说出定时器函数在开发中的使用场景
网页中经常需要一种功能:每隔一段时间需要 自动 执行一段代码,不需要手动去触发(定时器)
setInterval(函数,间隔时间)

每个一段时间调用这个函数(单位,毫秒)

1.定时器函数可以开启(setInterval(函数,间隔时间))

setInterval(function(){//写匿名函数
   console.log(‘一秒执行一次’)
},1000)//一秒1000毫秒,时间可以自定义
//不写匿名函数
function fn(){
    console.log('一秒执行一次')
}

setInterval(fn,1000)//setInterval(函数,间隔时间)
setInterval(fn(),1000)//不要这样写
setInterval('fn()',1000)//可以执行,不建议写

2.定时器函数可以关闭(clearInterval(id编号))

每个定时器有自己的编号(防止互相干扰)

定时器返回的是id数字(每个定时器都是独一无二的)

实际用时,是比如,鼠标经过开,鼠标离开关

let n = setInterval(fn,1000)//用let
console.log(n)//打印id编号
clearInterval(n)//关闭这个编号的定时器,不会影响其他的

关了以后再开.   重新赋值,不要用const

n = setInterval(fn,1000)

6.案例(用户阅读60s才可以点确认)

1.先把按钮禁用(disabled)

<button class ='btn' disabled>我已经阅读用户协议(60)</button>

2.获取元素

const btn = document.querySelector(.'btn')

3.倒计时

//倒计时
let i =5
//开启定时器
let n= setInterval(function(){
   i--
   btn.innerHTML=`我已经阅读用户协议(${i})`
   if(i==0){
     clearInterval(n)//关闭定时器
     //定时器停了,按钮就可以开了
     btn.disabled=false
     btn.innerHTML='同意'
}
},1000)

2.3写在<scritpe>里头

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JavaSE 面向对象程序设计初级 静态static 包package 常量final 代码块 代码实操理论内存原理详解

目录 static(静态) 静态的特点 应用示例 静态变量 静态方法 注意事项 内存图 重新认识main方法 包 什么是包 使用导包在什么时候 final关键字 常量 命名规范 细节&#xff08;重点&#xff09; 权限修饰符 代码块 局部代码块 构造代码块 静态代码块 个人号…

【机器学习】必会降维算法之:随机投影(Random Projection)

随机投影&#xff08;Random Projection&#xff09; 1、引言2、随机投影&#xff08;Random Projection&#xff09;2.1 定义2.2 核心原理2.3 应用场景2.4 实现方式2.5 算法公式2.6 代码示例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c;降维算法还没讲完呢。 小鱼&a…

EE trade:炒伦敦金的注意事项及交易指南

在贵金属市场中&#xff0c;伦敦金因其高流动性和全球认可度&#xff0c;成为广大投资者的首选。然而&#xff0c;在炒伦敦金的过程中&#xff0c;投资者需要注意一些关键点。南华金业小编带您一起来看看。 国际黄金报价 一般国际黄金报价会提供三个价格&#xff1a; 买价(B…

c++里 父类私有的虚函数,也是可以被子类重写和继承的。但父类私有的普通函数,子类无法直接使用

谢谢 。今天看课本上有这么个用法&#xff0c;特测试一下。这样就也可以放心的把父类的私有函数列为虚函数了&#xff0c;或者说把父类的虚函数作为私有函数了。 再补充一例&#xff1a;

ls命令的参数选项

ls命令的参数的作用 可以指定要查看的文件夹&#xff08;目录&#xff09;的内容&#xff0c;如果不指定参数&#xff0c;就查看当前工作目录的内容。ls 命令的选项 常用语法&#xff1a;ls [-a -l -h] [linux路径] -a 选项表示 all &#xff0c;即列出全部内容&#xff0c;包括…

Linux文件编程详解

Linux文件编程详解 在Ubuntu&#xff08;Linux&#xff09;系统下进行文件操作涉及一系列的系统调用&#xff0c;这些调用是基于Unix风格的文件操作API。这些操作包括打开或创建文件、从文件中读取数据、向文件中写入数据、移动文件指针以及关闭文件。以下是这些函数的详细介绍…

WPF/C#:在DataGrid中显示选择框

前言 在使用WPF的过程中可能会经常遇到在DataGrid的最前或者最后添加一列选择框的需求&#xff0c;今天跟大家分享一下&#xff0c;在自己的项目中是如何实现的。 整体实现效果如下&#xff1a; 如果对此感兴趣&#xff0c;可以接下来看具体实现部分。 实践 假设数据库中的…

LeetCode LCP 61. 气温变化趋势

别怕麻烦&#xff0c;模拟题有时候就是要多写一些条件&#xff08;或者你思维很活跃找出规律&#xff09;&#xff0c;代码如下&#xff1a; class Solution { public:int temperatureTrend(vector<int>& temperatureA, vector<int>& temperatureB) {int …

GraphQL vs REST:API设计的现代选择

随着技术的飞速发展&#xff0c;API&#xff08;应用程序接口&#xff09;设计成为了软件开发中不可或缺的一部分。REST&#xff08;Representational State Transfer&#xff09;和GraphQL作为两种主流的API设计风格&#xff0c;各自具有独特的优势和适用场景。本文将深入探讨…

audacity音频处理

1.安装 Audacity | Free Audio editor, recorder, music making and more! 添加OpenVINO插件: https://zhuanlan.zhihu.com/p/676542556 2.使用 2.1注意事项 1.编辑音频,点击左上方打开或导入都可以;打开视频文件则需要安装ffmpeg模块,打开后只显示视频中的音频信息; 2.编辑…

手机k歌用什么麦克风最好?轻揭无线麦克风哪个品牌音质最好!

​无线领夹麦克风作为现代音频技术的重要代表&#xff0c;已广泛应用于各种场合。它不仅能提升演讲者声音质量&#xff0c;还能增加演讲互动性和生动性。然而面对众多产品如何选择适合自己的设备成难题。本文将提供选购使用无线领夹麦克风的建议与推荐款式&#xff0c;帮助你轻…

一文带你全面详细了解安全运维

一、安全运维-网络 1、IP地址相关 IP地址属于网络层地址&#xff0c;用于标识网络中的节点设备。 IP地址由32bit构成&#xff0c;每8bit一组&#xff0c;共占用4个字节。 IP地址由两部分组成&#xff0c;网络位和主机位。 IP地址分类&#xff1a; 类别网络位子网掩码私有地…

tomcat常用配置详解和优化方法

常用配置详解 1 目录结构 /bin&#xff1a;脚本文件目录。 /common/lib&#xff1a;存放所有web项目都可以访问的公共jar包&#xff08;使用Common类加载器加载&#xff09;。 /conf&#xff1a;存放配置文件&#xff0c;最重要的是server.xml。 /logs&#xff1a;存放日志文件…

vue 基于antV 实现流程图编辑器代码

最近在做流程图功能开发&#xff0c;发现阿里antV 有对应的可视化引擎&#xff0c;于是自己做了一个简单vue 基于antV 实现流程图编辑器代码 部分代码如下&#xff1a; <template><div id"flowEditorContent"><header><h3>antv X6 流程编辑…

iptables(4)规则匹配条件

简介 前面我们已经介绍了iptables的基本原理,表、链,数据包处理流程。如何查询各种表的信息。还有基本的增、删、改、保存的基础操作。 经过前文介绍,我们已经能够熟练的管理规则了,但是我们只使用过一种匹配条件,就是将”源地址”作为匹配条件。那么这篇文章中,我们就来…

搞IT需不需要考个软考中级?

如果你是在事业单位、银行、国企等体制内工作&#xff0c;建议考虑参加软考。通过软考评职称后&#xff0c;可以获得加薪和晋升的机会&#xff0c;而且晋升时也会更看重你的职称等级。我就是通过软考评定了中级职称&#xff0c;薪水涨了500元。 评职称并不仅仅是拿到证书就行&…

Talk|北京大学张嘉曌:NaVid - 视觉语言导航大模型

本期为TechBeat人工智能社区第602期线上Talk。 北京时间6月20日(周四)20:00&#xff0c;北京大学博士生—张嘉曌的Talk已经准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “NaVid - 视觉语言导航大模型”&#xff0c;NaVid是首个专为视觉语言导航&#xf…

在华为服务器上编译C++工程的若干错误以及排查方法和解决方法记录

目录 1 报错 2 查找错误原因 2.1 方法一&#xff1a;ldd命令 2.2 方法二&#xff1a;警告信息里面 3 解决错误 3.1 libpng16.so.16 和 libbrotlidec.so.1 问题 3.2 libdevmmap.so 和 libslog.so库问题 3.3 剩余错误 3.3.1 libacllite.so错误解决 3.3.2 libtaclstream…

方舟云康亏损收窄:三年近10亿销售成本,平均付费及月活仍大幅承压

《港湾商业观察》施子夫 三度递表后&#xff0c;终于通过聆讯&#xff0c;方舟云康控股有限公司(以下简称&#xff0c;方舟云康)有望近期内挂牌港交所。方舟云康的国内运营主体为广州方舟云康信息科技集团有限公司、广州方舟医药有限公司。 值得关注的是&#xff0c;亏损的难…

【Hadoop大数据技术】——期末复习(冲刺篇)

&#x1f4d6; 前言&#xff1a;快考试了&#xff0c;做篇期末总结&#xff0c;都是重点与必考点。 题型&#xff1a;简答题、编程题&#xff08;Java与Shell操作&#xff09;、看图分析题。题目大概率会从课后习题、实验里出。 课本&#xff1a; 目录 &#x1f552; 1. HDF…