DOM与BOM学习

最新推荐文章于 2024-02-25 12:00:00 发布

winkooxx

最新推荐文章于 2024-02-25 12:00:00 发布

阅读量204

点赞数

分类专栏：笔记文章标签： javascript css

本文链接：https://blog.csdn.net/Dhxy1030/article/details/114318005

版权

笔记专栏收录该内容

44 篇文章 1 订阅

订阅专栏

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属性:获取标签之间的文本内容

事件

概念：

事件：一件事
事件源：事件发生的组件。
监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法
注册监听：将监听器绑定到事件源上，监听事件的发生
js中注册监听的方式：
1. 在定义标签时，添加事件名称属性属性值是js代码
  js代码会被自动封装到一个function函数的方法体中
  例子：
  hehe
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 文本被选中。
    
    /* 事件：一件事情
    事件源：组件标签
    事件处理：处理函数
    绑定事件：如何让这个标签具有这个事件
    事件类型：单击，双击，
    */
    //绑定事件的方式1:将事件写到标签内部
    function show(){
    alert(this);
    alert(“谈了”);
    }
    
    //show();
    
    //alert(this);
    
    //方式2:使用代码来绑定
    // document.getElementById(“btn1”).οnclick=function(){
    // alert(“谈了”);
    // }
    
    var bts=document.getElementsByTagName(“button”);
    for(var i=0;i<bts.length;i++){
    bts[i].οndblclick=function(){
    //alert(“谈谈”);
    //this 当前的元素
    //alert(this);
    this.style.background=“red”;
    }
    }

表单验证

<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";
	}