JavaScript--（BOM DOM （事件））

最新推荐文章于 2024-10-02 21:42:33 发布

原创最新推荐文章于 2024-10-02 21:42:33 发布 · 196 阅读

1 ·

CC 4.0 BY-SA版权

本文深入探讨JavaScript中的BOM（浏览器对象模型）和DOM（文档对象模型），包括BOM的特点、组成、定时器方法以及窗口操作；DOM的概念、结构，特别是Document对象的使用，并通过实例讲解了事件处理和表单验证的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BOM：Browser Object Model 浏览器对象模型

概念

* 将浏览器的各个组成部分封装为对象

特点：

* BOM对象不能自己创建，当文档加载进内存，浏览器自动创建。

组成

* Window(*****)：窗口对象
* Location(**)：地址栏对象
* History(*)：历史记录(当前窗口)对象
* Navigator ：浏览器对象   
* Screen：显示器屏幕        	
  availHeight	获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。 	
  availWidth	获取系统屏幕的工作区域宽度，排除 Windows 任务栏。 	
  height		获取屏幕的垂直分辨率。 
  width		获取屏幕的水平分辨率。 

* Window：窗口对象
* 使用方式： 
  window.方法名();    window 可以省略
  方法名;

方法

* 与弹出有关的方法
  alert() 显示带有一段消息和一个确认按钮的警告框。
  例子：window.alert("我是警告弹框"); 

  (**)confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 

  例子：var flag=window.confirm("你确定吗？");

  prompt() 显示可提示用户输入的对话框。 
		
  例子：var  text=window.prompt("请输入地址"，"");//参数2：默认文字

与定时器有关的方法

* (**)setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式 循环执行

* clearInterval() 取消由 setInterval() 设置的 timeout。  
		
* (**)setTimeout() 在指定的毫秒数后调用函数或计算表达式。 只执行一次
				参数：
				参数1：字符串(js语句)或者 函数对象
				参数2：毫秒值。

* clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

					例子：
					设置定时器 3秒后要执行的函数
					 var id=window.setTimeout("window.close()",3000);
					var id1=window.setTimeout("shut()",3000);
					var id2=window.setTimeout(shut，3000);
					
					funtion shut(){
						window.close();
					}
					取消定时器 通过定时器的id 来取消
					window.clearTimeout(id);
					window.clearTimeout(id2);

与打开关闭有关的方法：

* open():打开新窗口
		* 参数：打开目标的URL
		* 返回值：返回新打开窗口的window引用
		例子：var newWindwo=window.open("http://www.baidu.com");
			 newWindwo.close();
				
* close():关闭窗口
		* 谁调用我 ， 我关谁
		例子：window.close();
* 属性：
  获取其他对象的属性：
			* history ：对 History 对象的只读引用
			* location ：用于窗口或框架的 Location 对象 
			* Navigator 对 Navigator 对象的只读引用
			* Screen 对 Screen 对象的只读引用
			* document：对 Document 对象的只读引用

Document Object Model 文档对象模型

概念：将标记语言文档的各个组成部分封装为对象

组成：

* Document：文档对象
* Element:元素对象
* Attribute：属性对象
* Text：文本对象
* Comment：注释对象
* Node：节点对象

Document：文档对象

* 获取：window.document

 document 中 body属性 可以获取body标签对象
 document.body.bgColor = "red";
 
* title 属性获取文档标题
  var bt = document.title;
  
* 获取文档最后一次修改时间
var rq=document.lastModified;

* URL 属性 获取地址栏中的地址

* 方法：
    - 获取Element对象
    - getElementById():通过id属性值获取唯一的元素
    - getElementsByTagName():通过标签名称获取元素对象数组
    - getElementsByName():通过name属性值获取元素对象数组
    - getElementsByClassName():通过class属性值获取元素对象数组
    
    - 创建其他对象
    - createElement:创建元素对象
    - createAttribute：创建属性对象
    - createComment：创建注释对象
    - createTextNode：创建文本对象
    
* 给属性对象设置值
    font1.setAttribute('color','yellow');
    例子：	
    var div4 = window.document.createElement("div");
    var text1 = window.document.createTextNode("我是第四个div");
    var v = div4.appendChild(text1);
    document.getElementsByTagName("body")[0].appendChild(div4);

- Element:元素对象

