【JavaScript】JavaScript开篇基础（4）
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>