DOM与BOM学习

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