BOM 和DOM简介
BOM ,Browser Object Model ,浏览器对象模型;
BOM主要提供了访问和操作浏览器各组件的方式;
浏览器组件:window(浏览器容器),
location(地址栏),
history(浏览器历史),
screen(显示器屏幕),
navigator(浏览器软件),
document(网页);
DOM,Document Object Model,文档对象模型
DOM主要提供了访问和操作HTML标记的方式
HTML标记:
图片标记,
表格标记,
表单标记,
body,html标记
…
BOM和DOM不是JS的内容,它们是W3C制定的规范,但是,BOM和DOM在浏览器中以对象的形式得以实现;
换句话说:BOM和DOM都是由一组对象构成;
W3C是制作互联网标准的一个国际化的组织,如:XHTML,CSS,JavaScript,AJAX等
BOM结构图示:
各对象之间是有层级关系的,各对象之间的访问示意:
window.document.write(“I love you”);
window.document.body.bgColor ="#FF0000";
window对象是所有其它对象的最顶层对象,因此,可以省略,如下:
document.write(“I love you”);
document.body.bgColor ="#FF0000";
window.alert(“Are you OK?”); ----> alert.(“Are you OK?”);
window.prompt(“请输入一个分数:”); ----> prompt(“请输入一个分数:”);
for …in 循环遍历 :只能循环数组的下标或对象的属性,取完自动停止
1,如果循环数组的话,每次循环取下标值,对于数组中值为undefined的,不会循环;循环数组,只返回有效的值;
2,如果循环对象的话,每次循环取对象属性;
注意:严格的来说,对象中没有方法一说,所有的都是属性;只不过将一个函数赋给一个属性后,这个属性要区别于其它属性而称为方法;
1,window对象的一些属性
1,name :指浏览器容器的名字或框架的名字,这个名字是给<a>标记的target属性(目标是那,文件在那打开)来用的;
设置窗口的名字:window.name =“newWin”;
获取窗口的名字:document.write(name);
2,top :代表最顶层窗口,如:window.top ;
3,parent :代表父级窗口,主要用于框架中;
4,innerWidth :指浏览器窗口的内宽(即:不含菜单栏,工具栏,地址栏,状态栏),该属性Firefox支持;
在IE下,要使用document.documentElement.clientWidth 来代替 window.innerWidth ;
5,innerHeight :指浏览器窗口的内高(即:不含菜单栏,工具栏,地址栏,状态栏),该属性Firefox支持;
在IE下,要使用document.documentElement.clientHeight 来代替 window.innerHeight ;
document.documentElement 就是<html>标记对象
document.body 就是<body>标记对象
实例:1,测试当前网页的宽度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window对象测试当前网页的宽度和高度</title>
<script type="text/javascript">
//实例:测试当前网页的宽度和高度
//兼容所有浏览器的写法如下
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
document.write("网页的宽度:" + width + " px ,高度:" + height + " px");//输出结果
</script>
</head>
<body>
</body>
</html>
显示效果如下:
2,window 对象的一些方法
1,alert() :弹出一个警告对话框;
2,prompt() :弹出一个输入对话框;
3,confirm() :弹出一个确认对话框;如果点击“确认”返回true,如果单击“取消”返回false;
4,close() :关闭窗口;
5,print() :打印窗口;
6,open() :打开一个新的浏览器窗口;
语法:var winObj =window.open([url] ,[name] ,[options]);
参数:url :准备在新窗口中显示哪个文件,url可以为空字符串,表示一个空的页面;
name :新窗口的名字,该名字给<a>标记的target属性来用。
options :窗口的规格,其内容包括以下的几个常用的
width :新窗口的宽度;
height :新窗口的高度;
left :新窗口距离屏幕左边的距离;
top :新窗口距离屏幕上边的距离;
menubar :是否显示菜单栏,取值:yes,no;
toolbar :是否显示工具栏;
status :是否显示状态栏;
返回值:返回一个window 对象的变量,可以通过该名称跟踪该窗口,winObj具备window对象的所有属性和方法;
实例:弹出一个新窗口,要求:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window.open()弹出一个新窗口</title>
<script type="text/javascript">
function init() {
//变量初始化
var url2 = "";//新窗口需打开的文件的url
var name2 = "win2";//新窗口的名字
var screenWidth = screen.availWidth;//屏幕的有效宽度
var screenHeight = screen.availHeight;//屏幕的有效高度
var width = 400;//新窗口的宽度
var height = 300;//新窗口的宽度
var left = (screenWidth - width) / 2;//左距离
var top = (screenHeight - height) / 2;//顶部之间的距离
var options2 = "width=" + width + ",height=" + height + ",left=" + left + ",top=" + top + ",menubar=no,toolbar=no";
//打开一个新窗口
var winObj2 = window.open(url2, name2, options2);
//往新窗口中,输入一个字符串
winObj2.document.write("这是新窗口中的内容");
//10秒后之后,自动关闭
winObj2.setTimeout("window.close()", 10000);
}
</script>
</head>
<body οnlοad="init()">
<!-- HtML文件加载完成后执行init()函数 -->
</body>
</html>
显示效果如下:
onload事件:当网页加载完成,指<body>标记的所有内容加载完成,才触发该事件(条件),通过onload事件属性去调用JS的函数;onload属性只有<body>标记才有;
onclick事件:当单击时,去调用JS代码;所有的HTML标记都具有该事件属性;
HTML标记与JS进行交互是通过HTML标记的事件属性,去调用JS代码来完成的;
交互的实现,例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSwindow对象的一些方法</title>
<script type="text/javascript">
function confirmDel() {
if (window.confirm("你确认要删除吗")) {
//跳转到delete.php页面,执行删除操作
location.href = "delete.php";
}
}
</script>
</head>
<body>
<table width="700" border="1" align="center" rules="all" cellpadding="5">
<tr>
<th>属性或标记</th>
<th>含义</th>
</tr>
<tr>
<td>table</td>
<td>表格 <a href="#" onClick="confirmDel">删除此行</a></td>
</tr>
<tr>
<td>width</td>
<td>宽</td>
</tr>
<tr>
<td>border</td>
<td>边框</td>
</tr>
<tr>
<td>align</td>
<td>水平对齐方式</td>
</tr>
<tr>
<td>rules</td>
<td>内侧边框显示的规则</td>
</tr>
<tr>
<td>cellpadding</td>
<td>内边距</td>
</tr>
</table>
</body>
</html>
显示效果如下:
如例中的onClick就是一个事件属性,它是一个单击事件;
当单击<a>标记时,去调用confirmDel函数;然后在confirmDel函数中,来完成相应的功能代码;
对HTML操作有一定顺序的
1,<a>标记必须先出来;
2,鼠标单击<a>标记,事件属性onclick;
3,当onclick事件发生时,去调用confirmDel()函数;
4,转到JS代码中,去执行confirmDel()函数代码;
setTimeout()----延时器方法
setTimeout() ----设置一个延时器,即时间一到,就执行code代码一次;
语法:var timer = window.setTimeout(code ,millisec);//经过millisec毫秒后执行一次code代码
参数:code :是任何合法的JS代码,一般情况下是JS函数,该函数要放在引号中或**写函数名且不加()和"**来指向函数地址;
millisec :毫秒值,1秒=1000毫秒;
返回值:返回一个延时器的ID变量,这个ID变量给clearTimeout()用来清除;
例:window.setTimeout(“close()”,2000);//此处用的是“close()”字符串来指明是close()函数,且不会导致直接运行close()函数
例:window.setTimeout(close,2000);//此处close指的是close()函数的地址,如果直接写(window.setTimeout(close(),2000);)将会导致先运行close()函数再运行setTimeout()方法从而使延时器方法失效;
clearTimeout() ----清除延时器ID变量
语法:window.clearTimeout(timer);
参数:timer就是由setTimeout()生成的一个延时器的ID变量
clearTimeout()方法没有返回值;
实例:一个简单的计时器
####### var idObj =document.getElementById(“id”); getElementById()方法用于在document网页文件中取得指定的id对象,返回一个id对象;
setInterval() ----定时器方法
功能:设置一个定时器,定时器,重复不断的执行JD代码(周期性的)
语法:var timer =window.setInterval(code ,millisec);
参数:code :是任何合法的JS代码,一般情况下是JS函数,该函数要放在引号中或**写函数名且不加()和"**来指向函数地址;
millisec :毫秒值,1秒=1000毫秒;
返回值:返回一个定时器的ID变量,这个ID变量给clearInterval()用来清除;
clearInterval() ----清除定时器的ID变量
实例:滚动的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="images\td.jpg" alt="" id="img">
<script>
window.onload = init;
var i = 1;//图片序号
function init() {
var id1 = window.setInterval(function () {
var img = document.getElementById("img");
img.src = 'images/td' + i + '.jpg';
i++;
console.log("此时图片的路径" + img.src)
if (i > 3) {
i = 1;
}
}, 2000)
}
</script>
</body>
<ml>
显示效果如下:
screen 屏幕对象
width :屏幕的宽度,只读属性(不可修改);
height :屏幕的高度,只读属性(不可修改);
availWidth :屏幕的有效宽度,不含任务栏;只读属性(不可修改);
availHeight :屏幕的有效高度,不含任务栏;只读属性(不可修改);
location 地址栏对象
href :获取地址栏中完整的地址,可以实现JS的网页跳转,location.href =“http://www.wush.com”;
host :主机名;
hostname :主机名;
pathname :文件路径及文件名;
search :查询字符串;例:https://editor.csdn.net/md?articleId=106033688中的问号及其以后的部分即"?articleId=106033688"便是查询字符串;
protocol :协议,如:http:// ,ftp:// ;
hash :锚点名称,如:#top ;
reload([true]) :刷新网页,true参数表示强制刷新;
注意:所有的属性,重新赋值后网页将自动刷新;
<meta http-equiv =“refresh” content =“5;url =http://www.sina.com.cn”/>
history 对象
length :历史记录的个数;
go(n) :同时可以实现“前进”和“后退”;
例:history.go(0);//刷新网页
history.go(-1);//后退
history.go(1);//前进一步
history.go(3);//前进三步
forward() :相当于浏览器的“前进”按钮;
back() :相当于浏览器的“后退”按钮;