Java程序猿必学第三十三篇——JS(JavaScript)DOM

最新推荐文章于 2024-08-30 10:01:19 发布
最新推荐文章于 2024-08-30 10:01:19 发布
阅读量140 收藏
点赞数
分类专栏： 程序员的“自我修养” 文章标签： 正则表达式 JavaScript DOM操作 事件处理 节点操作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62718093/article/details/121544416
版权 
1.正则表达式
/* 正则表达式： 描述一组特定字符模式规则的对象（java中就是字符串，规则一致）  */
/* 关键要弄清楚规则： */
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/* 定义正则表达式 */
			//var rep = new RegExp("\\w+");
			var rep = /\w+@\w+[.]\w+/;   //\.代表.   [.]代表.
			
			//案例：请校验一个字符串，是否为邮箱字符串？---test方法
			//分析规则：xxx@xxx.xxx
			document.write(rep.test("lhp@163.com")+"<br />");  //true
			
			//案例：请校验手机号
			//分析规则：以1开头，第二位为3或5或8， 11为都是数字
			rep =/^1[358]\d{9}$/;
			document.write(rep.test("13888888778")+"<br />");  //
			
			//案例：请检索下面字符串中的java子串---exec方法
			rep = /java/ig;
			var str="hello java,java是最好的编程语言，我爱Java"; 
			var m;
			while(m=rep.exec(str)){
				document.write(m+"<br />");
			}
			
			//案例：将匹配字符串中的子串，放入数组---match
			var arr = str.match(rep);
			document.write(arr+"<br />");
			
			//案例：正则表达式的替换方法---replace
			//参数1：正则表达式   参数2：替换成的子串
			document.write(str.replace(rep,"JAVA")+"<br />");
			
			
			//案例：将字符串按，或 去拆分，存到数组中
			str="hello world,java best language";
			rep = /[ ,]/;
			document.write(str.split(rep)+"<br />");
		</script>


2. DOM基本操作（重点）
  2.1 获取DOM对象
	DOM: 文档对象模型； html所有标签都属于文档，所有通过文档对象可以拿到所有标签
	应用： 获取元素对象（标签对象）   
			 
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript">
			onload=function(){
				//var obj =  document.getElementById("a");  //1.使用id获取元素
				//2.使用class获取元素 (class获取的是集合)
				//var obj = document.getElementsByClassName("yy")[0]; 
				//3.使用标签获取元素(标签获取的是集合)
				var obj = document.getElementsByTagName("h1")[0];
				alert(obj);
			}
			
			//应用场景：通过获取到元素，我们就可以操作标签内容，属性，样式，事件等

		</script>
	</head>
	<body>
		<h1 id="a" class="yy">标题1</h1>
	</body>


  2.2 修改元素内容
  	<body>
		<h1>标题1</h1>
		
		<script>
			/* 案例：修改h1的内容 */
			var obj = document.getElementsByTagName("h1")[0];
			//alert(obj.innerHTML);  //取值
			//obj.innerHTML = "<a href='#'>修改标题</a>";  //带标签格式的修改内容
			obj.innerText = "<a href='#'>修改文本</a>"; //纯文本格式的修改内容
		</script>
	</body>


  2.3 修改元素属性
	<body>
		<!-- 案例：修改元素的属性 -->
		<img src="../img/b.jpg" id="img" />
		
		<script>
			var obj = document.getElementById("img");
			obj.src = "../img/d.jpg";
			obj.width = 200;
			obj.height = 250;
		</script>
	</body>


   2.4 修改元素样式
	<body>
		<!-- 案例：通过元素修改样式效果 -->
		<h1>标题1</h1>
		
		<script type="text/javascript">
			var obj = document.getElementsByTagName("h1")[0];
			obj.style.color = "red";
		</script>
	</body>


