BOM思维导图_思维导图画bom-CSDN博客

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

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 οnclick="newPage()">载入新页面</button>
     <button οnclick="replacePage()">刷新页面</button>
     <button οnclick="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的方法：

'路径名：', location.pathname); '请求字符串（参数）', location.search); '主机名', location.host); '网络协议', location.protocol); '端口号', location.port);

assign(url)：载入新的文档

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

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

属性：
- href：表示url地址
- C/S结构：Client/Server --- 客户端/服务端结构
- B/S结构：Browser/Server --- 浏览器/服务器结构

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每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

事件处理

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

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

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

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

事件监听

在标签中监听

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

  <!-- 第一种在标签里面写事件 οnclick="里面是函数" -->
     <button οnclick="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 οnclick='函数名'>   </button>

使用addEventListener注册：

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

使用函数表达式

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

JS控制复选框

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

screen对象

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