JS中BOM模型

1、BOM:浏览器对象模型

当我们使用浏览器打开一个网页程序时,那么,js系统会自动创建对象,首先创建浏览器对象window,然后再为window对象创建它的子级对象,最后形成一个树状模型,这个就是BOM模型


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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容