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 对象集合
集合 |
描述 |
提供对文档中所有 HTML 元素的访问。 |
|
返回对文档中所有 Anchor 对象的引用。 |
|
applets |
返回对文档中所有 Applet 对象的引用。 |
返回对文档中所有 Form 对象引用。 |
|
返回对文档中所有 Image 对象引用。 |
|
返回对文档中所有 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。 |
|
返回当前文档的域名。 |
|
返回文档被最后修改的日期和时间。 |
|
返回载入当前文档的文档的 URL。 |
|
返回当前文档的标题。 |
|
返回当前文档的 URL。 |
例如:
console.log(document.URL);
console.log(document.title);
console.log(document.cookie);
console.log(document.domain);
4.8.2.3 Document 对象方法
方法 |
描述 |
关闭用 document.open() 方法打开的输出流,并显示选定的数据。 |
|
返回对拥有指定 id 的第一个对象的引用。 |
|
返回带有指定名称的对象集合。 |
|
返回带有指定标签名的对象集合。 |
|
打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
|
向文档写 HTML 表达式 或 JavaScript 代码。 |
|
等同于 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中的事件
事件句柄:
属性 |
此事件发生在何时... |
图像的加载被中断。 |
|
元素失去焦点。 |
|
域的内容被改变。 |
|
当用户点击某个对象时调用的事件句柄。 |
|
当用户双击某个对象时调用的事件句柄。 |
|
在加载文档或图像时发生错误。 |
|
元素获得焦点。 |
|
某个键盘按键被按下。 |
|
某个键盘按键被按下并松开。 |
|
某个键盘按键被松开。 |
|
一张页面或一幅图像完成加载。 |
|
鼠标按钮被按下。 |
|
鼠标被移动。 |
|
鼠标从某元素移开。 |
|
鼠标移到某元素之上。 |
|
鼠标按键被松开。 |
|
重置按钮被点击。 |
|
窗口或框架被重新调整大小。 |
|
文本被选中。 |
|
确认按钮被点击。 |
|
用户退出页面。 |
例如:
<!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>
<br/>
<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 对象属性
属性 |
描述 |
返回窗口是否已被关闭。 |
|
设置或返回窗口状态栏中的默认文本。 |
|
对 Document 对象的只读引用。请参阅 Document 对象。 |
|
对 History 对象的只读引用。请参数 History 对象。 |
|
返回窗口的文档显示区的高度。 |
|
返回窗口的文档显示区的宽度。 |
|
length |
设置或返回窗口中的框架数量。 |
用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
|
设置或返回窗口的名称。 |
|
对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
|
返回对创建此窗口的窗口的引用。 |
|
返回窗口的外部高度。 |
|
返回窗口的外部宽度。 |
|
pageXOffset |
设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
pageYOffset |
设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
parent |
返回父窗口。 |
对 Screen 对象的只读引用。请参数 Screen 对象。 |
|
返回对当前窗口的引用。等价于 Window 属性。 |
|
设置窗口状态栏的文本。 |
|
返回最顶层的先辈窗口。 |
|
window |
window 属性等价于 self 属性,它包含了对窗口自身的引用。 |
screenLeft screenTop screenX screenY
|
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持 screenX 和 screenY。 |
4.8.4.2 对象方法
方法 |
描述 |
显示带有一段消息和一个确认按钮的警告框。 |
|
把键盘焦点从顶层窗口移开。 |
|
取消由 setInterval() 设置的 timeout。 |
|
取消由 setTimeout() 方法设置的 timeout。 |
|
关闭浏览器窗口。 |
|
显示带有一段消息以及确认按钮和取消按钮的对话框。 |
|
创建一个 pop-up 窗口。 |
|
把键盘焦点给予一个窗口。 |
|
可相对窗口的当前坐标把它移动指定的像素。 |
|
把窗口的左上角移动到一个指定的坐标。 |
|
打开一个新的浏览器窗口或查找一个已命名的窗口。 |
|
打印当前窗口的内容。 |
|
显示可提示用户输入的对话框。 |
|
按照指定的像素调整窗口的大小。 |
|
把窗口的大小调整到指定的宽度和高度。 |
|
按照指定的像素值来滚动内容。 |
|
把内容滚动到指定的坐标。 |
|
按照指定的周期(以毫秒计)来调用函数或计算表达式。 |
|
在指定的毫秒数后调用函数或计算表达式。 |
4.8.4.2.1 对话框
JS中为了和用户进行信息交流,也提供了3种不同类型的弹框,分别是最为常见的提示框、确认框、对话框。
显示带有一段消息和一个确认按钮的警告框。 |
|
显示可提示用户输入的对话框。返回输入的内容 |
|
显示带有一段消息以及确认按钮和取消按钮的对话框。返回的是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>
<br/>
<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 对象属性
属性 |
描述 |
设置或返回从井号 (#) 开始的 URL(锚)。 |
|
设置或返回主机名和当前 URL 的端口号。 |
|
设置或返回当前 URL 的主机名。 |
|
设置或返回完整的 URL。 |
|
设置或返回当前 URL 的路径部分。 |
|
设置或返回当前 URL 的端口号。 |
|
设置或返回当前 URL 的协议。 |
|
设置或返回从问号 (?) 开始的 URL(查询部分)。 |
4.8.5.2 Location 对象方法
属性 |
描述 |
加载新的文档。 |
|
重新加载当前文档。 |
|
用新的文档替换当前文档。 |
综合事例
表单验证:
<!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", '<span id="' + id + '">' + msg + '</span>');
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>
<!--onsubmit="return validateForm()" 提交之前的验证事件-->
<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()"/><br/>
<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><br/><br/>
<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 ,那么就可以使用该技术。