js中浏览器对象（BOM）

4.8 JS浏览器对象（BOM）

BOM (Browser Object Model )浏览器对象模型，它是由多个JS对象共同组成的， JS是一种动态语言，它可以在页面上做很多动作性的东西，比如：验证表单，动态给网页添加内容，动态修改网页，但是网页的内容通常都是由浏览器来进行解析，所以JS针对浏览器中解析网页的一些对象，就被它封装起来，供我们程序员来进行调用。

BOM由很多对象组成：

4.8.1 BOM对象的主要功能

在浏览中弹出新窗体
2、移动、关闭和更改浏览器窗口大小
3、提供WEB浏览器详细信息的导航对象
4、提供浏览器载入页面的页面详细信息的本地对象

提供用户屏幕分辨率详细的屏幕对象
5、支持cookie
6、BOM还支持扩展使用ActiveX对象类

4.8.2文档对象模型（DOM）

DOM (HTML Document Object Model )文档对象模型的简写，DOM针对HTML网页提供了一系列的标准方法，可以让我们去操作HTML标记。所以我们可以把DOM看作是操作HTML页面的API。

在JS中通过DOM来操作HTML标记时，它会先在内存中构建一棵完整的HTML结构树。然后就可以实现通过该结构树对HTML文件做动态的访问，以及修改。

4.8.2.1 Document 对象集合

集合	描述
all[]	提供对文档中所有 HTML 元素的访问。
anchors[]	返回对文档中所有 Anchor 对象的引用。
applets	返回对文档中所有 Applet 对象的引用。
forms[]	返回对文档中所有 Form 对象引用。
images[]	返回对文档中所有 Image 对象引用。
links[]	返回对文档中所有 Area 和 Link 对象引用。

var nodes = document.all;//获得页面所有的节点信息
console.log(nodes);

var forms = document.forms;//获得页面所有的表单信息
console.log(forms);
console.log(forms[0]);

var links = document.links;//获得页面的所有使用area标记定义的图片链接信息
console.log(links);

var imags = document.images;//获得页面所有的图像信息
console.log(imags);

4.8.2.2 Document 对象属性

属性	描述
body	提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
title	返回当前文档的标题。
URL	返回当前文档的 URL。

例如：

console.log(document.URL);
console.log(document.title);
console.log(document.cookie);
console.log(document.domain);

4.8.2.3 Document 对象方法

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

操作DOM最重要的就是在JS根据document对象去获得HTML标记节点对象。最为重要的方法: getElementById()、getElementsByName()、getElementsByTagName()

4.8.2.3.1 从根节点逐层获取标签

//返回根节点对象（拥有子节点）
var root = document.documentElement;
console.info(root);
console.info(root.nodeName);//返回根节点的名称
//获得根节点的第一个子节点
var head = root.firstChild;
console.info(head);
//获得根节点的最后一个一个子节点
console.info(root.lastChild);
//返回根节点的所有子节点
var nodes = root.childNodes;
console.info(nodes);

var body = document.body;//获得body节点
console.info(body.childNodes);//返回body节点的所有子节点

4.8.2.3.2 针对性获得标签

//根据id获得页面中某一个特定的标签
var center = document.getElementById("center");
console.info(center);

//根据名字将会获得名字相同的一类标签
var tagnames = document.getElementsByName("first");
console.info(tagnames);

// document.getElementsByClassName();或者使用这个

//根据标记的名称获得同类型的标签
var tags = document.getElementsByTagName("div");
console.info(tags);

4.8.2.3.3 针对标记添加内容

获得标记之后，如果需要针对标记进行内容添加，需要使用innerHTML

，innerText两个属性。

例如：

var left = document.getElementById("left");
console.info(left.innerText);//只返回文本内容
console.info(left.innerHTML);//返回标记和文本内容

//向left标记中添加子标记a
left.innerHTML =('<a href="http://www.baidu.com">百度一下</a>');

//向left标记中添加文本信息[包括a标记的内容，也会变成文本]
left.innerText = ('<a href="http://www.baidu.com">百度一下</a>');

4.8.2.3.4 innerText和innerHTML的区别

innerText和innerHTML比较而言， innerHTML主要给标记添加子标记以及内容，而 innerText

只能给标记添加内容。

4.8.3 JS事件

4.8.3.1 事件驱动

