JavaScript基础学习——BOM操作

2021-08-10 12:07:28

一、认识BOM

JS是由ECMAScript（ECMA）、DOM（W3C）和BOM（无规范）。BOM(Browser Object Model：浏览器对象模型)，提供了独立于内容而与浏览器进行交互的对象，用它来实现窗口与窗口之间的通信。BOM的核心对象是window。

1、BOM组成

window - frames history location navigator screen

2、BOM与DOM的区别

（1）DOM通过脚本动态地访问和更新文档内容、结构和样式的接口。
（2）BOM通过脚本操作浏览器的各个功能组件的接口。

区别：
（1）DOM提供了处理网页内容的接口，而BOM提供了与浏览器交互的接口；
（2）DOM的核心是document，BOM的核心是window。

二、window对象

打开一个浏览器，就自动创建了一个window对象。window就是浏览器打开的窗口。

1、常用属性

1.1、document 文档结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
<script>
    console.log(document)
    document.body.style.background = '#eee'
</script>
</html>

1.2、history 跳转的历史记录

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
<script>
    console.log(history)
</script>
</html>

1.3、location 操作地址栏

1.4、navigator 浏览器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    console.log(navigator)
  </script>
</body>
</html>

1.5、opener 引用创建的这个新窗口的窗口

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="button" onclick="openWindow()" value="打开一个新的窗口">
  <script>
     function openWindow(){
       newWindow = window.open('','','width=400,height=200');
       newWindow.document.write('<h2>这是我创建的窗口</h2>');
       newWindow.focus();
       newWindow.opener.document.write('<p>这是之前的窗口</p>'); // 引用创建的这个新窗口的窗口
     }
     console.log(status)
  </script>
</body>
</html>

1.6、screen 屏幕

1.7、screenX 窗口位于屏幕的x坐标

1.8、screenY 窗口位于屏幕的y坐标

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
     console.log(screen)
     console.log(screenX,screenY)
  </script>
</body>
</html>

1.9、name 窗口名

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    window.name = '这是新创建的窗口'
    console.log(name)
  </script>
</body>
</html>

1.10、status 状态栏（目前主要是欧朋支持，其它浏览器都不支持。大多数浏览器都关闭这一功能，目的是为了避免被钓鱼攻击）

2、常用方法

2.1、alert() 显示一个警告框

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    window.alert('这是一个警告')
  </script>
</body>

</html>

2.2、confirm() 显示带有确认按钮和取消按钮的对话框

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var isTrue = confirm('您真的要退出吗（Y/N）？')
    console.log(isTrue)
    if(isTrue){
      window.close()
    }
  </script>
</body>

</html>

2.3、prompt() 显示可接受用户输入的对话框

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var name = prompt('请输入您的姓名：'); 
    console.log(name)
  </script>
</body>

</html>

2.4、open() 打开一个新的浏览器窗口或查找一个已命名的窗口
open(url,name,attr,replace)
url: 要跳转的网址或要打开的文件或创建一个窗口(url为空时)
name：窗口名或_blank _self _parent _top
attr：窗口设置
replace： true/false true表示添加到历史记录中,false则反

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <a href="javascript:void(1);" onclick="jump()">百度</a>
  <script>
    function jump() {
      /* open('https://baidu.com','百度','')
      open('https://sina.com.cn','百度','') */

      // open('https://baidu.com','百度','')
      // open('https://sina.com.cn','新浪','')

      // open('https://sina.com.cn','_blank','')
      // open('https://sina.com.cn','_self','')
      // open('https://sina.com.cn','','width=400,height=400')
      open('https://sina.com.cn', '_self', '', false)
    }


  </script>
</body>

</html>

2.5、close() 关闭浏览器窗口

2.6、scrollTo() 把内容滚动到指定的坐标设置滚动条的位置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button onclick="scrollWin()">滚动到指定的位置</button>
  <script>
    function scrollWin() {
      scrollTo(100, 400)
    }
  </script>
</body>

</html>

2.7、setInterval() 按照指定的毫秒周期来调用函数或计算表达式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="button" onclick="stop()" value="停止">
  <script>
     var timer = null;
     timer = setInterval(function(){
       console.log('<p>' + new Date() +'</p')
     },1000)
 
     function stop(){
       clearInterval(timer)
     } 
  </script>
</body>

</html>

2.8、setTimeout() 在指定的毫秒数后调用函数或计算表达式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
     var timer1 = setTimeout(function(){
       console.log('<p>' + new Date() +'</p')
     },1000)
  </script>
</body>

</html>

clearInterval() 取消由 setInterval() 方法设置的 timeout 无

