JS--------DOM
一、DOM改变网页的内容、结构、样式
二、文档：一个页面就是一个文档，DOM中用document表示；
元素：页面中所有标签都是元素，DOM中用element表示；
节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node;
DOM把以上内容都看作对象；
三、获取元素
1：如何获取页面元素
{
《1》根据ID获取；getElementByID（‘’） document.getElementByID('');
《2》根据标签名获取：document.getElementByTagName('标签名、元素名');
《3》通过HTML5新增的方法获取：{
document.getElementByClassName('类名')；
document.querySelector('选择器')：得到第一个元素对象
例如：
<html>
<head>
<title>Title</title>
<script>
var q=document.querySelector('#a');
var w=document.querySelector('.b');
var e=document.querySelector('li');
</script>
</head>
<body>
<div id="a"></div>
<div class="b"></div>
<li></li>
</body>
</html>
document.querySelectorAll('选择器');
}
《4》获取特殊元素：（body、html）
获取body：document.body
获取html：document.getElement
}
四：事件基础
只有用如上方法获取了元素，才能对元素进行一些操作
步骤：
《1》获取事件源（获取元素）
《2》事件类型（如何触发什么事件 例如;鼠标点击）
《3》事件处理程序，通过一个函数赋值的方式完成；
例如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html><head> <title>Title</title> <script> var q=document.querySelector('#a'); q.onclick=function () { alert('棒棒哒'); } </script></head><body><div id="a"></div></body></html> |
五、常见的鼠标事件
onclick----------------------鼠标点击触发
onmouseover-------------------鼠标经过触发
onmouseout-----------------------鼠标离开触发
onfocus-----------------------------获得鼠标焦点触发
onblur-----------------------------失去鼠标焦点触发
onmousemove------------------鼠标移动触发
onmouseup----------------------鼠标弹起触发
onmousedown-------------------鼠标按下触发
六、操作元素
1、改变元素内容
方法一：element.innerText
当点击按钮时，div中的内容会改变
1：获取元素{
btn
div
}
2:注事件：
btn.onclick=function(){
div.innerText="2019-09-09"：
}
获取当前时间
1 2 3 4 5 6 | var date=new Data(); var year=date.getFullYear(); var month=date.getMonth(); var dates=date.getDate(); var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'] var day=date.getDay(); |
把如上内容放到一个函数中，调用函数
改变谁的内容谁=修改的内容
方法二：innerHTML（使用较多）
二者区别 innerText不识别HTML标签
七、操作元素
《一》样式属性操作
可以通过js来修改元素的大小、颜色、位置等样式
1：修改元素样式有两种方式
{
element.style (元素.style)：行内样式操作
元素.className：类名样式操作
className会覆盖原来的类
}
2：既保留原来的类，又有新的类
.className='原类名 空格 新类名'
八、排他思想
排他思想：如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1：所有元素全部清除样式；
2：给当前元素设置样式；
3：注意顺序不能颠倒；
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现