Web APIs第一天

97 阅读2分钟

DOM对象

DOM对象:浏览器根据html标签生成的JS对象

  1. 所有的标签属性都可以在这个对象上面找到
  2. 修改这个对象的属性会自动映射到标签身上

document就是DOM的一个对象

获取DOM对象

querySelector

语法:document.querySelector('css选择器');获取第一个元素

参数:包含一个或者多个有效的CSS选择器 字符串

返回值:CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到,则返回null。

querySelectorAll

语法:document.querySelectorAll('css选择器');获取多个元素

参数:包含一个或多个有效的CSS选择器 字符串 返回值:CSS选择器匹配的NodeList 对象集合

得到的是一个伪数组:有长度有索引号的数组,但是没有 pop() push() 等数组方法

设置/修改DOM元素内容

元素innerText 属性

将文本内容添加/更新到任意标签位置 文本中包含的标签不会被解析

设置/修改DOM元素属性

设置/修改元素常用属性

最常见的属性比如: href、title、src 等

语法:对象.属性 = 值

如:let pic = document/querySelector('img');

pic.src = './images/02.jpg';

pic.title = '这是一个图片';

设置/修改DOM元素属性

  1. 通过style属性操作css

    语法:对象.style.样式属性 = 值;

  2. 操作类名(className) 操作CSS

  3. 设置/修改 表单元素 属性

    获取:DOM对象.属性名

    获取:DOM对象.属性名 = 新值

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

    ​ 表单.tape = 'password'

表单元素

定时器-间歇函数

目标:能够使用定时器函数重复执行代码

开启定时器语法:setInterval(函数,间隔时间)

作用:每隔一段时间调用这个函数

间隔时间是毫秒

如:function repeat() {

​ console.log('前端程序员');

}

//每隔一秒钟调用

setInterval(repeat, 1000);

关闭定时器:语法:let 变量名 = setInterval(函数,间隔时间)

clearInterval(变量名)