【JavaScript】JavaScript开篇基础（4）
【JavaScript】JavaScript开篇基础（4）
1.❤️❤️前言~🥳🎉🎉🎉
Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。 当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力，一起进步！ 加油，一起CHIN UP！💪💪
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>腾讯云开发者
