1.❤️❤️前言~🥳🎉🎉🎉
Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。
如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。
当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力，一起进步！
加油，一起CHIN UP！💪💪
🔗个人主页：E绵绵的博客
📚所属专栏：1. JAVA知识点专栏
深入探索JAVA的核心概念与技术细节
2.JAVA题目练习
实战演练，巩固JAVA编程技能
3.c语言知识点专栏
揭示c语言的底层逻辑与高级特性
4.c语言题目练习
挑战自我，提升c语言编程能力
5.Mysql数据库专栏
了解Mysql知识点，提升数据库管理能力
6.html5知识点专栏
学习前端知识，更好的运用它
7. css3知识点专栏
在学习html5的基础上更加熟练运用前端
8.JavaScript专栏
在学习html5和css3的基础上使我们的前端使用更高级
📘 持续更新中，敬请期待❤️❤️
2.Dom简介
DOM（文档对象模型）是一个用于表示和操作 HTML 和 XML 文档的标准接口。它将文档视为一个树形结构，节点表示文档的各个部分，例如元素、属性和文本。
3.获取元素
1. document.getElementById('id')方法获取带有ID的元素对象 (参数必须是字符串)
2.根据标签名获取 ：document.getElementsByTagName()方法返回带有指定标签名对象的集合。
还可以获取某个元素(父元素)内部指定标签的子元素集合，父元素必须是指定的单个元素：element.getElementsByTagName('标签名');
获取的是一个伪数组,可以通过索引访问，但它没有数组的一些方法，例如push、pop、map等。
3.document.getElementsByClassName('类名'); //根据类名获取集合，也就是伪数组
4.document.querySelector('选择器');//获取指定选择器的第一个元素对象 如.box #nav
5.document. querySelectorAll('选择器');//获取的是指定选择器的集合
6.获取特殊元素body，document.body;//获取body元素对象。
7.获取特殊元素html， document.documentElement;//获取html元素对象
4.事件基础
常用的事件:
鼠标事件:
onclick（鼠标点击）
onmouseover(鼠标经过),
onmouseout(鼠标离开),
onfocus(获得鼠标焦点),
onblur(失去鼠标焦点),
onmousemove(鼠标移动触发),
onmouseup(鼠标弹起触发),
onmousedown(鼠标按下触发)
事件的组成：
事件源：事件触发的对象,如 按钮
事件类型：如何触发,什么事件，如 鼠标点击(onclick)
事件处理程序： 通过一个函数赋值的方式完成<button id="btn">唐伯虎点秋香</button><script>//获取事件源var btn=document.getElementById('btn');//绑定事件btn.οnclick=function(){alert('点秋香');//添加事件处理程序}</script>
5.innerText和innerhtml
innerText和innerHTML是用于操作 DOM 元素内容的两个重要属性。元素.innerText 可以直接获取元素中的文本，但不带有任何内部标签。
元素.innerText = 值 设置元素之间的文本，其中文本内不能有标签，因为它不会识别。
元素.innerHTML 获取元素之间HTML代码，包含标签
元素.innerHTML = 值 设置元素之间的HTML代码，可以有标签，它会识别。
一般我们都用innerHTML，官方都推荐。
6.修改元素属性
有如下属性修改图片属性：
1.src(图片的路径)
img.src='...';(img是我们获取的图片对象)
2.title(鼠标放在图片上会显示的信息)
img.title='...';（html中图片的属性在js中都可以被修改）
还可以修改html中表单的属性。
对于html中元素所带的基本属性，我们就如上文一样直接修改就行，而对于css中的样式，我们就要换种方式了。
当使用 JavaScript 的 DOM 操作 修改 元素的css样式时 , 有两种主要的方法 :
行内样式操作 element.style
类名样式操作 element.className
使用 element.style 可以直接在 JavaScript 中 设置元素的 行内样式 ;
行内样式 会直接作用于该元素 , 它权重优先级比css内部样式优先级高 , 可以直接指定样式属性的值 ;
// 获取元素 var element = document.getElementById('myElement');// 设置元素的背景颜色和宽度 element.style.backgroundColor = 'blue'; element.style.width = '200px';
element.className是一个 JavaScript 属性，用于获取或设置 HTML 元素的类名（class）。这是在 DOM 操作中常用的方法之一。
因为可以设置类名，所以我们可以通过修改类名去修改元素属性。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Inline Style Operation Example</title><style>.box {width: 200px;height: 200px;background-color: #f0f0f0;border: 1px solid #ccc;margin: 20px auto;padding: 10px;text-align: center;}.box2 {width: 200px;height: 200px;/* 颜色改变 */background-color: #ffcc00;border-color: #e6b800;/* 字体大小由 默认 变为 24px */font-size: 24px;/* 旋转样式 */transform: rotate(20deg);border: 1px solid #ccc;margin: 20px auto;padding: 10px;text-align: center;}button {display: block;margin: 20px auto;}</style>
</head><body><div id="myBox" class="box">盒子模型元素</div><br><button id="changeButton">修改 style 属性</button><script>// JavaScript 脚本// 获取按钮元素var changeButton = document.getElementById('changeButton');// 添加点击事件监听器changeButton.addEventListener('click', function() {var box = document.getElementById('myBox');// 切换类名以改变样式box.className = "box2";});</script>
</body></html>
![[sa-token]StpUtil.getLoginId](https://img-blog.csdnimg.cn/img_convert/eed265f0c29ea4f67df126b590e833e7.png)
