1、BOM:浏览器对象模型
当我们使用浏览器打开一个网页程序时,那么,js系统会自动创建对象,首先创建浏览器对象window,然后再为window对象创建它的子级对象,最后形成一个树状模型,这个就是BOM模型
从上图可以看出,window对象是所有对象的最顶级对象
也就是说,以前,我们写的 document.write() 实际上 window.document.write()
我们创建的所有全局变量和全局函数都是存储到window对象下的
2、window对象 浏览器对象
alert(message) 消息框
confirm(message) 确认框 如果点击确定,返回true,否则返回false
prompt(message[,defstr]) 输入框 返回值为用户输入的数据
open(url[,name[,features]]) 打开新窗口
close() 关闭窗口
blur() 失去焦点
focus() 获得焦点
print() 打印
moveBy(x,y) 相对移动
moveTo(x,y) 绝对移动
resizeBy(x,y) 相对改变窗口尺寸
resizeTo(x,y) 绝对改变窗口尺寸
scrollBy(x,y) 相对滚动
scrollTo(x,y) 绝对滚动
setTimeout(表达式,毫秒) 设置定时器 执行一次
setInterval(表达式,毫秒) 设置定时器 反复执行
clearTimeout(定时器对象) 清除定时器
3、navigator 浏览器信息对象
appCodeName :内部代码
appName :浏览器名称
appVersion :版本号
platform :操作系统
onLine :是否在线
cookieEnabled :是否支持cookie
4、location 地址栏对象
host :主机名
port :端口号
href :完整的url信息
pathname :路径地址
protocol :协议
search :查询字符串
assign(url) :用于页面跳转
*5、screen 屏幕信息对象
availHeight 可用高度
availWidth 可用宽度
colorDepth 颜色质量
height 高度
width 宽度
6、document 文档对象
linkColor 超链接颜色
alinkColor 作用中的超链接颜色
vlinkColor 作用后的超链接颜色
bgColor 背景颜色
fgColor 字体颜色
title 文档标题
7.获取元素
getElementById(“id”)
通过id属性值获取某个元素
getElementsByName(“name”)
通过name属性值获取某些元素
getElementsByTagName(“tagname”)
通过标签名获取某些元素
简单代码
<script>
location.href='demo19.html';
//location.assign('demo19.html');
var x=window.screen.width;
var y=window.screen.height;
document.write('ÄúµÄÆÁÄ»·Ö±çÂÊ£º'+x+'*'+y+'<br>');
document.write(navigator.appCodeName+'<br>');
document.write(navigator.appName+'<br>');
document.write(navigator.appVersion+'<br>');
document.write(navigator.platform+'<br>');
document.write(navigator.cookieEnabled+'<br>');
document.write(navigator.onLine+'<br>');
//ÅжϿͻ§¶ËÊÇÄÄÖÖä¯ÀÀÆ÷
var str=window.navigator.appVersion;
if(str.indexOf('MSIE')>0){
alert('IE');
}else{
alert('w3c');
}
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script>
window.onload=function(){
document.getElementById('btn1').onclick=function(){
document.getElementById('div1').innerHTML='hello,javascript!';
document.getElementById('div1').style.color='red';
};
document.getElementById('btn2').onclick=function(){
var div=document.getElementsByTagName('div');
for(var i=0;i<div.length;i++){
div[i].style.color='blue';
}
};
document.getElementById('btn3').onclick=function(){
var ft=document.getElementsByName('ft');
for(var i=0;i<ft.length;i++){
ft[i].value='hello!';
}
}
}
</script>
</head>
<body>
<div id='div1'>div1</div>
<div id='div2'>div2</div>
<div id='div3'>div3</div>
<input type='button' name='ft' id='btn1' value='byid'>
<input type='button' name='ft' id='btn2' value='bytagname'>
<input type='button' name='ft' id='btn3' value='byname'>
</body>
</html>