700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > APIS——获取dom对象 操作元素内容和属性 间歇函数

APIS——获取dom对象 操作元素内容和属性 间歇函数

时间:2023-09-05 14:13:22

相关推荐

APIS——获取dom对象 操作元素内容和属性 间歇函数

APIS

变量声明Web API基本认知作用和分类DOMDOM树DOM对象 获取DOM对象根据CSS选择器来获取DOM元素(重点)其它获取DOM元素方法(了解) 操作元素内容操作元素属性操作元素常用属性操作元素样式属性通过style属性操作CSS通过类名操作CSS通过classList操作CSS操作表单元素属性H5自定义属性 定时器-间歇函数

变量声明

var、let、const:

const优先,尽量使用const,原因是:const语义化更好。很多变量声明的时候就知道他不会被更改了。有变量先给const,如果发现他后面是要被更改的,再改成let。

注意:建议数组、对象用const声明!尽管会有对数组、对象进行添加、删除等操作,因为对象是引用类型,里面存储的是地址,只要地址不变就不会变。除非给了一个新数组或对象

Web API基本认知

作用和分类

作用:使用js去操作html和浏览器。

分类:DOM(文档对象模型)、BOM(浏览器对象模型)

DOM

document object model——文档对象模型。操作网页内容。

作用:开发网页内容特效和实现用户交互

DOM树

将html文档以树状结构直观的表现出来

作用:直观体现标签与标签之间的关系。

DOM对象

浏览器根据html标签生成的JS对象。标签在html里叫标签,在JS里叫对象。

核心就是把内容当做对象来处理

最大的对象是document对象。页面中的所有内容都在document里面存着。

获取DOM对象

根据CSS选择器来获取DOM元素(重点)

选择匹配的第一个元素

语法:

const 变量名=document.querySelector('CSS选择器') //返回值:一个html对象

没有匹配到就返回空。

获取一个元素可以直接修改样式

选择匹配的多个元素

const 变量名=document.querySelectorAll('CSS选择器') //返回一个对象集合,以数组形式展示

获取多个得到的是一个伪数组,不能直接修改样式。

伪数组:有长度、有索引号、但是没有pop、push等数组方法

哪怕只有一个元素,querySelectorAl()获取过来的也是一个伪数组,里面只有一个元素而已,也要通过索引来修改元素样式,即p[0].style.color=‘red’

其它获取DOM元素方法(了解)

document.getElementById('nav') //根据id,获取单个document.getElementsByTagName('div') //根据标签名,获取多个,伪数组document.getElementsByClassName('w') //根据类名,获取多个,伪数组

操作元素内容

对象.innerText//获取文字内容对象.innerText='新内容'//修改文字内容

操作元素属性

操作元素常用属性

标签的元素属性,href、title、src等

对象.属性=值

操作元素样式属性

通过style属性操作CSS

当需要修改的样式较少时,可直接用style更改。

对象.style.属性=新值

通过类名操作CSS

当需要修改的样式较多,可以将新样式放到一个类中,通过类名修改样式。

对象.className='类名' //这个类名会覆盖掉原来的类名

通过classList操作CSS

//追加一个类元素.classList.add('类名')//删除一个类元素.classList.remove('类名')//切换类:原来有这个类就删除该类,没有就添加该类元素.classList.toggle('类名')

操作表单元素属性

//修改表单内容表单.value = '用户名'//修改表单属性表单.type = 'password'

表单属性中添加就有效果,移除就没有效果(如复选框一点击就会被勾选),一律使用布尔值来表示,若为true表示添加了该属性,若为false代表移除了该属性,如disabled(button的属性,表示按钮是否被禁用)、checked、selected。

表单.checked = true //复选框被勾选表单.disabled = true //button按钮被禁用

H5自定义属性

在标签上一律以 data- 开头。在DOM对象上一律以dataset对象方式获取。

<body><div data-id="1" data-spm="hello">1</div><script>const one = document.querySelector('div')//dataset是one的所有自定义的属性的集合console.log(one.dataset);//只拿出dataset中的一个属性console.log(one.dataset.id);</script></body>

定时器-间歇函数

每间隔一段时间自动执行一段代码,如倒计时。定时器返回的是一个id数字

setInterval(函数,间隔时间) //间隔时间:单位ms,1s=1000mslet 变量名 = setInterval(函数,间隔时间) //要用let声明,因为开关定时器,会给num重新赋值clearInterval(变量名)//关闭定时器

function fn() {console.log('执行一个');}setInterval(fn, 1000)//写的是函数名,不要加小括号setInterval(`fn()`,1000) //不常用

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。