前端（day04）DOM、BOM、Api和内置对象

关注

翻译最新推荐文章于 2026-03-05 05:10:54 发布 382 阅读 AI 写同款· GEO 优化 ›

配置 Druid 数据源及密码加密-SpringBoot 实战基础在SpringBoot中配置 Druid 数据源及密码加密的方法前文集成 MyBatis Plus，实现了一组增删改查接口。在启动服务时，从控制台中可以看出 Spring Boot 默认使用 Hikari 作为数据库连接池，Hikari性能很优秀。在国内使用较多的连接池还属阿里开源的 Druid，中文发音为德鲁伊。Druid 结合了 C3P0、DBCP 等 DB 池的优点，同时还加入了日志监控，可以很好的监控 DB 池连接和 SQL 的执行情况。... 阅读详情

DOM：

概念：Document Object Model 文档对象模型，作用：操作标记性文档（目前学过的xml，html文档）在这里插入图片描述

Dom分类

核心Dom(ECMA规范的基本语法)

核心Dom的api操作xml,html
xml的Dom

作用：操作xml文档的
html的Dom

作用：操作html文档的
总结：

核心Dom, xml的Dom, html的Dom 大部分api都是通用的

Dom的api

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 密码：<input type="password" name="psw"  /><br/>
		用户名：<input type="text" name="username" id="uname" class="s" /><br/>
		性别：<input type="radio" name="sex" class="s"  value="man"/>男
				<input type="radio" name="sex"  class="s" value="woman"/>女<br/>
				
		<script type="text/javascript">
			var username_tag=document.getElementById("uname");
			document.write(username_tag.name+"<hr/>"); 
			var input_tag=document.getElementsByTagName("input");
			document.write(input_tag.length+"<hr/>");
			var sex_objects=document.getElementsByName("sex");
			document.write(sex_objects);
			var classname=document.getElementsByClassName("s");
			document.write(classname);
		</script>
	</body>
</html>

Dom操作文本

获取文本：innerhtml

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="d1">
			我是小鸟
		</div>
		<script type="text/javascript">
			var div_tag=document.getElementById("d1");
			document.write(div_tag.innerHTML);
			div_tag.innerHTML="我是小老虎"
			document.write(div_tag.innerHTML);
		</script>
	</body>
</html>

事件

事件与事件源的绑定

方式一：直接绑定（直接在标签里面定义事件属性，绑定对应的js代码）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="普通按钮1" onclick="top1()"/>
		
		<script type="text/javascript">
			function top1(){
				console.log("11111");
			}
		</script>
	</body>
</html>

方式二：间接绑定（不在标签里面定义事件属性，在使用时在绑定）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">普通按钮2</button>
		<script type="text/javascript">
			var tags=document.getElementsByTagName("button");
			var singalTag=tags[0];
			singalTag.onclick=function(){
				console.log(2222);
			}
		</script>
	</body>
</html>

常用的事件：

onchange: 在内容改变时，触发该事件，常与select一起使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在下拉选择框里面直接绑定内容切换</title>
	</head>
	<body>
		<select onchange="changeContest()">
			<option value="">plase choose</option>
			<option value="">河南省</option>
			<option value="">河北省</option>
		</select>
		<script type="text/javascript">
			num=0;
			function changeContest(){
				console.log(num);
				num++;
			}
		</script>
	</body>
</html>

onload: 等html网页完全加载完毕后，才执行事件里面的js代码，所以把代码可以放在head里面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function t2(){
				var divTag=document.getElementById("p");
				var div_text=divTag.innerHTML;
				console.log(div_text);
			}
		</script>
	</head>
	<body onload="t2()">
		<div id="p">
			互相进步
		</div>
	</body>
</html>

BOM:

概念：

BOM : browser object module,浏览器对象模型(一系列对象,构成模型),操作浏览器的.

BOM里面包含的五个对象

window：表示窗口对象,同时也是bom的顶层对象(可以通过window对象获取其它四个bom对象)

location：表示地址栏对象,操作地址栏的地址(获取地址栏的地址或者改变地址栏的地址)

history：表示用户访问过的前后的历史记录,操作用户访问过的历史记录

screen：表示网页的屏幕带下,操作网页的大小(分辨率,比如1366*768)

