JavaScript 中最常见的 BOM对象详解(四)

最新推荐文章于 2023-08-04 11:03:12 发布

煌sir

最新推荐文章于 2023-08-04 11:03:12 发布

阅读量354

点赞数 1

分类专栏： JavaScript 文章标签： javascript java

本文链接：https://blog.csdn.net/qq_43705131/article/details/107166373

版权

JavaScript 专栏收录该内容

5 篇文章 9 订阅

订阅专栏

一.BOM对象

1. BOM简述

作用：用来执行浏览器的相关操作。（例如：浏览器的地址、弹出消息等）

window对象-----BOM对象。

2.消息框

函数名	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的确认框。确认框：确定返回true 取消返回false
prompt()	显示可提示用户输入的提示框。点击确定获得用户输入数据

代码:

<script>
    //警告框，用来警告和提示
    //alert("xxx");

    //带提示的输入框
    //点击确定： 返回用户输入的信息
    //点击取消： 返回null
    /*var xx = prompt("请输入用户名：");
    alert(xx);*/

    //确认框
    //点击确定：返回true
    //点击取消：返回false
    var x = confirm("是否删除？");
    alert(x);
</script>

3. location对象

location 对象包含浏览器地址栏的信息。

代码:

<script>
        function run1(){
            alert(location.href);
        }
        function run2(){
            //内网路径： 相对、绝对
            //外网路径：http://
            location.href="demo.html";
        }
    </script>
</head>
<body>
    <input type="button" value="点我获取当前地址" onclick="run1()"/>
    <input type="button" value="点我设置当前地址" onclick="run2()"/>
    <a href="demo.html">demo</a>
</body>

4. history对象（了解）

历史列表对象

代码:

<script>
        function run1(){
            history.forward();//history.go(1);
        }
    </script>
</head>
<body>
    <h1>demo1</h1>
    <a href="demo2.html">demo2</a>
    <input type="button" value="前进" onclick="run1()"/>
</body>

<script>
        function run1(){
            history.back();//history.go(-1);
        }
    </script>
</head>
<body>
    <h1>demo2</h1>
    <a href="demo1.html">demo1</a>
    <input type="button" value="后退" onclick="run1()"/>
</body>

二. 操作元素的内容体-innerHTML

属性名

属性说明

元素对象.innerHTML

获取某个元素的内容体信息

元素对象.innerHTML=值

设置某个元素的内容体信息

代码:

<script>
        function run1(){
            //1、获取font标签对象
            var f1 = document.getElementById("f1");
            //2、对象.innerHTML获取内容体
            alert(f1.innerHTML);
        }
        function run2(){
            //1、获取font标签对象
            var f1 = document.getElementById("f1");
            //2、设置标签内容体
            f1.innerHTML = "<b><i>今天天气不错，拉开吧</i></b>";
        }
        function run3(){
            //1、获取font标签对象
            var f1 = document.getElementById("f1");
            //2、设置标签内容体
            f1.innerHTML += "<b><i>今天天气不错，拉开吧</i></b>";
        }
    </script>
</head>
<body>
    <font id="f1" color="blue" size="7">今天窗帘拉上了</font><br/>
    <input type="button" value="点击获取font标签的内容体" onclick="run1()"/><br/>
    <input type="button" value="点击设置font标签的内容体" onclick="run2()"/><br/>
    <input type="button" value="点击追加font标签的内容体" onclick="run3()"/><br/>
</body>

看完恭喜你,又知道了一点点!!!

你知道的越多,不知道的越多!

~感谢志同道合的你阅读, 你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!

注: 如果本篇有需要改进的地方或错误,欢迎大神们指定一二~~

煌sir

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 中最常见的 BOM对象详解(四)

一.BOM对象1.BOM简述作用：用来执行浏览器的相关操作。（例如：浏览器的地址、弹出消息等）window对象-----BOM对象。2.消息框函数名描述 alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮...
复制链接

扫一扫