浏览器对象模型与JavaScript交互-CSDN博客

本文链接：https://blog.csdn.net/Massimo__JAVA/article/details/125289783

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <dl id="app">
        <dd>Java</dd>
        <dd>JavaSE</dd>
        <dd>JavaEE</dd>
    </dl>

    <script>
        //1、浏览器介绍
        /*
        * JavaScript和浏览器的关系？
        * JavaScript的诞生就是为了能够让他在浏览器中运行
        * BOM：浏览器对象模型
        *   常见浏览器
        *       1、IE
        *       2、Chrome
        *       3、Safari
        *       4、FireFox
        *   第三方浏览器
        *       1、QQ浏览器
        *       2、360浏览器*/

        //2、window
        /*
        * 弹窗
        * window.alert(1)
        * window.innerHeight浏览器内部高度
        * window.innerWidth浏览器内部宽度
        * window.outerHeight浏览器外部高度
        * window.outerWidth浏览器外部宽度*/

        //3、Navigator
        /*
        * Navigator,封装了浏览器的信息
        * navigator.appName应用名称
        * navigator.appVersion浏览器版本
        * navigator.userAgent浏览器代理
        * navigator.platform浏览器运行系统
        * 大多数时候，我们不会使用navigator对象，应为会被人为修改！
        * 不建议使用这些属性来判断和编写代码*/

        //4、screen
        /*
        * 代表屏幕尺寸，单位像素
        * screen.width屏幕宽度
        * screen.height屏幕高度*/

        //5、location
        /*
        * location代表当前对象的URL信息
        * host:"www.baidu.com"
        * href:"https://www.baidu.com/"
        * protocal:"https:"
        * reload:f reload()刷新网页
        * 设置新的地址
        * location.assign("https:..........")*/

        //6、document
        /*
        * document代表当前的页面，HTML DOM文档树
        * document能够获得具体的文档树节点*/
        var dl = document.getElementById("app");

        //document还可以获取cookie
        /*
        * 有些恶意人员可以通过它来劫持cookie，从而上传到它的服务器
        * 但是服务器可以设置cookie:httpOnly*/

        //7、history
        /*
        * history嗲表浏览器的历史记录
        * history.back()后退
        * history.forward()前进*/
    </script>
</body>
</html>

操作BOM对象

代码