3. 事件（重点）
  3.1 点击事件与this
  	<body>
		<!-- 案例：点击事件触发，然后触发修改内容 -->
		<h1 onclick="myclick()" id="a">标题1</h1>
		
		<!-- this使用：与java类似，代表当前对象，当前标签对象 -->
		<h1 onclick="this.innerHTML='赵本山'" id="a">标题2</h1>
		<!-- this作为参数传递，在实现中则无需document获取对象 -->
		<h1 onclick="myclick2(this)">标题3</h1>
		
		<script>
			function myclick(){
				alert("点击事件");
				var obj = document.getElementById("a");
				obj.innerHTML="刘德华";
			}
			
			function myclick2(o){
				o.innerHTML="刘亦菲";
			}
		</script>
	</body>



  3.2 点击按钮事件
	<body>
		<!-- 案例：点击按钮，修改标题1的内容 -->
		<!-- 扩展了解：通过对象调事件  -->
		<h1 id="h">标题1</h1>
		<input  type="button" value="修改标题" onclick="btn()" />
		
		<input  type="button" value="修改标题2" id="btn" />
		
		<script>
			function btn(){
				var obj = document.getElementById("h");
				obj.innerHTML = "漂亮标题";
			}
			
			var btn = document.getElementById("btn");
			btn.onclick=function(){
				alert("通过元素调事件");
			}
			
		</script>
	</body>


  3.3 获取与失去焦点事件
	<body>
		<input type="text"  value="请输入邮箱地址" 
			onfocus="myfocus(this)" onblur="myblur(this)" />
		<script>
			/*获取与失去焦点
			案例：失去焦点时在文本框显示，'请输入邮箱地址',获取焦点时，清除该内容
			分析： 点击当前控件-当前控件则获取到焦点；点击其他-当前控件失去焦点
			    onfocus:获取焦点事件     onblur：失去焦点事件
			*/
			
			function myfocus(o){
				if(o.value=="请输入邮箱地址"){
					o.value = "";
				}
			}
			
			function myblur(o){
				debugger  //js中的debug调试  需要将控制台打开-f12
				if(o.value==""){  //如果去除左右空格，可以+trim()
					o.value = "请输入邮箱地址";
				}
			}
			
		</script>
	</body>


   3.4 级联列表更改事件
	<body>
		<select onchange="change(this)">
			<option value="hn">湖南</option>
			<option value="hb">湖北</option>
		</select>
		
		
		<select id="city">
			<option>长沙</option>
			<option>郴州</option>
			<option>永州</option>
		</select>
		
		<script>
			/* 案例：有两个级联下拉列表，一个显示省份，一个显示城市；变更省份后，联动变更城市
			 * 分析：onchange事件，获取省份选项内容，根据判断，显示不同的值在城市标签中即可
			 * */
			
			var city = document.getElementById("city");
			function change(province){
				if(province.value=="hn"){ //在js中直接用==判断字符串；在java中使用equals
					//显示湖南城市
					city.innerHTML="<option>长沙</option><option>郴州</option><option>永州</option>"
				}else if(province.value=="hb"){
					city.innerHTML="<option>武汉</option><option>荆州</option>";
				}
			}
			
		</script>
	</body>


   3.5 监听事件（了解）
   	<body>
		<h1>标题1</h1>
		<script type="text/javascript">
			/* 监听事件： addEventListener */
			var obj = document.getElementsByTagName("h1")[0];
			/* 参数1：要监听的事件  参数2：监听后要执行的函数体 */
			obj.addEventListener("click",function(){alert("点击事件")})
			//可以绑定当前标签的多个事件
			//obj.addEventListener("mouseover",function(){alert("鼠标移入")})
			
		    //窗口监听事件，改变窗口大小后的触发
			window.addEventListener("resize",function(){
				obj.innerHTML="刘德华";
			})
	
		</script>
	</body>



   3.6 冒泡与捕获事件（了解）
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 250px;
				height: 200px;
				border: solid 4px red;
			}
		</style>
	</head>
	<body>
		<!-- 冒泡与捕获：
			 有多个触发事件时，冒泡就是从里往外触发（默认）；捕获则是从外往里触发
		-->
		<div id="parent">
			<input type="button" value="冒泡与捕获" id="btn" />
		</div>
		
		<script>
			var div = document.getElementById("parent");
			var btn = document.getElementById("btn");
			
			//参数1：触发事件   参数2：函数体    参数3：true-捕获  false-冒泡
			div.addEventListener("click",myDiv,false);
			
			
			btn.addEventListener("click",myBtn,false);
			
			btn.removeEventListener("click",myBtn,false);  //移除事件
			
			function myDiv(){
				alert("触发外部div");
			}
			
			function myBtn(){
				alert("触发内部按钮");
			}
		</script>
	</body>	


