版本二代码和效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dom基本操作</title>
<style>
div { border: 2px blue dashed;margin-top: 10px;padding: 10px;}
.quesition{ color: rgb(6, 87, 60);}
.answer{ color: blueviolet;padding-left: 15px;}
.center_img{ margin: o auto;padding-left: 90px;}
.quesition_Eventener p{margin: 0 auto; border: 1px solid gold;}
</style>
</head>
<body>
<div id="box1">找到我,在控制台打印我,看看我是啥?</div>
<div class="box2">给我加个html属性,然后靠右对齐吧!</div>
<div id="box3">
你今天的心情如何?通过js显示到后面的span里面吧
<span></span>
</div>
<div id="box4">
把我的背景色改成红色,字体颜色改成白色吧!
</div>
<div id="box5">
<button>通过onclick属性给我设置个点击事件吧!</button>
</div>
<div id="box6">
<button>通过addEventListener给我设置个点击事件吧!</button>
</div>
<!-- 所学知识文本--笔记 -->
<div class="center">
<div class="text_1">
<p >
<span class="quesition"> <!-- 问题 -->
addEventListener是JavaScript中的一个方法，用于为指定元素添加事件监听器。它接受三个参数：<br>
</span>
<span class="answer"> <!-- 回答 -->
> 事件类型（event type）：一个字符串，表示要监听的事件类型，如"click"、"mouseover"等。<br>
</span>
<span class="answer"> <!-- 回答 -->
> 事件处理函数（event handler）：一个函数，当指定的事件触发时，该函数将被调用。 <br>
</span>
<span class="answer"> <!-- 回答 -->
> 可选的布尔值参数（useCapture）：一个布尔值，表示事件是否在捕获阶段执行。默认值为false，即在冒泡阶段执行。如果设置为true，则在捕获阶段执行。<br>
</span>
</p>
</div>
<div class="center_img">
<img src="./1.jpg" alt="1" >
<img src="./2.jpg" alt="2" >
<img src="./3.png" alt="3" >
<img src="./4.png" alt="4" >
<img src="./5.png" alt="5" >
<img src="./6.png" alt="6" >
</div>
</div>
<!-- 问题：事件监听器都有什么【都有什么事件监听器】 -->
<div class="quesition_Eventener">
<!-- 这里的p标签们是事件监听器，符合监听的事件类型之后会浏览器会弹出一个警告框，上面写着相应的事件类型 -->
<p onmouseover="handleMouseEvent(event)">将鼠标悬停在我上面。</p>
<p onmouseout="handleMouseEvent(event)">将鼠标移开。</p>
<p onclick="handleMouseEvent(event)">点击我。</p>
<p ondblclick="handleMouseEvent(event)">双击我。</p>
<p oncontextmenu="handleMouseEvent(event)">右键单击我。</p>
<p onmousewheel="handleMouseEvent(event)">滚动鼠标滚轮。</p>
<!--
用户与页面上的不同元素交互时，会弹出一个警告框显示相应的事件类型。【js函数代码】
function handleMouseEvent(event) {
alert("事件类型：" + event.type);
}
注意：这里并不用调用函数，因为已经给p标签设置了监听事件，一旦事件被触发了，就会调用handleMouseEvent函数，并传入event参数
-->
<!--
这里的event是一个事件对象，它包含了与触发该事件相关的信息。
当用户与页面上的某个元素交互时，浏览器会自动创建一个事件对象，并将其传递给相应的事件处理函数。
在这个例子中，handleMouseEvent(event)函数就是用来处理鼠标事件的。
通过传递event参数给这个函数，我们可以获取到关于这个事件的所有详细信息，例如事件类型、目标元素等。
-->
</div>
<script>
// 1.找到我,在控制台打印我,看看我是啥?
// 【通过ID查找对应元素并在控制台输出】
console.log(document.getElementById("box1"));
// 2.给我加个html属性,然后靠右对齐吧!
// ClassName: 通过class属性查找元素,返回的是一个数组,所以要用[0]
document.getElementsByClassName("box2")[0].style.textAlign = "right";
// 3.你今天的心情如何?通过js显示到后面的span里面吧
/*
ById返回的是一个对象
<div id="box3">
你今天的心情如何?通过js显示到后面的span里面吧
<span></span>
</div>
innerHTML和innerText都是JavaScript中用于访问和操作HTML元素中的文本内容的属性。都可以设置或返回元素的内容
两者的主要区别在于，
innerHTML返回或设置元素中的HTML内容，包括HTML标签，
innerText则返回元素中的纯文本值，不包含HTML标签。
innerHTML会解析HTML，因此在使用时需要格外小心，防止注入。
*/
document.getElementById("box3").innerHTML = "我今天心情挺好的丫~~"; // 直接赋值
// document.getElementsByTagName("span")[0].innerText = "我今天心情不好,想吃个饭";
console.log(document.getElementById("box3").innerHTML); // 你今天的心情如何?通过js显示到后面的span里面吧 <span></span>
console.log(document.getElementById("box3").innerText); // 你今天的心情如何?通过js显示到后面的span里面吧
// 4.把我的背景色改成红色,字体颜色改成白色吧!
document.getElementById("box4").style.backgroundColor = "red";
document.getElementById("box4").style.color = "white";
// 5.通过onclick属性给我设置个点击事件吧!
document.getElementById("box5").onclick = function () {
alert("你点击了我");
// 使用window对象实现跳转百度首页
// window.location.href = 'https://';
// 在新标签页打开跳转的网站：语法格式：window.open('网址', '_blank');
window.open('https://', '_blank');
// 使用innerHTML插入图片标签（innerHTML会解析html标签、有sql注入的风险）
// box1.innerHTML = '<img src="./1.jpg" alt="这是个图片">';
}
// 6.通过addEventListener给我设置个点击事件吧!
/*js的addEventListener是什么，接受几个参数，都有什么用？
解答：
addEventListener是JavaScript中的一个方法，用于为指定元素添加事件监听器。它接受三个参数：
1.事件类型（event type）：一个字符串，表示要监听的事件类型，如"click"、"mouseover"等。
2.事件处理函数（event handler）：一个函数，当指定的事件触发时，该函数将被调用。
3.可选的布尔值参数（useCapture）：一个布尔值，表示事件是否在捕获阶段执行。
默认值为false，即在冒泡阶段执行。如果设置为true，则在捕获阶段执行。
*/
// addEventListener两种方法：
// 1.先写一个函数起别名后，在addEventListener里面调用该函数
const f = function () {
alert("哦哈哟学长");
}
document.getElementById("box6").addEventListener("click", f)
// 2. 直接在addEventListener里面写函数
/*
document.getElementById("box6").addEventListener("click", function () {
alert("哦哈哟学长");
})
*/
// 7.给我加个html属性,然后靠右对齐吧!
// document.getElementsByClassName("box2")[0].style.textAlign = "right";
// 8.给我加个html属性,然后靠右对齐吧!
// document.getElementsByTagName("div")[0].style.textAlign = "right";
// 9.给我加个html属性,然后靠右对齐吧!
// document.querySelector("#box2").style.textAlign = "right";
// 这里并不用调用函数，因为已经给p标签设置了监听事件，一旦事件被触发了，就会调用handleMouseEvent函数，并传入event参数
function handleMouseEvent(event) {
alert("事件类型：" + event.type);
}
</script>
</body>
</html>第一题
<div id="box3">
你今天的心情如何?通过js显示到后面的span里面吧
<span></span>
</div>// 3.你今天的心情如何?通过js显示到后面的span里面吧
document.getElementById("box3").innerHTML = "我今天心情挺好的丫~~"; // 直接赋值
// document.getElementsByTagName("span")[0].innerText = "我今天心情不好,想吃个饭";
console.log(document.getElementById("box3").innerHTML); // 你今天的心情如何?通过js显示到后面的span里面吧 <span></span>
console.log(document.getElementById("box3").innerText); // 你今天的心情如何?通过js显示到后面的span里面吧/*
ById返回的是一个对象
<div id="box3">
你今天的心情如何?通过js显示到后面的span里面吧
<span></span>
</div>
innerHTML和innerText都是JavaScript中用于访问和操作HTML元素中的文本内容的属性。都可以设置或返回元素的内容
两者的主要区别在于，
innerHTML返回或设置元素中的HTML内容，包括HTML标签，
innerText则返回元素中的纯文本值，不包含HTML标签。
innerHTML会解析HTML，因此在使用时需要格外小心，防止注入攻击。
*/
第二题
<div id="box4">
把我的背景色改成红色,字体颜色改成白色吧!
</div>// 4.把我的背景色改成红色,字体颜色改成白色吧!
document.getElementById("box4").style.backgroundColor = "red";
document.getElementById("box4").style.color = "white";
第三题
<div id="box5">
<button>通过onclick属性给我设置个点击事件吧!</button>
</div>// 5.通过onclick属性给我设置个点击事件吧!
document.getElementById("box5").onclick = function () {
alert("你点击了我");
// 使用window对象实现跳转百度首页
// window.location.href = 'https://';
// 在新标签页打开跳转的网站：语法格式：window.open('网址', '_blank');
window.open('https://', '_blank');
// 使用innerHTML插入图片标签（innerHTML会解析html标签、有sql注入的风险）
// box1.innerHTML = '<img src="./1.jpg" alt="这是个图片">';
}
第四题
<div id="box6">
<button>通过addEventListener给我设置个点击事件吧!</button>
</div>// 6.通过addEventListener给我设置个点击事件吧!
/*js的addEventListener是什么，接受几个参数，都有什么用？
解答：
addEventListener是JavaScript中的一个方法，用于为指定元素添加事件监听器。它接受三个参数：
1.事件类型（event type）：一个字符串，表示要监听的事件类型，如"click"、"mouseover"等。
2.事件处理函数（event handler）：一个函数，当指定的事件触发时，该函数将被调用。
3.可选的布尔值参数（useCapture）：一个布尔值，表示事件是否在捕获阶段执行。
默认值为false，即在冒泡阶段执行。如果设置为true，则在捕获阶段执行。
*/
// addEventListener两种方法：
// 1.先写一个函数起别名后，在addEventListener里面调用该函数
const f = function () {
alert("哦哈哟学长");
}
document.getElementById("box6").addEventListener("click", f)
// 2. 直接在addEventListener里面写函数
/*
document.getElementById("box6").addEventListener("click", function () {
alert("哦哈哟学长");
})
*/
我的笔记
感悟
addEventListener方法
Event ：事件
Listener：监听
/*
addEventListener是JavaScript中的一个方法，用于为指定元素添加事件监听器。它接受三个参数：
> 事件类型（event type）：一个字符串，表示要监听的事件类型，如"click"、"mouseover"等。
> 事件处理函数（event handler）：一个函数，当指定的事件触发时，该函数将被调用。
> 可选的布尔值参数（useCapture）：一个布尔值，表示事件是否在捕获阶段执行。默认值为false，即在冒泡阶段执行。如果设置为true，则在捕获阶段执行。
*//*
使用addEnevtListener的两种方式：(效果都一样)
1.先写一个函数并起别名后，在addEventListener里面调用该函数
2. 直接在addEventListener里面写函数，并使用
*/
// 第一种:
const f = function () {
alert("哦哈哟学长");
}
document.getElementById("box6").addEventListener("click", f)
// 第二种:
document.getElementById("box6").addEventListener("click", function () {
alert("哦哈哟学长");
})事件监听器都有什么方法
<!-- 问题：事件监听器都有什么【都有什么事件监听器】 -->
<div class="quesition_Eventener">
<!-- 这里的p标签们是事件监听器，符合监听的事件类型之后会浏览器会弹出一个警告框，上面写着相应的事件类型 -->
<p onmouseover="handleMouseEvent(event)">将鼠标悬停在我上面。</p>
<p onmouseout="handleMouseEvent(event)">将鼠标移开。</p>
<p onclick="handleMouseEvent(event)">点击我。</p>
<p ondblclick="handleMouseEvent(event)">双击我。</p>
<p oncontextmenu="handleMouseEvent(event)">右键单击我。</p>
<p onmousewheel="handleMouseEvent(event)">滚动鼠标滚轮。</p>
<!--
用户与页面上的不同元素交互时，会弹出一个警告框显示相应的事件类型。【js函数代码】
function handleMouseEvent(event) {
alert("事件类型：" + event.type);
}
注意：这里并不用调用函数，因为已经给p标签设置了监听事件，一旦事件被触发了，就会调用handleMouseEvent函数，并传入event参数
-->
<!--
这里的event是一个事件对象，它包含了与触发该事件相关的信息。
当用户与页面上的某个元素交互时，浏览器会自动创建一个事件对象，并将其传递给相应的事件处理函数。
在这个例子中，handleMouseEvent(event)函数就是用来处理鼠标事件的。
通过传递event参数给这个函数，我们可以获取到关于这个事件的所有详细信息，例如事件类型、目标元素等。
-->
</div>
SOP
Event ：事件
Listener：监听
Mouse：鼠标
Move：移动
On：在...上
Out：从...中、出、向外、（从..里）出来、在外、离开
Down：向下、下降
Solid：固体、实心的、实线、坚固的
over：结束
enter：进入
图片
