Web APIs一---DOM

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>