4. 添加删除节点
  4.1 添加段落
  	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script>
			function add(){
				//1.创建一个p标签 <p></p>---document
				var p = document.createElement("p");
				
				//2.创建文本内容      "新段落"
				var textNode = document.createTextNode("新段落");
				//3.将文本内容放到p标签中
				p.appendChild(textNode);
				//4.将完整的p标签;<p>新段落</p>，放入指定位置
				//获取body标签，并在最后添加新创建的子标签
				var body = document.getElementsByTagName("body")[0];
				body.appendChild(p);  //父添加子
			}
		</script>
	</head>
	<body>
		<input type="button" value="添加段落" onclick="add()" />
		<p>原始段落</p>
	</body>


   4.2 删除段落
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- 案例： 点击删除节点，删除‘段落2’ -->
		<input type="button" value="删除节点" onclick="del()" /><br />
		<div id="parent">
			<p>段落1</p>
			<p id='son'>段落2</p>
		</div>
		<script>
			function del(){
				//获取父标签，获取子标签，父删除子
				var parent = document.getElementById("parent");
				var son = document.getElementById("son");
				if(son!=null){
					parent.removeChild(son);
				}
				
			}
		</script>
	</body>


   4.3 删除表格
	<body>
		<!-- 案例： 删除表格记录
			 分析：遵循父删除子原则，通过table删除tr
		-->
		<table border="2" id="tab">
			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>30</td>
				<td><a href="#" onclick="del(this)">删除</a></td>
			</tr>
			<tr>
				<td>李四</td>
				<td>34</td>
				<td><a href="#" onclick="del(this)">删除</a></td>
			</tr>
			<tr>
				<td>王五</td>
				<td>25</td>
				<td><a href="#" onclick="del(this)">删除</a></td>
			</tr>
		</table>
		
		<script type="text/javascript">
			function del(obj){
				var tr = obj.parentElement.parentElement;
				tr.parentElement.removeChild(tr);  //tr获取父标签再删除自己
			}
		</script>
	</body>

