DOM对象、事件

2022-04-12 162 阅读2分钟

基本认知

DOM (文档对象模型)、BOM（浏览器对象模型）
DOM的作用：操作网页内容，可以开发网页内容特效和实现用户交互。

获取DOM对象

选择匹配的第一个元素：document.querySelector('h3')

返回值：如果没有匹配到，则返回null
选择匹配的多个元素：document.querySelectorAll('li')

返回值：CSS选择器匹配的NodeList 对象集合。

伪数组：只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已。

设置/修改DOM元素内容

document.write() ：只能在body标签写。
对象.innerText ：只能设置文本，不能解析html字符串。
对象.innerHTML ：可以设置文本，也可以解析html字符串。

设置/修改DOM元素属性

常用属性：href、title、src 等。语法（对象.属性 = 值）

<body>
    <img src="" title="">
    <script>
        let pic = document.querySelector('img');
        //操作元素
        pic.src = './images/01.jpg'
        pic.title = '这是一张图片'
    </script>
</body>

样式属性：语法（对象.style.样式属性 = 值）

<body>
    <div>设置样式</div>
    <script>
        let div = document.querySelector('div');
        //设置样式
        div.style.fontSize = '50px';
        div.style.height = '100px';
        div.style.width = '200px';
        div.style.color = 'purple';
        div.style.backgroundColor = 'pink'; 
    </script>
</body>

操作类名className操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

语法：元素.className = 'active'
通过 classList 操作类控制CSS (追加和删除不影响以前类名)

追加一个类：元素.classList.add('类名')

删除一个类：元素.classList.remove('类名')

切换一个类：元素.classList.toggle('类名')

定时器-间歇函数

开启定时器：setInterval(函数，间隔时间)

作用：每隔一段时间调用这个函数，间隔时间单位是毫秒。
关闭定时器：let 变量名 = setInterval(函数，间隔时间)

clearInterval(变量名)

事件

事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮。
语法：元素.addEventListener('事件', 要执行的函数)
事件监听三要素：
- 事件源：那个dom元素被事件触发了，要获取dom元素
- 事件：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等。
- 事件调用的函数：要做什么事。
事件类型

button标签的文本内容需要使用 innerText / innerHtml

textarea的内容设置需要使用value

disabled = true; 设置按钮点击禁用。

disabled = false; 设置按钮点击启用。

环境对象

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。
谁调用， this 就是谁
直接调用函数，其实相当于是 window.函数，所以 this 指代 window

编程思想

排他思想

当前元素为A状态,其他元素为B状态。

使用：
1. 干掉所有人：使用for循环
2. 复活他自己：通过this或者下标找到自己或者对应的元素