BOM浏览器对象模型

最新推荐文章于 2023-03-25 20:59:16 发布

夏虫语冰彡

最新推荐文章于 2023-03-25 20:59:16 发布

阅读量481

点赞数

文章标签： javascript BOM浏览器对象 document对象 location对象 console对象

本文链接：https://blog.csdn.net/qq_34283987/article/details/77946473

版权

继上一博文：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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BOM浏览器对象模型

继上一博文：javaScript的组成–BOM浏览器对象模型Global对象和window对象的区别global对象无论从任何角度都是不存在的，直接打印不出来。global对象只是一个规范，表明他是一个全局对象，任何属性或方法如果不属于任何对象，这样这些属性和方法都属于global这个对象。window对象是对global对象这个规范的实现。任何属性和方法如果不属于任何对象，都属于window对象。
复制链接

扫一扫