clearTimeout() 取消由 setTimeout() 方法设置的 timeout 无

setTimeout与setInterval的区别：
相同点：
都是计时（定时）器，都是在指定的时间重复（一次）执行对应的代码。
都是异步执行的。

不同点：
setTimeout在指定时间到了之后只执行一次对应的代码。（只执行一次）
setInterval在指定时间到来之前重复执行对应的代码。（不停地循环）

计时如果不需要时，一定要做清除处理。定义计时器时，最好初值设置为null（垃圾回收机制）

三、location对象
用来获取或设置url。
获取或设置url地址信息、页面跳转（重定向）、页面刷新等。

1、常用属性
location.hash 设置或取得 URL 中的锚
location.host 设置或取得 URL 中主机（包括端口号）
location.hostname 设置或取得 URL 中的主机名
location.href 设置或取得完整 URL（页面重定向应用）
location.pathname 设置或取得 URL 中的路径
location.port 设置或取得 URL 中的端口号
location.protocol 设置或取得 URL 使用的协议
location.search 设置或取得 URL 中的查询字串（一般是 ? 符号后面的内容） ?username=张三&sex=男

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script    console.log(location.hash)
    var x = location
 console.log('host:',x.host,'hostname:',x.hostname,'href:',x.href,'pathname:',x.pathname,'port:',x.port)
    console.log('protocol:',x.protocol,'search:',x.search)
    var url = 'http://192.168.0.103:8080/A7.html?username=zhangsan&sex=male#/classic/type'
  </script>
</body>
</html>

2、常用方法

2.1、location.assign()：加载新页面文档与location.href功能一样，用法一样，只是href是属性，而assign是一个方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="toBaidu()">百度</button>
  <script>
    function toBaidu(){
      location.assign('https://baidu.com')
    } 
  </script>
</body>
</html>

2.2、location.reload()：重新加载（刷新）当前页面，reload(true/false)：默认为false。true表示重新从服务器下载，实现刷新；而false表示从缓存中获取刷新页面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    location.reload()
  </script>
</body>
</html>

2.3、location.replace()：用新的文档替代当前文档，与location.assign()和location.href的区别是：replace不能将跳转的路径写到历史记录中，也是即是跳转后不能返回

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="toBaidu()">百度</button>
  <script>
    function toBaidu(){
      location.assign('https://baidu.com')
    }
  </script>
</body>
</html>

四、navigator

通过navigator对象获取浏览器相关信息，用于判断该浏览器是哪个浏览器，以及厂商等。

常用属性：
navigator.appName 取得浏览器的名称
navigator.appVersion 取得浏览器的平台和版本信息
navigator.userAgent 得到浏览器相关信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // navigator.appName 取得浏览器的名称
    console.log(navigator.appName)
    // navigator.appVersion  取得浏览器的平台和版本信息
    console.log(navigator.appVersion)
    // navigator.userAgent 得到浏览器用于 HTTP 请求的用户代理头的值
    console.log(navigator.userAgent)
  </script>
</body>
</html>

五、Screen对象

用于获取客户端屏幕相关信息。

常用属性：
availHeight: 屏幕高度（不包含任务栏）
availWidth: 屏幕宽度（不包含任务栏）
colorDepth: 颜色深度
height: 显示屏幕的高度（包含任务栏）
width: 显示屏幕的宽度（包含任务栏）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    console.log(screen)
  </script>
</body>
</html>

6.history对象

用来记录用户在客户端访问的url。

属性：length：返回历史记录的条数。

方法：

6.1、forward():跳转到下一个history中的url，如果history中没有url，将停留在当前页面

6.2、back():返回到上一个history中的url，如果history中没有url，将停留在当前页面

6.3、go(num|url): go(-1)相当于back()，go(1)相当于forward()，go(0)刷新当前页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>这是首页</p>
  <button onclick="toNext()">href</button>
  <button onclick="forwardPage()">forward</button>
  <button onclick="goPage()">go</button>
  <script>
    /* 
    forward():跳转到下一个history中的url，如果history中没有url，将停留在当前页面
    back():返回到上一个history中的url，如果history中没有url，将停留在当前页面
    go(num|url): go(-1)相当于back()，go(1)相当于forward()，go(0)刷新当前页面 */
    console.log(history)
    function toNext(){
      // location.href = './test1.html'  // 将跳转的url写入到history
      location.replace('./test1.html')  // 跳转的url不会写入到history，执行的是url的替换
    }
    function forwardPage(){
      history.forward()
    }
    function goPage(){
      history.go(1)
    }
  </script>
</body>
</html>

码农公寓

相关文章