- innerHTML属性：获取或设置元素的子内容
  *innerTEXT属性:获取标签之间的文本内容

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			<input type="text" id="div1" value="zhangsan" name="username" />
			<input type="submit" value=""/>
			<select name="xueli">
				<option value="xiao">小学/option>
				<option value="zhong">中学</option>
				<option value="da">大学</option>
			</select>
			<input type="radio" value="1" name="sex" class="mydiv"/>男
			<input type="radio" value="0" name="sex" class="mydiv"/>女
		</form>
	</body>
	<script type="text/javascript">
		//返回的是数组
		//针对表单标签,可以通过表单标签的name值来获取多个标签对象,返回的是数组
		var arr=document.getElementsByName("username");
		arr[0].style.color="red";
		var arr2=document.getElementsByName("xueli");
		for(var i=0;i<arr2.length;i++){
			alert(arr2[i]);
		}
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
	</head>
	<body>
		<div id="div1">
			啊手动阀
		</div>
	</body>
	
	<script type="text/javascript">
		//通过id获取标签对象
		var doc=window.document; //获取整个HTML文档对象
		var myDIV=doc.getElementById("div1");
		//alert(myDIV);
		//标签对象中的属性  innerText 可以设置或者获取标签之间的文本
		myDIV.innerText+="abc"; //+= 追加
		alert(text);
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="div1">
			<span>11111111111111111111111111</span>
		</div>
	</body>
	<script type="text/javascript">
		/*innerHTML 获取标签之间的HTML内容  */
		var text = document.getElementById("div1").innerHTML;
		alert(text);
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="" class="mydiv">
			11111111111111111
		<div id="" class="mydiv">
			22222222222222222
		</div>
		<div id="" class="mydiv">
			333333333333333333333
		</div>
		<div id="" class="mydiv">
			444444444444444444444444
		</div>
		<div id="" class="mydiv">
			55555555555555555555555
		</div>
		<div id="" class="mydiv">
			666666666666666666666666666666
		</div>
		<h1 class="mydiv">
			7777777777777777777777
		</h1>
		<script type="text/javascript">
			//通过class属性值,获取多个标签对象
			var arr=document.getElementsByClassName("mydiv");
			for(var i=0;i<arr.length;i++){
				if(i%2==0){
					arr[i].style.color="red";
				}else{
					arr[i].style.color="blue";
				}
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div1">
			
		</div>
	</body>
	<script type="text/javascript">
		var bd=document.body;
		//如果标签本身有一些自带的属性,你可以通过自带属性名设置
		/* bd.bgColor="red";
		bd.background="img/17.jpg"; */
		
		//给标签对象设置css属性
		//标签对象.style.css属性名="值"
		//bd.style.background="red";
		//如果说你用JS代码来给标签对象设置CSS属性,如果css属性名称带有 - 横杠 那么你将横杠去掉 横杠后第一个字母变大写
		bd.style.backgroundColor="red";
		bd.style.backgroundImage="url(img/17.jpg)";
		var mydiv=document.getElementById("div1");
		/* mydiv.style.width="100px";
		mydiv.style.height="200px"	
	    mydiv.style.background="red";
		mydiv.style.border="1px black solid"; */
		//设置css属性的方式2
		 mydiv.style.cssText="width: 100px;height: 100px;background: red;border: 1px black solid;"
	
	</script>
</html>

事件

概念：

* 事件：一件事
* 事件源：事件发生的组件。
* 监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法
* 注册监听：将监听器绑定到事件源上，监听事件的发生

* js中注册监听的方式：

  1. 在定义标签时，添加 事件名称属性 属性值是js代码
     js代码会被自动封装到一个function函数的方法体中
     例子：<div id="div_id" onclick="fun();">hehe</div>
  2. 通过js获取元素对象，再添加事件。

  例子：
  1.获取元素对象
  var input = document.getElementById("username");
  2.注册监听
  input.onclick = function(){
  	//alert("hehe");
  }

* js中事件的种类：

  - 焦点事件：
    - onfocus 元素获得焦点。 
    - onblur  元素失去焦点
  - 点击事件：
    - onclick 当用户点击某个对象时调用的事件句柄。 
    - ondblclick 当用户双击某个对象时调用的事件句柄。 
  - 键盘事件：
    - onkeydown 某个键盘按键被按下。
    - onkeyup 某个键盘按键被松开。 
    - onkeypress 某个键盘按键被按下并松开。 
  - 鼠标事件：
    - onmousedown 鼠标按钮被按下。 
    - onmouseup 鼠标按键被松开。 
    - onmouseover 鼠标移到某元素之上。 
    - onmouseout 鼠标从某元素移开。 
    - onmousemove 鼠标被移动。 
  - 表单事件：
    - onsubmit 确认按钮被点击。 
    - onreset 重置按钮被点击。 
  - 加载与卸载事件
    - onload 一张页面或一幅图像完成加载。 
    - onunload 用户退出页面。 其他浏览器不支持 IE支持
  - 其他事件：
    针对表单
    - onchange 域的内容被改变。 比如下拉框
    - onselect 文本被选中。

例子：

	<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<button type="button" id="btn1">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	
	</body>
	<script type="text/javascript">
		/* 事件：一件事情
		   事件源：组件 标签
		   事件处理：处理函数
		   绑定事件：如何让这个标签具有这个事件
		   事件类型：单击，双击，
		 */
		//绑定事件的方式1:将事件写到标签内部
		function show(){
			alert(this);
			 alert("谈了");
		}
		
		//show();
		
		//alert(this);
		
		
		//方式2:使用代码来绑定
		 // document.getElementById("btn1").onclick=function(){
			//  alert("谈了");
		 // }
		
		
		
		var bts=document.getElementsByTagName("button");
		for(var i=0;i<bts.length;i++){
			bts[i].ondblclick=function(){
				//alert("谈谈");
				//this 当前的元素
				//alert(this);
				this.style.background="red";
			}
		}
		
		
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<button type="button" id="btn1">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	<button type="button">一个按钮</button>
	
	</body>
	<script type="text/javascript">
		/* 事件：一件事情
		   事件源：组件 标签
		   事件处理：处理函数
		   绑定事件：如何让这个标签具有这个事件
		   事件类型：单击，双击，
		 */
		//绑定事件的方式1:将事件写到标签内部
		function show(){
			alert(this);
			 alert("谈了");
		}
		
		//show();
		
		//alert(this);
		
		
		//方式2:使用代码来绑定
		 // document.getElementById("btn1").onclick=function(){
			//  alert("谈了");
		 // }
		
		
		
		var bts=document.getElementsByTagName("button");
		for(var i=0;i<bts.length;i++){
			bts[i].ondblclick=function(){
				//alert("谈谈");
				//this 当前的元素
				//alert(this);
				this.style.background="red";
			}
		}
		
		
	</script>
</html>

表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--onsubmit 可以监听表单提交的动作
		  
		  return true 表单会提交
		  
		  return false 表单不会提交
		  -->
		<form action="#" method="get" onsubmit="return checkForm()">
			用户名：<input type="text" id="uname" value="" name="username" placeholder="请输入用户名6-16字母" onblur="checkUsername()"/>
			<span id="uid">
				
			</span>
			
			<br>
			
		     密码：<input type="password" id="pwd" value="" name="password" placeholder="请输入用户名6-16数字" onblur="checkPassword()"/>
			 <span id="pid">
			 	
			 </span>
			 <button onmousedown="showPwd()" onmouseup="hiddenPwd()">显示密码</button>
			 <br>
			确认密码：<input type="password" id="epwd" value="" name="repassword" placeholder="请输入用户名6-16数字" onblur="enterPassword()"/>
			<span id="ppid">
				
			</span>
			
			<br>
			
			<input type="submit" value="注册"/>
		</form>
	</body>
	<script type="text/javascript">
		function checkForm(){
			
			//校验每个表单项是否否和规则
			var v1=checkUsername();
			var v2=checkPassword();
			var v3=enterPassword();
			
			
			return v1&&v2&&v3;
		}
		
		function checkUsername(){
			//var username=obj.value;
			var username=document.getElementById("uname").value;
			//定义正则
			var regx=/^[a-z]{6,16}$/i;
			var flag=regx.test(username);
			if(flag){
				//提示
				document.getElementById("uid").innerHTML="<font color='green'>√用户名规则正确</font>"
			}else{
				//提示
				document.getElementById("uid").innerHTML="<font color='red'>❌用户名规则错误</font>"
			}
			
			return flag;
		}
		
		function checkPassword(){
			//var password=obj.value;
			var password=document.getElementById("pwd").value;
			var regx=/^[0-9]{6,16}$/;
			var flag=regx.test(password);
			if(flag){
				//提示
				document.getElementById("pid").innerHTML="<font color='green'>√密码规则正确</font>"
			}else{
				//提示
				document.getElementById("pid").innerHTML="<font color='red'>❌密码规则错误</font>"
			}
			return flag;
			
		}
		
		function enterPassword(){
			//var pwd=obj.value;
			var pwd=document.getElementById("epwd").value;
			var pwd1=document.getElementById("pwd").value;
			var sp=document.getElementById("ppid");
			if(pwd===pwd1){
				sp.innerHTML="<font color='green'>√两次密码一致</font>"
			}else{
				
				sp.innerHTML="<font color='red'>×两次密码不一致</font>"
			}
			return pwd===pwd1;
		}
		function showPwd(){
			document.getElementById("pwd").type="text";
			
		}
		function hiddenPwd(){
			
				document.getElementById("pwd").type="password";
		}
	</script>
</html>