JS是一个基于事件驱动架构模式下的面向对象的脚本语言，基于对象的编程语言一般都采用事件驱动架构，在浏览器上面，通常鼠标或热键的动作称之为"事件" ，而由事件产生的一系列连锁反应，我们称之为"事件驱动"。用通俗易懂的话来说：就是我们采用JS定义的函数，需要由鼠标、热键的动作来驱动

事件并非只有用户才能触发，实际上浏览器自己的一些动作也可以产生"事件"，比如：在加载页面的时候，就会触发load加载事件，而关闭页面的事件，会触发unload事件。

归纳一下：必须需要事件驱动的动作，可以分为以下3类
1、用来引起页面之间跳转的事件，主要是超链接事件，还有按钮
2、浏览器自己引发的事件

3、表单内容验证，表单与其他界面对象交互所产生的事件

4.8.3.2 Js中的事件

事件句柄：

属性	此事件发生在何时...
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

例如：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
<script type="text/javascript">

 /*针对文档对象，添加键盘事件*/
 document.onkeypress = function(e){
 var keynum
 var keychar
 var numcheck
 if(window.event) // IE
 {
 keynum = e.keyCode
 }
 else if(e.which) // Netscape/Firefox/Opera
 {
 keynum = e.which
 }
 keychar = String.fromCharCode(keynum)
 console.info(keynum+"----------------"+keychar);
 }

 /*针对某一个标记，添加键盘事件*/
 function keypress(e)
 {
 var keynum
 var keychar
 var numcheck
 if(window.event) // IE
 {
 keynum = e.keyCode
 }
 else if(e.which) // Netscape/Firefox/Opera
 {
 keynum = e.which
 }

 keychar = String.fromCharCode(keynum)
 console.info(keynum+"----------------"+keychar);

 if(keynum == 101){
 closeWindow();
 }
 }

 function closeWindow(){
 window.close();
 }

 /*改变超链接的样式*/
 function removeUnderLine(obj){
 console.log(obj);
 obj.style.textDecoration="none";
 }
 /*改变超链接的样式*/
 function addUnderLine(obj){
 console.log(obj);
 obj.style.textDecoration="underline";
 }

 /*改变编辑状态*/
 function disable(obj){
 console.log(obj);
 obj.disabled = true;
 }
</script>

<form>
 <input type="text" onkeypress="keypress(event)" onmouseup="disable(this)"/>
</form>
 
 <a href="#" onmouseover="removeUnderLine(this)" onmouseout="addUnderLine(this)" >百度一下</a>

</body>
<html>

4.8.4 Window对象

window对象可以说是在整个客户端JS中，扮演着非常重要的角色。它是整个浏览器的全局对象，它就代表着浏览器的某一个窗体。它是整个BOM对象中的根，它是JS中最大的一个对象。它的特点是:它提供了一系列针对窗体操作的属性和行为，但是调用的时候，可以省略"window." ，而直接使用"属性"以及“方法" 。

window对象就代表一个浏览器窗体或者一个框架！

4.8.4.1 对象属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。请参阅 Document 对象。
history	对 History 对象的只读引用。请参数 History 对象。
innerheight	返回窗口的文档显示区的高度。
innerwidth	返回窗口的文档显示区的宽度。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
Navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部宽度。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
Screen	对 Screen 对象的只读引用。请参数 Screen 对象。
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的先辈窗口。
window	window 属性等价于 self 属性，它包含了对窗口自身的引用。
screenLeft screenTop screenX screenY	只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

4.8.4.2 对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

4.8.4.2.1 对话框

JS中为了和用户进行信息交流，也提供了3种不同类型的弹框，分别是最为常见的提示框、确认框、对话框。

alert()	显示带有一段消息和一个确认按钮的警告框。
prompt()	显示可提示用户输入的对话框。返回输入的内容
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。返回的是ture和false，ture是确认按钮，false是取消按钮。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
 function openAlert() {
 alert("我是提示框，或者警告框！");
 }

 function openConfirm(){
 var r = confirm("你确认需要删除以下内容吗？");
 if(r){
 console.log("恭喜你，你依旧删除成功！");
 }else{
 console.log("浪子回头，孺子可教！");
 }
 }

 function openPrompt(){
 var idcard = prompt("请输入你的身份证号码的后6位！");
 if(idcard != null && idcard != ''){
 console.log(idcard);
 }
 }

 function closeWindow(){
 var r = confirm("你确定要退出系统吗？");//true，false
 if(r){
 window.close();
 }
 }
 </script>