navigator：表示浏览器对象, 获取浏览器的相关参数信息(比如:使用的是那个浏览器,版本号是多少)

在这里插入图片描述

常用API：

window的open（）和close（）

<input type="button" value="开启一个新窗口" onclick="openW();"/>
     <input type="button" value="关闭一个新窗口" onclick="closeW();"/>
    
     <script>
        //1开启一个新窗口
        function openW(){
        	//wid： 表示新的窗口对象
        	window.open("http://www.baidu.com");
        }
        //2.关闭一个新窗口
        function closeW(){
        	//开谁，关闭谁
        	window.close();
        }
    </script>

location使用：location.href

<body>
		    <input type="button" value="获取窗口的地址" onclick="getPath();" />
			<input type="button" value="改变窗口的地址" onclick="changePath();" />
			<script type="text/javascript">
				//1.获取地址
				function getPath(){
					//var loc = window.location;
					//var path = loc.href;
					var path = location.href;
					document.write(path);
				}
				//2.改变地址
				function changePath(){
					//location.href="https://www.baidu.com";
					//location.href="index.html";
					location.href="http://127.0.0.1:8020/javascript_high1/index.html";
				}
				
			</script>
	</body>

练习：省市二级联动：

需求：点击省份数据，显示市区数据

出现错误：option value=""时，应该把value=""去掉

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		省:<select id="p">
			<option>请选择</option>
			<option value="1">山西省</option>
			<option value="2">陕西省</option>
		</select>
		市:<select id="c">
			<option>请选择</option>
		</select>
		<script type="text/javascript">
			document.getElementById("p").onchange=function(){
				var province=this.value;
				var city=document.getElementById("c");
				if(province==1){
					var data="<option>请选择</option>"+
					"<option>太原</option>"+
					"<option>大同</option>";
					city.innerHTML=data;
				}else if(province==2){
					var data="<option>请选择</option>"+
					"<option>西安</option>"+
					"<option>安溪</option>";
					city.innerHTML=data;
				}
			}
		</script>
	</body>
</html>

常见的内置对象

Global全局对象

全局对象：javascript内置的对象（这个对象的名称是Global: 只有名称，没有”真人“）

特点: 调用方法时，全局对象省略不写

常用方法：

eval(): 计算 JavaScript 字符串，并把它作为脚本代码来执行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a="document.write(1111)";
			eval(a);
		</script>
	</body>
</html>

isNaN():检查某个值是否是数字。不是数字返回false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a=10;
			document.write(isNaN(a));
		</script>
	</body>
</html>

parseFloat():解析一个字符串并返回一个浮点数

parseInt():解析一个字符串并返回一个整数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var num="da101";
			document.write(typeof(num));
			document.write(num);
			var num1=parseInt(num);
			document.write(typeof(num1));
			document.write(num1);
		</script>
	</body>
</html>

Math对象

常用方法

floor();"地板方法"向下取整,比如: 5.9–>向下取整 5

ceil();"天花板方法"向上取整,比如:5.01–>向上取整6

round();四舍五入的方法

random();随机数,范围[0,1);包含0,不包含1，可以随机出小数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var n1=Math.random()*6;
			document.write(n1);
		</script>
	</body>
</html>

JSON对象

概念：JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。

特点：1.数据量小 2.比较直观

作用：在浏览器与服务器之间交换数据

对象的定义及遍历：

第一种：单个json对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var user={"id":1,"name":"jack"};
			document.write(user.id+":"+user.name)

		</script>
	</body>
</html>

第二种：json数组对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var user=[{"id":1,"name":"jack"},{"id":2,"name":"rose"},{"id":3,"name":"ship"},]
			for (var i = 0; i < user.length; i++) {
				var p=user[i];
				document.write(p.id+":"+p.name);
			}
		</script>
	</body>
</html>

复杂的json对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var user={"马牛逼":{"age":1,"sex":"nan"}};
			var casUser=user.马牛逼;
			var casUserId=user.马牛逼.age;
			document.write(casUserId);
		</script>
	</body>
</html>

JAVAScript面向对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			class Demo{
				//成员变量
				num=0;
				//构造器
				constructor(num){
					this.num=num;
				}
				//方法
				test(){
					document.write(this.num);
				}
			}
			//创建对象
			var demo=new Demo(1000);
			demo.test();
		</script>
	</body>
</html>