DOM对象
DOM对象:浏览器根据html标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
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元素属性
-
通过style属性操作css
语法:对象.style.样式属性 = 值;
-
操作类名(className) 操作CSS
-
设置/修改 表单元素 属性
获取:DOM对象.属性名
获取:DOM对象.属性名 = 新值
语法:表单.value = '用户名'
表单.tape = 'password'
表单元素
定时器-间歇函数
目标:能够使用定时器函数重复执行代码
开启定时器:语法:setInterval(函数,间隔时间)
作用:每隔一段时间调用这个函数
间隔时间是毫秒
如:function repeat() {
console.log('前端程序员');
}
//每隔一秒钟调用
setInterval(repeat, 1000);
关闭定时器:语法:let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)