</head>
<body>
<a href="javascript:closeWindow()">退出系统</a>
 
 <button onclick="openAlert()">打开警告框</button>
 <button onclick="openConfirm()">打开确认框</button>
 <button onclick="openPrompt()">打开对话框</button>
</body>
</html>

4.8.4.2.2 窗口操作

有的时候，我们可能遇到浏览某个网页时，网页弹出了新的窗口，窗口内部显示了一些注意事项：版权信息、警告、欢迎光临等一些其他的提示信息。JS里面，如果需要弹出窗体非常简单，只需要使用window对象的open函数即可。

语法：

window.open(URL,name,features,replace)

参数	描述
URL	一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name	一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features	一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。
replace	一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

当然，不推荐，现在的浏览器普遍都提供了一种功能:：“拦截弹窗弹出”。

4.8.5 Location对象

Location对象是window对象的一个子属性，它代表的是浏览器中地址栏，根据该对象，我们就可以操作地址栏，获得地址栏的相关信息，也可以让浏览器重新加载新的页面或者跳转新的页面。

4.8.5.1 Location 对象属性

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。

4.8.5.2 Location 对象方法

属性	描述
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	用新的文档替换当前文档。

综合事例

表单验证：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" type="text/css" href="../css/表单验证.css">
 <script>
 /*表单验证工作，返回为true正常提交表达，如果返回为false将阻止表单提交*/
 function validateForm(obj) {
 return pwdLength() && validatePwd();
 }

 function pwdLength() {
 var obj = document.getElementById("pwd");
 var lenth = obj.value.length;
 if (lenth >= 6 && lenth <= 18) {
 buidErrInfo(obj, "√", true)
 return true;
 } else {
 buidErrInfo(obj, "请输入6-18位的密码！", false);
 return false;
 }
 }

 /**
 * 验证密码是否正确
 * @param obj
 */
 function validatePwd() {
 var pwd = document.getElementById("pwd");
 var repwd = document.getElementById("repwd");
 if (pwd.value == repwd.value) {
 buidErrInfo(repwd, "√", true)
 return true;
 } else {
 buidErrInfo(repwd, "两次密码不一致！", false)
 return false;
 }
 }

 function removeErrNode(obj) {
 var id = obj.name + "_id";
 var node = document.getElementById(id);
 if (node != null) {
 obj.parentElement.removeChild(node);
 }
 return id;
 }

 /*产生节点
 * obj 节点对象
 * msg 提示信息
 * status 提示状态
 * */
 function buidErrInfo(obj, msg, status) {
 var id = removeErrNode(obj);//移除错误提示节点
 obj.insertAdjacentHTML("afterend", '' + msg + '');

 var node = document.getElementById(id);
 if (status) {
 node.style.color = "blue";
 } else {
 node.style.color = "red";
 }
 node.style.fontFamily = "楷体";
 node.style.fontSize = "13px";
 node.style.fontWeight = "bold";
 }
 </script>

</head>
<body>

<form action="http://www.baidu.com" method="get" onsubmit="return validateForm(this)">
 <label>用户名：</label>
 <input type="text" class="in" name="userName" required/>

 <label>密码：</label>
 <input type="password" class="in" name="password" id="pwd" required oninput="pwdLength()"/> 

 <label>确认密码：</label>
 <input type="password" class="in" name="repassword" id="repwd" oninput="validatePwd()"/>

 <label>教育程度：</label>
 <select name="education" class="in">
 <option value="0">大专</option>
 <option value="1">本科</option>
 </select> 

 <input type="submit" class="btn" value="提交">
 <input type="reset" class="btn" value="重置">
</form>
</body>
</html>

Ajax（页面局部刷新技术）

Ajax全称Asynchronous Javascript and XML ，它不是什么新的编程语言，它就是现有的编程技术的一种使用而已，这个技术的作用：可以做到在不刷新整个页面的基础上，只改变某些局部内容。并且该技术使用非常的广泛,，JAVA程序员来讲写的绝大多数页面，都需要使用Ajax技术。

这种技术的使用，不需要引入任何外部的Js组件，或者说其他的组件，只要你的浏览器可以支持 Js ，那么就可以使用该技术。