JavaScipt BOM_javascrip的bom哪个可以在浏览器窗口载入新网址-CSDN博客

本文链接：https://blog.csdn.net/bbdRzzz/article/details/127893886

BOM

概念：

Borwser Object Model：浏览器对象模型

作用：

览器窗口以及浏览器窗口中的控件（html标签）可以在js程序中操作标签
实现页面和用户之间的动态交互

浏览器对象：一系列浏览器内置对象的统称

浏览器对象模型：内置对象之间按照某种层次组织起来的结构

BOM对象

window对象：浏览器窗口对象，是BOM的核心，BOM的其他内置对象可以作为window的属性
doument对象：文档对象，是DOM的核心
location对象：地址对象，浏览器的地址栏
history：历史对象，用来记录浏览器的访问记录，可以实现前进和后退。
navigator对象：浏览器对象，又称为；浏览器的嗅探器，通过它可以得到浏览器的版本信息，名称，内核等信息。
screen对象：屏幕对象用于获取和屏幕有关的数据，列入屏幕分辨率

window对象

可以作为BOM其他对象的父对象

全局作用域：在javascroipt中定义的变量、函数以及javaScript的内置函数，都可以被window对象调用
注意问题：

window对象的属性和方法的访问：window.属性名 / window.方法

在全局作用域中使用this代表window对象

若使用"window."变量名访问某个未声明的变量时，该变量就是undefined
常用方法
- aler（字符串）：弹出消息提示框（只有一个按钮）
- prompt(参数1,参数2):待输入的消息框
  - 参数1：表示提示的字符串
  - 参数2：表示
  当用户点击"确定按钮时"，函数返回用户输入的数据;当用户点击’取消’，不返回值
- confirm(参数)：确认消息框
  
  参数：表示提示字符串
  
  当用户点击"确定"按钮时，返回true，点击"取消"按钮时返回flase
- open(ulr,name,spaces,replace)：打开一个窗口，表示url代表的页面在name窗口打开
  - url 页面地址
  - name 表示窗口对象
    
    _blank 在新窗口中打开页面，表示在新的浏览器窗口中打开，百度页面
    
    _self 在当前窗口中打开页面
    
    spaces 表示窗口特征（大小，是否状态栏，是否有工具栏）
    
    replace 默认值true，表示是否替换默认条目
  内联：ifrme

Window对象的属性

innerHeight / innerWidth: 返回窗口的文档显示区的高度和宽度
outerHeight / outerWidth:返回窗口外部的高度和宽度（包括工具条和滚动条）

location对象：是浏览器的地址栏

assign(url)：载入新的文档

reload(true)

								 <button onclick="newPage()">载入新页面</button>
    <button onclick="replacePage()">刷新页面</button>
    <button onclick="reploadPage()">刷新页面</button>
    <script>
        function newPage() {
            location.assign('https://www.woniuxy.com/studentarea')
        }
        function replacePage() {
           location.replace('http://www.hao123.com')
        }
        function reploadPage() {
            location.reload(true)
        }

location的方法：

assign(url)：载入新的文档

reload(true/false)：重新载入当前文档

replace(url):用新的文档替换当前文档

属性：
- href：表示url地址
- C/S结构：Client/Server — 客户端/服务端结构
- B/S结构：Browser/Server — 浏览器/服务器结构
- ‘URL:’, location.href);
  ‘路径名：’, location.pathname);
  ‘请求字符串（参数）’, location.search);
  ‘主机名’, location.host);
  ‘网络协议’, location.protocol);
  ‘端口号’, location.port);

history对象

概念该对象可以对浏览器访问过的URL历史记录进行操作
属性：length — 历史列表中的网址数、
方法：
- go(整数)：加载历史列表中某个具体页面；正数表示前进，负数表示后退
- back( )：表示后退，加载的是历史列表中前一个网址
- forword( ):表示前进，加载历史列表中下一个网址

navigator对象

是浏览器的嗅探器，他保存的是浏览器的详细信息。
appCodeName:浏览器的

定时器函数

setTimeout(fn，times)

概念：间隔times毫秒后执行fn函数，window可以省略

参数 fn：是一个函数

