欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript 中最常见的 BOM对象 详解

程序员文章站 2022-03-30 09:40:27
一.BOM对象1.​​​​​​​BOM简述作用：用来执行浏览器的相关操作。（例如：浏览器的地址、弹出消息等）window对象-----BOM对象。​​​​​​​2.​​​​​​​消息框函数名描述alert()显示带有一段消息和一个确认按钮的警告框。confirm()显示带有一段消息以及确认按钮和取消按钮......

一.BOM对象

1. BOM简述

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

 

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

JavaScript 中最常见的 BOM对象 详解

 

 

 

2.​​​​​​​消息框

函数名

描述

alert()

显示带有一段消息和一个确认按钮的警告框。

 

JavaScript 中最常见的 BOM对象 详解

 

confirm()

显示带有一段消息以及确认按钮和取消按钮的确认框。

JavaScript 中最常见的 BOM对象 详解

 

确认框：

  确定返回true

  取消返回false

prompt()

显示可提示用户输入的提示框。

JavaScript 中最常见的 BOM对象 详解

 

点击确定获得用户输入数据

 

 

代码:

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

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

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

 

 

 

3.​​​​​​​ location对象

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

JavaScript 中最常见的 BOM对象 详解代码:

<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对象（了解）

历史列表对象

JavaScript 中最常见的 BOM对象 详解

 

代码:

<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>

 

 

 

 

 

 

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

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

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

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

 

本文地址：https://blog.csdn.net/qq_43705131/article/details/107166373

上一篇： 【剑指 Offer-python】 03. 数组中重复的数字

下一篇： POJ2187(旋转卡壳)

推荐阅读