JavaScript【DOM-获取DOM元素、修改属性】

DOM-获取DOM元素、修改属性
目标: 能获取DOM元素并修改元素属性,具备利用定时器制作焦点图切换的能力
webApi的基本认知
作用: 就是使用JS去操作html和浏览器
分类
DOM
操作html和css
BOM
操作浏览器
DOM 树
HTML DOM 定义了访问和操作 HTML 文档的标准方法
DOM 以树结构表达 HTML 文档

DOM对象(重要)
浏览器根据html标签生成的JS对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
操作dom对象本质上就是在操作页面元素
获取DOM对象的方式
document.querySelector
获取的是满足条件的第一个 一定只有一个
获取的是dom元素,可以直接操作
如果没有获取到,就返回null
Cannot read properties of null (reading ‘style’):不能使用null读取属性style
document.querySelectorAll
获取的是满足条件的所有DOM对象 返回的是一个集合-NodeList–伪数组
获取的是伪数组,无法直接操作,必须通过下标才能操作,所以我们对伪数组进行遍历
for
forEach

就算没有获取到元素也返回一个伪数组–对象
其他了解的
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
设置/修改元素内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象.
就是操作对象使用的点语法
为标签设置标签之间的内容
针对于双标签而言
innerText
只关注内容, 不关注标签

innerHTML
可以解析标签

如果要解析标签内容,就使用innerHTML
动态渲染
富文本框
使用: 不明确数据的安全性的情况下, 使用innerText
设置/修改元素属性
设置/修改常用(内置)属性
href、title、src
综合案例
图片更换案例
案例: 随机点名案例-名字渲染到页面已经有的标签里面
设置/修改元素样式属性
style操作css
每一个DOM对象都有一个style属性,style属性的值是一个对象,里面存储了所有行内样式对应的键值对。
如果样式的名字带了-,比如background-color,到了style对象中,变成了驼峰命名法,backgroundColor(因为-在js中-会被解析成减号
style属性只能获取和设置行内样式,在类样式中定义的样式通过style获取不到。
案例: 随机背景案例
操作类名(className)
由于class是关键字, 所以使用className去代替
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
classList
添加:add(class1, class2, …)
删除:remove(class1, class2, …)
切换:toggle(class)
是否包含:contains(class),包含返回true,不包含返回false
对比className和style、classList的区别
修改大量样式的更方便
修改不多样式的时候方便
classList 是追加和删除不影响以前类名

设置/修改表单属性
正常的有属性有取值的 跟其他的标签属性没有任何区别
获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
常见表单属性
value、disabled、checked、selected

全选案例
定时器-间歇函数
间隔一段时间之后重新执行对应的代码
let timerId = setInterval(回调函数, 间隔时间)
清除定时器
clearInterval(timerId)
注意点
定时器也是需要等待, 所以后面的代码先执行
每一次调用定时器,都会产生一个新的定时器

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值