获取DOM节点

0.1 DOM

Document Object Model: 文档对象模型。提供了操作文档流（页面元素）的方法和属性。

操作： 增，删，改，查

0.2 获取DOM节点

# 非常规dom节点
html标签： document.documentElement
body标签： document.body
head标签： document.head

# 常规的dom节点
a. 根据id获取
	document.getElementById('id')
b. 根据标签名获取
	document.getElementsByTagname('标签名')： 返回包含了特定标签的伪数组
c. 根据类名获取
	document.getElementsByClassname('类名')： 返回包含了特定类名的伪数组
d. 根据选择器获取
	1）只获取第一个选择器
    	document.querySelector('选择器')： 选择器可以是类名，id名或者标签
    2）获取所以的选择器的集合
    	document.querySelectorAll('选择器')： 选择器可以是类名，id名或者标签
'注意：什么是伪数组？' 1. 有索引； 2. 有长度，可以遍历； 3. 不可以使用数组的方法

0.3 获取样式

# 获取行内样式： dom.style.样式名

# 获取非行内样式： window.getComputedStyle(dom, [伪元素]).属性名

区别： style是一个可读写的属性， 既可以获取，又可以设置； getComputedStyle只能获取

0.4 操作属性

# 原生属性： dom.属性名 = '值'

# 自定义属性： 临时将数据信息保存到标签上。 
	+ 传统写法： 设置： dom.setAttribute('属性名', '值') | 获取： dom.getAttribute('属性名')
	+ H5写法： 设置：dom.dataset.属性名 = '值' | 获取： dom.dataset.属性名
'注意： H5自定义属性是以data-开头'

0.5 操作类名

# className: 
设置： dom.className = '类名' | 获取： dom.className

# classList: 包含了当前标签上的所有类名的伪数组
	+ 新增： dom.classList,add('类名')
	+ 删除： dom.classList.remove('类名')
	+ 切换： dom.classList.toggle('类名')： 如果没有，就添加，如果有，就删除

0.6 操作内容

# innerHTML: 添加或修改内容： 包含html标签

# innterText | textContent:  添加或修改内容： 纯文本内容

# value: 添加或修改表单元素的内容

1.获取元素的尺寸

# offset系列
 var boxEle = document.querySelector('.box');

// offsetWidth: 内容 + padding + border 只读属性
console.log(boxEle.offsetWidth);
console.log(boxEle.offsetHeight);
# client系列
// clientWidth: 内容 + padding 只读属性
console.log(boxEle.clientWidth);
console.log(boxEle.clientHeight);

// 注意：style只能获取行内样式，但可以设置元素的样式
// console.log(boxEle.style.width);

2.获取可视窗口的尺寸

// BOM方式获取: 推荐(包含了滚动条)
console.log('1111', window.innerWidth);
console.log('11112', window.innerHeight);

// DOM方式获取(不推荐)
// console.log(document.documentElement.offsetWidth); // 683
// console.log(document.documentElement.offsetHeight); // 3016

// DOM方式获取：推荐 clientWidth （不包含滚动条）
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

// IE：兼容写法，现在不需要考虑IE的兼容问题
// console.log(document.body.clientWidth);
// console.log(document.body.clientHeight);

3.获取元素的偏移量

// 结构父级：标签之间的直接嵌套关系

// 定位父级：添加了定位属性的祖先标签

// offsetLeft: 获取当前元素距离有定位的祖先元素（定位父级）左侧的偏移量, 如果没有添加了定位的祖先元素，则以body作为定位父级

var containerEle = document.querySelector('.container')

// 获取定位父级 offsetParent
console.log(containerEle.offsetParent);

var leftVal = containerEle.offsetLeft;
var topVal = containerEle.offsetTop;

// console.log(leftVal, topVal);

// clientLeft: 获取内容和padding距离盒子外侧的偏移量（边框的宽度）
var leftVal1 = containerEle.clientLeft;
var topVal1 = containerEle.clientTop;
console.log(leftVal1, topVal1);

4.flag标杆

'使用场景'： 只要涉及一个元素两种状态的切换的场合，都可以使用标杆

'开关灯案例'：
// 1. 获取元素
var btn = document.querySelector('button');

// 定义标杆: 只要涉及一个元素两种状态的切换，就可以使用标杆
var flag = true
// 2. 绑定点击事件
btn.onclick = function () {
    if (flag) {
        document.body.style.backgroundColor = 'black'
        this.innerText = '开灯'
        flag = false
    } else {
        document.body.style.backgroundColor = 'white'
        this.innerText = '关灯'
        flag = true
    }
}

'获取验证码案例'：
// 注意：当用户在5s内多次点击了按钮后，就会开启多个定时器，这些定时器会同时执行，会造成程序问题
// 解决：用户在5s内点击多次，但只能有一次生效
var btn = document.querySelector('button');

// 标杆
var flag = true
btn.onclick = function () {
    // 如果标杆是false，就不开启定时器
    if (flag == false) return
    flag = false // 标杆设置为false
    var count = 5 // 计数器
    btn.innerHTML = `${count}s后重新获取` // 修改按钮的内容
    var timer = setInterval(function () { // 开启定时器，让倒计时启动
        count-- // 计数器减1
        btn.innerHTML = `${count}s后重新获取`
        // 如果定时器走完了，需要手动清除定时器
        if (count <= 0) {
            clearInterval(timer)
            btn.innerHTML = '点击获取验证码'
            flag = true // 修改flag为true, 倒计时结束后，可以重新点击
        }
    }, 1000)
}