times：间隔的时间，单位是毫秒

   function show() {
            console.log('玛卡巴卡');
        }
        setTimeout(show, 3000)

函数返回值是一个定时器对象

setInterval(fn,times)

每间隔times毫秒后执行fn函数
clearIntervael(定时器对象)：清除setInterval创建定时器
setTimeout：延时时间到了，就去调用这个回调函数，只回调一次，就结束了这个定时器
setInterval每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

每秒切换图片

  <img src="../img/1.png" alt="" id="d1">
    <script>
        var dd = document.getElementById('d1');
        debugger;
        var num = 1;
        function move() {
            if (num > 8) {
                num = 1;
            }
            dd.src = `../img/${num}.png`
            num++
        }
        setInterval(move, 1000);

事件处理

概念：用户在页面中进行的某种操作

click 单击事件名 ----- onlick
load 页面加载事件名 — onload

事件处理程序：某个事件发生时，执行的程序；

document对象获取页面元素的 (标签) 方法
getElementByld(标签的id属性值) ：浏览器都支持
querySelector();
- 通过Id选择 : document.querySelector(‘#id’)
- 通过class选择：document.querySelector(‘.class’)
- 通过标签名选择：document.querySelector(标签名)

事件监听

在标签中监听

<button onclick="show">开始</button> //监听click事件

 <!-- 第一种在标签里面写事件 onclick="里面是函数" -->
    <button onclick="maka()">开始</button>
    <script>

        var tt = null;
        // 定义一个函数
        function maka() {
            setTimeout(function () {
                alert(`玛卡巴卡`)
            }, 1000)
        }
    </script>

  <!-- 第二种办法给标签起一个id -->
    <button id="btn">开始吧</button>
    <!-- 开始写js -->
    <script>
        var tt = null;
        function time() {
            tt = setTimeout(function(){
                alert('111111')
            },1000)
        }

        let ccc =  document.querySelector('#btn');//拿到页面中button标签
        ccc.addEventListener('click',time)//开始写事件监听（事件，要执行的函数名）
    </script>

将页面中的按钮和Input联系在一起

    <input id="iiipp" type="text">
    <button id="btn_score">获取成绩</button>
    <script>
        var shuru = document.querySelector('#iiipp')
        var btn = document.querySelector('#btn_score');

        btn.addEventListener('click', function () {
            alert(shuru.value)
        })

    </script>

<body onload=""> //监听页面的加载事件load

在JavaScript程序中调用addEventListener函数来注册
- window.addEventListener（‘事件名’，fn）
  - 参数fn ：是一个函数，表示事件处理程序

open函数

作用打开一个窗口

open(url,specs,replace)；

url：同意资源定位符（网址），格式协议://主机名：端口号/文件路径

http：超文本传输控制协议

练习1：打开窗口

 var myWindow;
        function openWin() {
            myWindow = window.open('https://user.qzone.qq.com/1160223602/main', 'newwin', 'width=800,height=200,left=200');
            myWindow.document.write('<p>窗口名称为：' + myWindow.name + '</p>');
            myWindow.document.write('<p>当前窗口的父窗口地址：' + myWindow.parent.location + '</p>');

        } 
1.open函数会返回一个窗口对象，将该对象赋给变量mywindow
2.mywindow.name打开的窗口name属性 --- 'newwin'
  name属性：表示窗口对象的名称
3.window。parent.location
window:指的是新打开的窗口的BOM的window对象
parent：上面window对象的属性，代表是外层窗口
locatgion:代表是外层窗口的浏览器地址栏

关闭窗口:

标签的属性

innerHTML属性
- 代表标签的Html内容（代表起始标签和结束标签之间的内容）

事件注册方式

写在页面标签中 onclick

<button onclick='函数名'>   </button>

使用addEventListener注册：

对象名.aaddEventListener('事件名','事件处理函数')

使用函数表达式

let/var  变量名  = fuction(){}
注册事件的方式： 
   对象名.onclick = function([参数]){}

JS控制复选框

复选框组：将所有复选框的name属性值定义成一样的
复选框的事件：change 当复选框的状态发生改变时触发

screen对象

返回当前窗口与屏幕相关的信息
属性
- width / height :屏幕的宽度和高度