键盘敲烂@
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript & DOM（二十三）
ddx199806301760的博客
08-16 372
一. JavaScript基本语法 JavaScript的组成部分： ECMAScript：描述了JS的语法和基本对象 文档对象模型（DOM）：描述与处理网页内容的方法和接口。 浏览器对象模型（BOM）：描述与浏览器进行交互的方法和接口。 JavaScript的日常用途 嵌入动态文本于HTML页面。 对浏览器事件做出响应。 读写HTML元素...
JavaScript的DOM（JS）
SjwFdb_1__1的博客
08-22 370
目录 1.DOM概述 2.获取HTML元素 3.修改HTML 4 修改CSS样式 5.元素操作 6.DOM事件 7.EvenListener监听事件 1.DOM概述 通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对...
2021-11-25 迈向程序猿的第三十六步
qq_48654729的博客
11-25 547
目录 一.正则表达式 二.DOM基本操作 2.1 获取DOM对象 2.2 修改元素内容 2.3 修改元素属性 2.4 修改元素样式 三.事件 3.1 点击事件与this 3.2 点击按钮事件 3.3 获取与失去焦点事件 3.4 级联列表更改事件 3.5 监听事件 3.6 冒泡与捕获事件 四.添加删除节点 4.1 添加段落 4.2 删除段落 4.3 删除表格 一.正则表达式 /* 正则表达式： 描述一组特定字符模式规则的对象（java中就是字符串，规则一致） */ /
JS对ID中包含特殊字符转义处理
qq_20831051的博客
01-07 1192
JS对ID中包含特殊字符转义处理 <div id="a[]">12333333333333566</div> - 方法一： $(document.getElementById('a[]')); - 方法二： $('#a\\[\\]'); - 方法三： $("div[id='a[]']"); 对于不明确id是否包含特殊字符的情况，建议使用方法一 ...
Java处理js输入特殊字符(如“+、@、￥”)
那一刻，那一夜，那一月，那一年，那一世
11-04 2186
Java处理js输入特殊字符(如“+、@、￥”)
c#使用正则表达式获取TR中的多个TD_Java修行第049天---JS中的DOM操作元素,及案例...
weixin_39748445的博客
11-21 189
6 DOM中获取和操作节点对应的属性首先: 无论是获取节点属性,还是操作元素属性,都需要通过先id名称获得指定的对象节点Var 别名 = document.getElementById(“id名”)然后:获取节点属性有两种方法:直接获取: id名.属性名(注意: value属性获得的值是时实时输入记录的值)通过getAttribute(“属性名”)获取操作节点属性也有两种方法:直接操作:...
java中dom_[Java教程]JavaScript中的DOM及相关操作
weixin_29149577的博客
02-20 468
[Java教程]JavaScript中的DOM及相关操作02017-08-12 16:00:06一、什么是DOMJavaScript由ECMAScript、DOM和BOM三部分组成，其中DOM代表描述网页内容的方法和接口，即文档对象模型(Document Object Model)。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM，而树形结构就是我...
javascript逆向 猿人学 js混淆 回溯 逆向学习
03-12
猿人学JS混淆是一种常见的JavaScript混淆技术，通过对代码进行重构、变量名替换、函数调用转换等手段，使得代码难以直观理解，增加了阅读和分析的难度。 在进行JavaScript逆向学习时，首先需要通过反混淆技术将混淆...
Java程序猿技术路线图
08-29
Java 程序猿技术路线图 在技术方面，无论我们怎么学习，总感觉需要提升自己不知道自己处于什么水平了。但是，如果有清晰的指示图供参考还是非常不错的，这样我们清楚的知道我们大概处于那个阶段和水平。 Java ...
java基础篇——java的起源与演变
07-14
Java的体系分为三个主要部分： 1. Java SE（标准版）：这是所有应用平台的基础，主要用于桌面开发和低端商务应用解决方案。 2. Java EE（企业版）：面向企业环境的开发应用环境解决方案，支持分布式计算和企业级服务...
猿人学18题——js加密进阶
08-21
猿人学18题完整版独家代码，绝对不会让你失望
java基础——入门篇
07-14
Java基础入门篇主要涵盖了一系列关于Java编程语言的基础知识，包括JVM（Java虚拟机）、Java开发环境的搭建、Java的历史、特点、程序类型、垃圾收集器、J2SE的下载和安装，以及环境变量的配置和测试。此外，还会介绍...
HTML中自定义属性并通过JS获取属性值
2301_79858914的博客
08-27 388
是的，HTML可以自定义属性。自定义属性的语法是使用data-前缀，后面跟上自定义的属性名。例如：
HTML中渲染空格和换行符样式的实现方式
程序人生
08-27 526
在HTML中，连续的空格和换行符会被合并为一个空格，所以无法直接通过添加换行符来实现缩进效果。如果您希望在HTML中显示缩进的效果，可以使用CSS样式中的。样式会保留文本中的所有空格和换行符，可能会导致额外的空白间距。如果您需要控制缩进的具体样式，可以使用CSS中的。样式，这样文本中的空格和换行符就会得到保留，从而实现了缩进的效果。上述代码中，我们将要显示的文本放置在。
30分钟从零开始入门拿下 HTML
Y_1215的博客
08-27 1173
HTML(HyperTextMarkupLanguage),超⽂本标记语⾔.超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包 含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.标记语⾔:由标签构成的语⾔ HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.类似⻜书⽂档,Word⽂档如果选中⽂本,点击标题1,就会使⽤标题1的样式来显⽰⽂本,上述标题1就是⼀个"标签"我是⼀级标题我是⼆级标题
word文档转html(只支持段落和表格)
最新发布
m0_63159822的博客
08-30 488
/ 这里简单地将单元格中的文本内容添加到HTML中。// 注意：单元格可能包含多个段落，需要遍历它们。// 辅助方法，用于获取段落中的文本内容。
米家商城主题 html 页面源码分享，可用于网页设计作业
m0_61603704的博客
08-28 214
1. 仿照米家商城页面布局所做的页面样式结构。3. 登录页有表单结构，并且有切换的动画效果。4. 包含实时的动态时间，使用 js 实现。5. 页面布局清晰，结构简单，适合初学者。2. 首页放置了可自动切换的轮播图。
html快速入门
m0_52049533的博客
08-22 975
/
[vue] jszip html-docx-js file-saver 图片，纯文本 ，打包压缩，下载跨域问题
qq_14993591的博客
08-27 572
创建文件：支持导出纯文本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值