1.DOM基本认知
DOM（Document Object Model）文档对象模型 是用来呈现以及与任意 HTML 或 XML文档交互的API
白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
DOM作用 : 实现网页特效 ,实现用户交互
2.DOM对象
浏览器根据html标签生成的 JS对象
DOM的核心思想:把网页内容当做对象来处理
3.querySelector('')和querySelectorAll('')
querySelector('')返回匹配的第一个元素, 如果没有匹配到，则返回null
querySelectorAll('')返回一个伪数组,哪怕只有一个元素,返回的也是一个伪数组,里面只有一个元素而已
参数必须是字符串，也就是必须加引号
4.其他获取DOM元素方法(了解)
通过id名来获取
document.getElementById('')
通过类名来获取
document.getElementsByClassName('')
通过标签名来获取
document.getElementsByTagName('')
5.innerText和innerHTML
这是两个属性,通过赋值的方式修改或添加属性值
innerText不能解析标签,innerHTML能够解析标签
6.设置/修改元素常用属性(href、title、src 等)
<script>
// 语法：对象.属性 = 值
<img src="./images/1.jpg" width="500px" alt="" />;
let imgObj = document.querySelector('img');
imgObj.src = './images/2.jpg';
imgObj['src'] = './images/4.jpg';
imgObj.title = '寂寞的天';
</script>
7.className属性
这是一个属性,通过给className赋值方式控制样式,属性值为某一个类名,类名前面不需要加点
className有 覆盖 问题
let divObj = document.querySelector('div');
divObj.className = 'active';
8.classList
这是个语法,通过 classList操作类名控制样式
classList 追加和删除不影响以前类名,即没有覆盖效果
classList.add() 添加类名
classList.remove() 移除类名
classList.toggle()切换,有这个类名就是删除,没有就是添加
let divObj = document.querySelector('div');
console.log(divObj['classList']);
divObj.classList.add('five', 'six');
divObj.classList.remove('five','six');
divObj.classList.toggle('four');
说明:add跟remove可以添加或移除多个,toggle只能切换一个
9.通过style控制样式属性
本质上是设置行内样式
如果属性有-连接符，需要转换为 驼峰命名法
// 语法：对象.style.样式属性名 = 值
let divObj = document.querySelector('div');
divObj.style.width = '200px';
divObj.style.backgroundColor = 'lime';
10.表单的属性设置
有属性值的属性通过赋值修改
value、type等
let inpObj1 = document.querySelector('.inp1');
inpObj1.value = '寂寞的天';
inpObj1.type = 'password';
没有属性值的属性通过布尔值修改
disabled、checked、selected等
当设置的值不是布尔类型的时候,底层进行隐式转换为布尔类型
'false' 'true'等字符串转为true
inpObj1.disabled = true;
11.定时器函数
作用: 每隔一段时间，就会来调用函数
开启定时器:
语法:setInterval(函数, 间隔时间)
间隔时间单位是毫秒
返回该定时器id
function fn() {
console.log('fn 函数执行啦！');
}
let timerId = setInterval(fn, 1000);//每间隔一秒,就调用fn函数
关闭定时器:
语法：clearInterval(定时器id)
clearInterval(timeerId)
回调函数中的代码最后执行
如下方代码,运行到setInterval时,直接跳到console.log(1)并向下解析直到</script>标签结束,再返回到回调函数中执行回调函数中的代码,因此,此处if判断语句不能放在回调函数外
<script>
// 用户注册倒计时
// 按钮6秒之后才可以使用
let btn = document.querySelector('button');
btn.disabled = true;
let count = 6;
let timerId = setInterval(function () {
count--
btn.innerHTML = `我已经阅读用户协议(${count})`;
if (count === 0) {
clearInterval(timerId);
btn.innerHTML = '我已经同意该协议了';
btn.disabled = false;
}
}, 1000);
console.log(1);
console.log(1);
console.log(1);
</script>
