Dom操作——操作元素，各种事件

已于 2024-06-13 20:48:47 修改
阅读量627 收藏 28
点赞数 20
分类专栏： java JavaEE 文章标签： javascript 前端 开发语言
于 2024-06-13 20:46:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjp1240201821/article/details/139663786
版权
JavaEE 同时被 2 个专栏收录
65 篇文章 0 订阅
订阅专栏
java
59 篇文章 0 订阅
订阅专栏

Dom操作——操作元素，各种事件

文章目录

一、操作元素

操作内容

1、经验：

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

2、语法：

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

3、案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="fun01()">获取内容 - innerText</button>
		<button onclick="fun02()">设置内容 - innerText</button>
		<br />
		<span>用良心做教育</span>
		<br />
		
		<button onclick="fun03()">获取内容 - innerHTML</button>
		<button onclick="fun04()">设置内容 - innerHTML</button>
		<br />
		<span>用良心做教育</span>
		
		<script type="text/javascript">
			/**
			 * 知识点：操作内容
			 */
			var span01 = document.getElementsByTagName("span")[0];
			var span02 = document.getElementsByTagName("span")[1];
			
			function fun01(){
				console.log(span01.innerText);
			}
			
			function fun02(){
				span01.innerText = "<h1>做真实的自己</h1>";
			}
			
			function fun03(){
				console.log(span02.innerHTML);
			}
			
			function fun04(){
				//把文本当做html标签设置
				span02.innerHTML = "<h1>做真实的自己</h1>";
			}
			
		</script>
	</body>
</html>

4、代码效果：

在这里插入图片描述

操作属性

1、语法：

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

2、代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="fun01()">获取属性</button>
		<button onclick="fun02()">设置属性</button>
		<br />
		<img src="../../img/樱井步.jpg" width="100px" height="100px" />
		<br />
		
		<button onclick="fun03()">获取属性</button>
		<button onclick="fun04()">设置属性</button>
		<br />
		<img src="../../img/樱井步.jpg" width="100px" height="100px" />
		
		<script type="text/javascript">
			/**
			 * 知识点：操作属性
			 */
			
			var img1 = document.getElementsByTagName("img")[0];
			var img2 = document.getElementsByTagName("img")[1];
			
			function fun01(){
				console.log(img1.src);
				console.log(img1.width);
				console.log(img1.height);
			}
			
			function fun02(){
				img1.src = "../../img/波多野结衣.jpg";
				img1.width = "200";
				img1.height = "200";
			}
			
			function fun03(){
				console.log(img2.getAttribute("src"));
				console.log(img2.getAttribute("width"));
				console.log(img2.getAttribute("height"));
			}
			
			function fun04(){
				img2.setAttribute("src","../../img/波多野结衣.jpg");
				img2.setAttribute("width","100%");
				img2.setAttribute("height","100%");
			}
			
		</script>
		
	</body>
</html>

3、代码效果：

在这里插入图片描述

操作样式

1、语法：

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

2、代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="fun01()">获取样式</button>
		<button onclick="fun02()">设置样式</button>
		<br />
		<span>用良心做教育</span>
		
		<script type="text/javascript">
			/**
			 * 知识点：操作样式
			 */
			
			var span = document.getElementsByTagName("span")[0]
			
			function fun01(){
				console.log(span.style.color);
				console.log(span.style.fontSize);
			}
			
			function fun02(){
				span.style.color = "red";
				span.style.fontSize = "50px";
			}
		</script>
		
	</body>
</html>

3、代码效果：

在这里插入图片描述

二、各种事件

对事件做出反应

单击事件

1、效果：点击之后，更改标题内容

注意：this代表当前被点击的对象

2、代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<h1>用良心做教育</h1>
		
		<script type="text/javascript">
			
			var h1 = document.getElementsByTagName("h1")[0];
			
			//绑定单击事件
			h1.onclick = function(){
				this.innerText = "做真实的自己";
			}
		</script>
	</body>
</html>

onload事件

1、概念：onload 一般可以来做一些网页的环境准备工作

2、效果：事件会在页面或图像加载完成后立即发生。

3、代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript">
			
			//页面加载事件：事件会在页面元素和图像加载完成后立即发生
			window.onload = function(){
				var h1 = document.getElementsByTagName("h1")[0];
				h1.onclick = function(){
					this.innerText = "做真实的自己";
				}
			}
			
		</script>
		
	</head>
	<body>
		
		<h1>用良心做教育</h1>		
		
	</body>
</html>

键盘事件

