<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="" id="my_a">我的CSDN</a>

		<img src="./img/海绵宝宝-1.jpeg" id="my_img">

		<input type="checkbox" id="my_checkbox" />

		<div id="my_div">
			DOM：文档对象模型（Document Object Model）
		</div>
	</body>
</html>

<script type="text/javascript">
	var my_a = document.getElementById("my_a");
	var my_img = document.getElementById("my_img");
	var my_checkbox = document.getElementById("my_checkbox");
	var my_div = document.getElementById("my_div");

	//1.方法一：通过setAttribute
	// my_a.setAttribute("href","https://blog.csdn.net/qq_40544338");
	// my_img.setAttribute("src","./img/xzy的CSDN主页的二维码.png");
	// my_checkbox.setAttribute("checked","true");

	//2.方法二：通过点找到属性进行修改
	my_a.href="https://blog.csdn.net/qq_40544338";
	my_img.src="./img/xzy的CSDN主页的二维码.png"
	my_checkbox.checked=true;
	my_div.style.fontSize="40px";
	my_div.style.color="chocolate";
</script>

操作:2:成功:506-给元素添加DOM事件的三种方式

1.运行结果:成功:

通过onclick属性添加事件

通过js代码给元素添加事件

①方法一：通过id查找元素，给其添加点击事件

②方法二：函数名方式：通过addEventListener添加事件

匿名函数方式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.通过onclick属性添加事件 -->
		<div id="" onclick="console.log('我被点击了！');">
			DOM事件 div
		</div>

		<div onclick="divClick()">
			DOM事件 div
		</div>

		<span id="my_span">
			DOM事件 span
		</span>

		<p>
			DOM事件 p
		</p>

		<a>
			DOM事件 a
		</a>
	</body>
</html>

<script type="text/javascript">
	function divClick() {
		console.log("div被点击了！");
	}

	//2.通过js代码给元素添加事件
	//①方法一：通过id查找元素，给其添加点击事件
	// var my_span = document.getElementById("my_span");
	// my_span.onclick = function() {
	// 	console.log("通过id查找元素 span 被点击了！");
	// }

	// ②方法二：	
	//函数名方式：通过addEventListener添加事件
	// var my_span = document.getElementById("my_span");
	// my_span.addEventListener("click",spanClick);
	// function spanClick(){
	// 	console.log("函数名方式 span被点击了")
	// }

	//匿名函数方式：
	var my_span = document.getElementById("my_span");
	my_span.addEventListener("click", function() {
		console.log("匿名函数方式:span被点击了！");
	})
</script>

Web前端第三季(JavaScript):十六:第5章:JavaScript DOM文档对象模型:505-修改超链接-图片-复选框和css样式的单独函数+506-给元素添加DOM事件的三种方式

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

二.参考

1.我自己代码的GitHub网址

2.SIKI学院:我参考此视频实操

3.w3school官网:当做字典使用

4.菜鸟教程：当做字典使用

三.注意

操作:1:成功:505-修改超链接-图片-复选框和css样式的单独函数

1.运行结果:成功:

操作:2:成功:506-给元素添加DOM事件的三种方式

1.运行结果:成功:

猜你喜欢