JS基础-BOM

最新推荐文章于 2024-08-15 08:55:57 发布

依墨~

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量221

点赞数

文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/m0_62073591/article/details/126250380

版权

1.BOM

BOM 是 browser object model 的缩写，简称浏览器对象模型。主要处理浏览器窗口和框架，
描述了与浏览器进行交互的方法和接口，能够对浏览器窗口进行访问和操做，譬如能够弹出
新的窗口，回退历史记录，获取 url……java

2.BOM与DOM的关系

vacsript 是经过访问 BOM 对象来访问、控制、修改浏览器
BOM 的 window 包含了 document，所以经过 window 对象的 document 属性就能够访问、
检索、修改文档内容与结构。
document 对象又是 DOM 模型的根节点。

所以， BOM 包含了 DOM，浏览器提供出来给予访问的是 BOM 对象，从 BOM 对象再访
问到 DOM 对象，从而 js 能够操做浏览器以及浏览器读取到的文档chrome

3.BOM对象包含哪些内容

3.1BOM对象大致包含五个部分

1.Window 对象:浏览器窗口对象

2.Navigator:浏览器对象

3.Screen:浏览器所处客户端的显示器屏幕对象

4.History:浏览器当前窗口的访问历史记录对象

5.Location:浏览器当前窗的地址栏对象

每个对象都有对应的属性和方法，通过这些属性和方法我们可以获取浏览器的信息。在这五个部分中，Window对象尤为重要，根据图片的区域划分，可以很清楚的看出,Window对象其中就已经包含了 History.Location对象，还有一个非常重要的Document对象，但由于其重要性太高，所以前面课程我们将其单独区分出来，称为DOM对象。

而另外两个:Navigator、Screen对象，使用到的次数较少，下面我们对于BOM中的内容主要就涉及Window、History.Location三个对象。

3.2Window对象属性

在BOM中，window对象就已经包含了大部分的对象，而通过对window对象的属性访问，同样可以获取到其他的 BOM对象的引用。

以下是各个BOM对象通过window对象获取的方式:

属性名	描述	通过window对象获取方法
history	对History对象的只读引用	window.history
location	对Location对象的只读引用	window.location
navigator	对Navigator对象的只读引用	window.navigator
screen	对Screen对象的只读引用	window.screen

3.3Location对象

location对象代表浏览器窗口中的地址栏，和window对象一样，无需特殊的创建方式，通过对象名就可使用,并调用其中的方法:

location.方法名(); //或window.location.方法名();

location对象中的方法及用法如下：

方法名	方法描述
assign()	加载新的文档
reload()	重新加载当前文档
replace()	用新文档替换当前文档

小练习：

<body>
    <input type="button" value="assign" id="assign">
    <input type="button" value="reload" id="reload">
    <input type="button" value="replace" id="replace">
    <input type="button" value="href" id="href">
    <script>
        assign.onclick=function(){
            //assign()：可以打开新的页面，并且可以返回，可以产生历史记录的
            location.assign("https://www.baidu.com")
        }
        reload.onclick=function(){
            //reload()：实现的是页面刷新
            location.reload()
        }
        replace.onclick=function(){
            //replace()：用新文档替换当前的文档，可以实现打开新的页面的功能，但不能返回，故没有产生历史记录
            location.replace("https://www.baidu.com")
        }
        href.onclick=function(){
            location.href="https://www.baidu.com"
        }
    </script>
</body>

4.BOM 添加小案例

    <style>
        ul{
            list-style: none;
        }
        li{
            text-align: center;
            width: 150px;
            height: 25px;
            line-height: 25px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <input type="text" id="content" placeholder="请输入内容">
    <input type="button" id="add" value="添加节点">
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var add=document.getElementById("add")
        add.onclick=function(){
            if(test()){
                    if(confirm("你确定要添加吗？")==true){
                    //创建节点
                    var li=document.createElement("li")
                    //获取文本框输入的值
                    var content=document.getElementById("content")
                    li.innerHTML=content.value
                    //获取ul标签
                    var ul=document.getElementById("list")
                    //将li添加到ul中
                    ul.appendChild(li)
                    alert("添加成功")
                }else{
                    alert("不添加")
                }
            }else{
                alert("格式不正确")
            }
            
        }
        //用来验证文本输入框输入的值的格式是不是只包含数字和字母
        function test(){
            //正则表达式：只是数字和字母，并且不能为空
            var reg=/\b[a-zA-Z0-9]{1,}\b/
            var content=document.querySelector("#content")
            //test()返回一个布尔值：当满足正则表达式时返回true 反之则返回false
            if(reg.test(content.value)){
                return true
            }else{
                return false
            }
        }
    </script>
</body>

效果演示：

依墨~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS基础-BOM

BOM 是 browser object model 的缩写，简称浏览器对象模型。主要处理浏览器窗口和框架，描述了与浏览器进行交互的方法和接口，能够对浏览器窗口进行访问和操做，譬如能够弹出新的窗口，回退历史记录，获取 url……java。...
复制链接

扫一扫