1、监听器：onkeydown、onkeypress、onkeyup

2、代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="text" 
			onkeydown="myDown()"
			onkeypress="myPress()"
			onkeyup="myUp()"
		/>
		
		<script type="text/javascript">
			
			function myDown(){//键盘按下事件
				console.log("down");
			}
			
			function myPress(){//键盘按下事件 - 功能键(上下左右、删除键...)是不会被触发的
				console.log("press");
			}
			function myUp(){//键盘松开事件
				console.log("up");
			}			
		</script>
		
		
		
	</body>
</html>

3、代码效果：按下键盘控制台会有down输出，松下会有up输出

鼠标事件

1、onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触

2、代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<img src="../../img/波多野结衣.jpg" width="100px" height="100px"
			onmousedown="myDown()"
			onmouseup="myUp()"
			onmousemove="myMove()"
			onmouseover="myOver()"
			onmouseout="myOut()"
		/>
		
		<script type="text/javascript">
			
			function myDown(){//鼠标按下事件
				console.log("down");
			}
			
			function myUp(){//鼠标松开事件
				console.log("up");
			}
			
			function myMove(){//鼠标移动事件
				console.log("move");
			}
			
			function myOver(){//鼠标移入事件
				console.log("over");
			}
			
			function myOut(){//鼠标移出事件
				console.log("out");
			}
			
			
		</script>
		
	</body>
</html>

3、代码效果：

在这里插入图片描述

焦点事件

1、监听获取焦点和失去焦点

2、代码案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="text"
			onfocus="myFocus()"
			onblur="myBlur()"	
		/>
		
		<script type="text/javascript">
			
			function myFocus(){//获取焦点事件
				console.log("focus");
			}
			
			function myBlur(){//失去焦点事件
				console.log("blur");
			}
			
			
		</script>
		
	</body>
</html>

3、代码效果：
在这里插入图片描述

