DOM
DOM(Document Object Model) 文档对象模型是W3C组织制定并推荐的标准, 这个标准提供了一系列操作HTML的统一API(Application Programming Interface)
核心对象是document
浏览器的工作流程
- 浏览器读取HTML文件
- 在内存中生成DOM树
- 调用API渲染显示
DOM树
DOM树 是将HTML文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面
-
文档: 一个HTML页面就是一个文档，DOM中使用document表示
-
节点: 网页中的所有内容，在DOM树中都是一个节点(标签、属性、文本、注释等)
-
- 元素节点: 网页中的所有内容, 比如
h1,div都是一个元素, 也就是element Node - 文本节点:
<h1>文本</h1>里的文本就是文本节点, 也就是text Node - 属性节点:
<img src="1.jpg"></img>里的属性就是属性节点
- 元素节点: 网页中的所有内容, 比如
获取元素
如果要操作DOM, 首先我们需要知道具体需要操作哪一个元素. 即: 获取元素
目前最常用的API
- getElementById(兼容性好)
- querySelector(H5新增, 功能强大)
- querySelectorAll(H5新增)
document.querySelector('选择器')
// 元素选择器, 如: li
// id选择器, 如: #nav
// class选择器, 如: .box
<div id="time">2024-10-02</div>
<script>var div = document.getElementById('time')console.log(div)console.dir(div)
</script>
<body><div class="box">盒子1</div><div class="box">盒子2</div><div id="nav"><ul><li>首页</li><li>产品</li></ul></div><script>// querySelector 返回指定选择器的第一个元素对象var firstBox = document.querySelector('.box')console.log(firstBox)var nav = document.querySelector('#nav')console.log(nav)var li = document.querySelector('li')console.log(li)// querySelectorAll()返回指定选择器的所有元素对象集合var allBox = document.querySelectorAll('.box')console.log(allBox)var lis = document.querySelectorAll('li')console.log(lis)</script></body>
事件驱动
步骤
- 获取元素
- 注册事件(绑定事件)处理函数
- 触发事件, 执行函数
鼠标事件
| 事件名 | 触发条件 |
|---|---|
| onclick | 鼠标单点 |
| onblur | 失去焦点 |
| onfocus | 获得焦点 |
| onmouseover | 鼠标经过 |
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {position: relative;width: 70px;height: 90px;margin: 100px auto;padding-top: 4px;border: 1px solid #ccc;font-size: 12px;text-align: center;color: #ff5000;}.box img {width: 62px;margin-top: 4px;}.box .close_btn {position: absolute;top: -1px;left: -23px;width: 20px;height: 20px;border: 1px solid #ccc;font-style: normal;color: #ccc;}</style></head><body><div class="box">去领红包<img src="images/tao.png" alt="" /><i class="close_btn">x</i></div><script>// 需求. 仿淘宝的效果. 点击x号, 关闭广告// 一. 获取DOM元素var box = document.querySelector('.box')var btn = document.querySelector('.close_btn')// 二. 绑定事件, 修改属性btn.onclick = function () {// 修改属性box.style.display = 'none'}</script></body>
</html>
键盘事件
| 事件名 | 触发条件 |
|---|---|
| onkeyup | 按键松开时触发 |
| onkeydown | 按键按下时触发 |
| onkeypress | 按键按下时触发, 不能识别ctrl, shift等功能键, 区分大小写 |
事件监听
domObj.addEventListener('click', function() {// 回调函数alert(22);
})
事件对象
domObj比较常用的属性和方法
- e.target: 触发事件的对象
<body><ul><li>1</li><li>2</li><li>3</li></ul><script>var ul = document.querySelector('ul')ul.addEventListener('click', function (e) {// 我们给ul 绑定了事件 那么this 就指向ulconsole.log(this)// 如果是li 触发了事件 会向上冒泡, e.target表示liconsole.log(e.target)})</script>
</body>
<body><script>// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值// 1. keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65// 2. keypress 事件 区分字母大小写 a 97 和 A 得到的是65document.addEventListener('keyup', function(e) {// console.log(e);console.log('up:' + e.keyCode);// 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键if (e.keyCode === 65) {alert('您按下的a键');} else {alert('您没有按下a键')}})document.addEventListener('keypress', function(e) {// console.log(e);console.log('press:' + e.keyCode);})</script>
</body>
- e.preventDafult(): 阻止默认行为
<body><a href="http://www.baidu.com">baidu</a><script>const a = document.querySelector('a')a.addEventListener('click', function (e) {// 阻止默认行为e.preventDefault()})</script>
</body>
- e.stopPropagation(): 阻止冒泡
<body><ul><li>1</li><li>2</li><li>3</li></ul><script>const li = document.querySelector('li')const ul = document.querySelector('ul')li.addEventListener('click', function (e) {e.stopPropagation()console.log('li被点击了')})ul.addEventListener('click', function () {console.log('ul被点击了')})</script>
</body>
示例: 实现一个留言板
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid skyblue;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 300px;margin: 15px 0;padding: 5px;background-color: blueviolet;color: #fff;}</style></head><body><textarea name="" id=""></textarea><button>发布</button><ul></ul><script>// 1. 获取元素var btn = document.querySelector('button')var text = document.querySelector('textarea')var ul = document.querySelector('ul')// 2. 注册事件btn.onclick = function () {if (text.value == '') {alert('您没有输入内容')return false} else {// (1) 创建元素var li = document.createElement('li')// 先有li 才能赋值li.innerHTML = text.value// (2) 添加元素ul.insertBefore(li, ul.children[0])text.value = ''}}</script></body>
</html>
BOM
BOM(Browser Object Model) 浏览器对象模型
它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window,
由于每个浏览器厂商实现方式不同, BOM的表现会略有差异.
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
包括:
- location: URL相关
- navigator: 浏览器相关
- screen: 窗口相关
- history: 浏览历史
定时器
- setTimeout():
当时间到了, 会执行函数. 只执行一次
setTimeout(function() {console.log('1s')
}, 1000)
- setInterval():
每隔一段时间, 执行一次函数. 会执行多次
setInterval(function() {console.log('1s')
}, 1000)
- clearInterval():
停止setInterval设置的定时器
var counter = 3
var id = setInterval(function () {if (counter <= 0) {clearInterval(id)console.log('时间到了')} else {console.log('还剩' + counter + '秒')counter--}
}, 1000)
对比:
<body><button onclick="stop()">停止计时</button><script>// 参数1: 回调函数, 当时间结束时调用的函数// 参数2: 计时时间, 单位是mssetTimeout(() => {console.log('一次性定时器')}, 1000)console.log('先执行')const timeId = setInterval(() => {console.log('周期性定时器, 每隔1s执行一次')}, 1000)function stop() {clearInterval(timeId)}</script>
</body>
示例 - 模拟发送验证码倒计时
<body>手机号码: <input type="text" /> <button>发送</button><script>var btn = document.querySelector('button')var timer = 3btn.addEventListener('click', function (e) {btn.disabled = truevar id = setInterval(function () {if (timer <= 0) {clearInterval(id)btn.innerHTML = '发送'btn.disabled = falsetimer = 3return}btn.innerHTML = timer + '秒后重试'timer--}, 1000)})</script>
</body>
location对象
location对象用于获取设置URL
Schema://host[:port]/path[?query-string]#anchor
-
Schema: 使用的协议类型, 如http/https/ftp等
-
host: 主机域名或IP
-
port: 端口号(可选)
-
path: 路径
-
query-string: 查询参数(可选)
-
#anchor: 锚链接
-
常用属性
| 属性名 | 说明 |
|---|---|
| location.href | 获取或者设置 URL |
| location.pathname | 返回路径部分 |
| location.hash | 返回#后面的锚链接 |
<body><button>登录</button><script>// 1. 获取dom对象const btn = document.querySelector('button')// 2. 监听点击事件btn.addEventListener('click', function () {let count = 3// 启动定时器const id = setInterval(() => {if (count <= 0) {clearInterval(id)console.log('时间到了...')// 跳转window.location.href = './home.html'} else {console.log(`剩余${count}秒`)}count--}, 1000)})</script>
</body>
![[MYSQL] MYSQL 时间与时区](https://blog-static.cnblogs.com/files/johnnyzen/cnblogs-qq-group-qrcode.gif?t=1679679148)
