Web前端第三季(JavaScript):十七:第5章:JavaScript DOM文档对象模型:507-常见的DOM事件+508-DOM节点操作

最新推荐文章于 2024-04-29 10:40:41 发布

Smart_zy

最新推荐文章于 2024-04-29 10:40:41 发布

阅读量268

点赞数

分类专栏： JS 文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_40544338/article/details/121423805

版权

JS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一.目的

1.想：学习前端知识

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

5.Web前端第一季(HTML):我自己写的笔记博客

6.Web前端第二季(CSS):我自己写的笔记博客

一.目的

1.想：学习前端知识

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

二.参考

1.我自己代码的GitHub网址

GitHub - xzy506670541/WebTest: SIKI学院的Web前端

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

登录 - SiKi学院 - 生命不息，学习不止！siki老师的Unity3D专业视频学习平台，上千门实时更新课程，供学员在线观看，为国内开发者提供最新、最全、最快的视频学习教程http://www.sikiedu.com/my/course/212

我参考此视频实操

三.注意

操作:1:成功:507-常见的DOM事件

1.运行结果:成功:

其他事件（每个事件对应的事件名，就是把on去掉）
onclick
onload
onunload
onchange (文本输入控件)
onmouseover onmouseout
onmousedown onmouseup

操作:2:成功:508-DOM节点操作

1.运行结果:成功:

DOM节点----------

创建新元素（DOM树中的新节点）
var p = document.createElement("p");
p.innerHTML="xxx";
ele.appendChild(p);//把新创建的节点添加到DOM树中

创建文本节点
var node=document.createTextNode("xxxxx");
ele.appendChild(node);

删除元素（删除节点）
ele.removeChild(node);

添加span标签+
给div添加节点+
新建span节点+
第二种添加文本的方式+
移除标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="my_div">
			<span>第一个span</span>
			<span>第二个span</span>
			<span>第三个span</span>
			<span>第四个span</span>
			<p id="my_p">我是p标签</p>
			<span id="my_span">我是span标签，准备被移除</span>
		</div>

	</body>
</html>

<script type="text/javascript">
	var my_p = document.getElementById("my_p");

	//测试1：添加span标签
	// my_p.innerHTML = "<span>我是第五个span;</span>";

	// 测试2：给div添加节点，会将之前的内容全部覆盖了
	// var my_div = document.getElementById("my_div");
	// my_div.innerHTML="<span>我是第六个span;</span>";

	// 3.测试3：避免测试2的问题，所以新建span节点
	// var my_div = document.getElementById("my_div");
	// var newSpan = document.createElement("span"); //创建<span></span>
	// newSpan.innerText = "我是第七个span;"; //第一种添加文本的方式
	// my_div.appendChild(newSpan);

	// 4.第二种添加文本的方式
	// var textNode = document.createTextNode("我是第八个span;");
	// var newSpan = document.createElement("span"); //创建<span></span>
	// newSpan.appendChild(textNode);
	// my_div.appendChild(newSpan);

	// 5.移除标签
	var my_div = document.getElementById("my_div");
	var my_span = document.getElementById("my_span");
	my_div.removeChild(my_span);
</script>

Smart_zy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端第三季(JavaScript):十七:第5章:JavaScript DOM文档对象模型:507-常见的DOM事件+508-DOM节点操作

一.目的1.想：学习前端知识2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。二.参考1.我自己代码的GitHub网址GitHub - xzy506670541/WebTest: SIKI学院的Web前端2.SIKI学院:我参考此视频实操登录 - SiKi学院 - 生命不息，学习不止！siki老师的Unity3D专业视频学习平台，上千门实时更新课程，供学员在线观看，为国内开发者提供最新、最全、最快的视频学习教程http://www.siki...
复制链接

扫一扫