风起携月归
关注
专栏目录
DOM | 操作元素
不爱吃菜的菜菜的博客
04-30 659
操作元素 JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性 改变元素内容 element.innerText 从起始位置到终止位置的内容, 但它不识别html 标签， 同时空格和换行也会去掉 // div.innerText = '2022-4-20'; //获取指定时间 div.innerText = getDate...
DOM重点核心总结
qq_46178261的博客
04-02 305
DOM重点核心总结 文档对象模型(DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。 W3C定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口 对于HTML，dom使得html形成一棵dom树，包含文档、元素、节点 ...
DOM元素操作
m0_56232007的博客
06-10 1267
01 什么是DOM？ 1、 DOM：document object model 文档对象模型。 DOM是由节点组成的。 2、节点的类型： 元素节点：HTML标签 文本节点：标签中的文字（包含空格和换行。） 属性节点：标签的属性 3、DOM可以做什么？ （1）可以操作HTML元素（增删改查） 增：添加，在一个DOM节点下添加一个子节点，相当于动态新增了一个HTML标签。 删：删除。将一个节点从HTML中删除，相当于删除了该节点的所有内容以及它包含的子节点。 改：改变。改变DOM节点中的内容，包含HTML
DOM常用操作
weixin_30793643的博客
08-27 157
　　文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改、查找等功能。 一、DOM树 DOM树有两种，分别为节点树和元素树。 节点树：把文档中所有的内容都看成树上的节点； 元素树：仅把文档中的所有标签看成树上的节点。 二、DOM...
JavaScript——DOM操作——Window.document对象详解
11-28
JavaScript DOM操作是Web开发中不可或缺的一部分，主要用于动态更新网页内容和与用户交互。Window.document对象是JavaScript访问HTML文档的主要接口，提供了丰富的API用于查找、修改和操作页面元素。 一、找到元素...
DOM复习——事件基础与操作元素
XIao___FAN的博客
03-02 585
前言 继上一个笔记复习完通过js获取元素的方法后，我们一起来继续来学习有关事件基础和操作元素的知识。 事件概述：JavaScript是我们有能力创建动态页面，而事件则是可以被JavaScript侦测到的行为。 触发——响应机制 操作元素：JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容属性等。 2.事件基础 2.1事件三要素 事件源 事件类型 事件处理程序 以下来分别说明： 事件源 事件被触发的对象 谁 事件类型 如何触发 什么事件 事
jacascript DOM节点——元素节点、属性节点、文本节点
08-30
在实际开发中，DOM节点的操作非常常见，如动态添加、删除或修改元素和属性，或者通过遍历DOM树来查找特定的节点。理解元素节点、属性节点和文本节点的概念及其操作方法是JavaScript Web开发的基础。熟练掌握这些知识...
1.dom元素——dom元素获取
ling_xy的博客
12-02 7642
什么是dom？ dom，即document object model(文本对象模型)。整个页面元素统称dom。 本质上是一种接口（API)，是专门操作网页内容的API标准 dom树 dom操作： 1.dom元素获取 2.dom元素属性操作（常规属性操作） 3.dom元素节点操作（子父节点之类的） 4.dom元素的事件（行为） 5.dom元素的方法操作 前提：要注意获取的元素是否已经初始化（需要考虑获取的元素存在还是不存在），根据页面的加载顺序来考虑 js里面如何获取dom元素 js里面dom..
Educoder JavaScript：HTML DOM——文档元素的操作
Junds0的博客
06-01 2982
第1关：通过id获取文档元素 获取本文档中id为a1的文档元素，要求用id获取文档元素；将获取的元素赋值给变量myElement <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>get element by id</title> </head> <body> <a id="a1" src="h
DOM操作元素
qq_60587956的博客
03-06 380
1.操作元素 JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性 改变元素内容 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉 element.innerText 起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行 element.innerHTML <body> <div></div> <
dom元素的操作
WeiflR10的博客
02-20 750
一、dom元素的操作 1.dom元素的获取 2.动态创建dom元素 3.动态设置元素的属性 ①给元素对象设置元素的自定义属性(对象.setAttribute("自定义属性","自定义属性的值")) ②自定义属性的获取(对象.getAttribute("自定义属性")) ③内置属性的操作 注：js如何获取其他样式 ④操作属性 3.dom元素的追加 docume...
DOM操作方法大全
liuhua_2323的博客
02-24 1548
1.nodeType: 以数字值返回指定节点的节点类型 元素节点：1 属性节点：2 文本节点：3 2.attributes:返回当前元素属性列表集合 通过name取当前属性 通过value取当前属性的属性值 3.childNodes:返回子节点列表集合 只包含一级子节点，不包含孙子级及以下；标准下，包含元素节点和文本节点,也会包含非法嵌套的子节点，如下面的p；非标准下，只包含元素...
DOM元素的操作
木易一
02-11 369
dom元素的操作有动态创建dom元素，子父元素操作， dom元素追加，属性设置等等.... 一、dom元素的获取 前面详细的总结了dom元素的获取方式，这里复习总结一下下... document.getElementsByClassName("")      //获取到的是集合 使用规则是 数组方式     document.getElementsByName("")           ...
操作DOM元素
weixin_48912846的博客
03-15 73
操作DOM的样式，有三种方式： 1.通过style属性直接设置 2.通过className属性设置类选择器 3.也可以通过classList属性设置添加多个类选择器 <div id="box"></div> //第一种 <style> </style> //第二种 box.classList box.style.width = "200px" box.style.height = "200px" box.style.border = "2px solid
DOM中元素操作
涔曦的博客
09-27 451
知识大纲： DOM是什么？ 节点类型； 获取元素； 创建元素； 插入元素； 删除元素； 复制元素； 替换元素； DOM是什么？ DOM对象 DOM(Document Object Model)全称“文档对象模型”，是W3C定义的一个标准。 DOM操作，可以简单理解成“元素操作”。 DOM结构 DOM采用“树形结构”，用“树节点”的形式来表示页面中的每个元素。例如： &...
JavaScript操作Dom元素
XXuan_的博客
02-04 237
Dom树是网页中的文档元素 我们可以操作Dom树来动态的改变网页的Html结构 我们要想操作Dom元素 首先得要获取到这个元素的指针 我们一般使用JQuery的选择器去绑定一个Dom对象 var a1 = $('# id名') //id选择器 var a2 = $('. 类名') //类选择器 获得这个Dom对象的引用后 我们就可以对网页元素进行操作了 a1.innerText = '11...
jQuery操作DOM元素
还没想好
05-08 937
1.attr() 控制元素属性 2. html(),text()控制元素内容，其中text()只是文本内容 3. addClass(),css()操作元素的样式 4.使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能 5.append()追加内容 6.appendTo()反追加 7.before（），after（）元素前
jQuery事件操作详解：DOM加载与事件处理
本文将深入讲解jQuery中的事件操作，包括DOM加载事件和各种事件处理方法。 一、DOM加载事件 在传统的JavaScript中，我们通常使用`window.onload`来确保所有内容（包括图片、脚本等）加载完成后执行某些代码。然而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值