web APIs /DOM 获取DOM元素和修改属性和回调函数(定时器)

334 阅读2分钟

一.获取DOM对象

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

1.获取一个元素标签

语法:document.querySelector('css选择器')

返回值:匹配的第一个元素,一个HTMLElement对象,如果没有匹配到就返回null

2.获取多个元素

语法:document.querySelectorAll('CSS选择器')

返回值:返回一个伪数组,数值放在伪数组里。

伪数组的特点:有长度和索引号的数组,但是没有pop()和push()的方法.

想要得到里面的每一个对象,只能通过遍历数组

二.设置/修改DOM元素内容

  1. innerText属性:将文本内容添加到标签里面,文本标签不会解析

    写法: div.innerText='修改文本'

  2. .innerHTML属性:将文本内容添加到标签里面,文本标签会被解析

写法:div.innerText='修改文本'

三.设置/修改DOM元素属性

1.修改元素的常用属性

例如: src hred

写法 img.src=' ./images/bo2.jpg '

2.修改元素的样式属性的3种方式:

通过style属性操作css

写法 :div.style.样式属性=属性值

操作类名(className)操作css

写法: div.className='nav'

注意:新类名会覆盖旧类型

3.通过classList操作控制css(目前最常用)

1. 追加一个类名,不会覆盖

元素.classList.add(' 类名 ');

2. 删除一个类

元素.classList.remove('类名')

3. 切换一个类(有这个属性就移除没有就添加)

元素.classList.toggle('类名');

3.设置修改表单的属性

写法 : 表单名.value = '用户名'

写法: 表单名.type = 'password';

注意:表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示true代表添加改属性,false代表移除该属性

比如:disabled(禁用) , checked(多选框) ,selected(打开页面默认选中)

四.定时器-间歇函数(回调函数)

1.开启定时器 setInterval( 函数名 , 1000 )

写法: let 返回值=setInterval(function(){},1000); //1000是毫秒

函数名字不需要加括号,返回的是一个id数字

建议写定时器的时候最后设置一个变量名给他,方便停止定时

2.关闭定时器 clearInterval(变量名)

let 变量名 = setInterval(函数,间隔时间)

clearInterval(变量名)