BOM浏览器对象模型

来源：互联网发布：查看8080端口被占用编辑：程序博客网时间：2024/06/11 12:51

继上一博文：javaScript的组成–BOM浏览器对象模型

Global对象和window对象的区别

global对象无论从任何角度都是不存在的，直接打印不出来。global对象只是一个规范，表明他是一个全局对象，任何属性或方法如果不属于任何对象，这样这些属性和方法都属于global这个对象。window对象是对global对象这个规范的实现。任何属性和方法如果不属于任何对象，都属于window对象。比如定义的全局变量、函数等都属于window对象。
如window.history对象可以直接写成histroy；alert(a)等于alert(window.a);

document对象文档对象

内存中的对象，代表一个html或xml文档。每次打开一个网页，都会在内存中生成一个html或xml文档对象，来操作整个文档。
常用方法：
①document.getElementById(“form1”);//获得html标签、html元素、dom对象等。
②document.write();//往body中写内容，分了两种情况：1）页面没加载完，直接写到body中。 2）页面加载完成，之后使用该方法是覆盖body中内容
document.writeln();//不能换行，因为写在body中是html代码，不写<’br’/>是无法换行的。
③document.open();document.close();//用来打开、关闭文档输出
④getElementsByName根据指定名称获得节点集合。
getElementsByTagName获得指定标签的节点集合（获得所有的div节点、a节点）
示例代码：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            document.write("世界！");            function test () {                document.write("123<br/>");                document.write("456<br/>");            }        </script>    </head>    <body>        你好        <input type="button" name="btn1" id="btn1" value="点我" onclick="test()" />    </body></html><script type="text/javascript">            document.getElementById("div1");        </script><div id="div1"> </div>

location地址栏对象

常用属性和方法：

href属性，用来获得url
search属性，获得传过来的?之后的内容
reload(boolean flag)刷新方法，默认false,内容修改，才会被重新加载，改为true,无论如何都重新加载。
assign(“网址”)；跳到指定网址
示例代码：

第一个页面<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <form action="按钮.html" method="get">            用户名：            <input type="text" name="btn1" id="btn1" value="" />            <input type="submit" value="提交"/>        </form>    </body></html>第二个页面<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            function href () {                alert(location.href);            }            function search () {                alert(location.search);            }        </script>    </head>    <body>        <input type="button" name="btn1" id="btn1" value="href" onclick="href();"/>        <input type="button" name="btn2" id="btn2" value="search" onclick="search();"/>        <input type="button" name="btn4" id="btn4" value="刷新" onclick="location.reload()" />        <input type="button" name="btn3" id="btn3" value="跳转baidu" onclick="location.assign('http://www.baidu.com')" />    </body></html>

navigator浏览器对象

常用属性：userArgent获得浏览器描述，可以获得浏览器的版本
示例：

<script type="text/javascript">    alert(navigator.userAgent);</script>

screen屏幕对象

获得关于屏幕的一些描述信息。
示例：

<script type="text/javascript">            for (var prop in screen) {                document.write(prop + "=" + screen[prop] +"<br/>");            }</script>

补充：console控制台对象

常用方法：1.console.dir(对象)；需要在firefox中安装firebug工具查看，查看对象属性和方法。
2.日志对象，从上到下，级别从高到低
console.log(“我是log”); //普通信息全部
console.debug(“我是debug”); //调试
console.info(“我是info”); //消息
console.warn(“我是warn”); //警告
console.error(“我是error”); //错误F
好处：代替了各种调试方法，不影响页面内容
3.如何打断点？
“脚本”选项卡中打断点，进行单步调试。
右下角窗口可写片段js代码，不需要新建页面。
4.测试js运行时间，查看效率
示例代码：

<script type="text/javascript">            /*console.time("test");            for(var i=1;i<=1000;i++){                    document.write(i + "<br/>");            }            console.timeEnd("test");*/            //老方法            var start = new Date().getTime();//long start = System.currentTimeMillis();            //代码            for(var i=1;i<=1000;i++){                    document.write(i + "<br/>");            }            var end = new Date().getTime();//long end = System.currentTimeMillis();            alert(end-start);//单位 毫秒    System.out.println("该程序运行的时间是" + (end-start) + "毫秒");        </script>

这里写图片描述

阅读全文

0 0