javascript中的BOM

浏览器对象模型，提供了独立于内容而与浏览器进行交互的对象

文章目录

• window对象是浏览器的顶级对象

• 1.script中var声明变量和没有var声明的都是window全局变量
• 2.id命名的html节点也是window全局变量，可以直接用id.innerHTML访问内容
• 3.常用的window方法alert confirm prompt 定时器 延时器等 全部都是全局方法

• 一.window常见事件

• 1.window.onload是窗口加载事件 当文档内容全部加载完就会触发该事件
• 2.window.onresize当窗口大小发生变化时就会调用该处理函数
• 3.window.open可以用来打开一个新的窗口 可以控制窗口的链接，大小以及位置
• 3.1可以通过变量等于该方法 然后 变量.close() 关闭用open方法打开的窗口
• 4.window.onscroll 页面滚动时触发该函数
• window有哪三个常用的事件？1，2，4（第三个是一个比较老的API）;

• 二.location 

• 用于获取或设置窗口的URL 并且可以用于解析url
• 1.location.href 获取整个url
•                 .host返回域名
•                 .port 返回端口号
•                 .pathname路径
•                 .search 参数
•                 .hash 哈希值/锚点
• 2.location常见方法
• location.reload重新加载页面

• 三.history对象方法

• 与浏览器历史记录进行交互
• history.back后退
• history.forward前进
• history.go()需要参数 1前进 -1后退

• 四.最重要的ua浏览器的头信息，用来判断 是用的什么浏览器 或手机还是pc端

• var ua = navigator.userAgent;
          console.log(ua);//Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36 Edg/101.0.1210.47
          // 例 判断当前打开窗口为移动端还是pc端
          if (ua.includes("Mobile")) {
              console.log("移动端");
          } else {
              console.log("pc浏览器");
          }

• 五.screen查看当前打开网页的宽高

• 1.屏幕的宽高 screen.width/height
• 2.移动端屏幕的宽高screen.availWidth/acailHeight
• 3.浏览器可视区的宽高window.innerWidth/innerHeight可与window.onresize配合做出响应式布局。

• 六.scroll

• var t=document.documentElement.scrollTop;
          //获取页面垂直滚动距离

• (小知识)字符串拼接

•  var a="中国";
          var b="我爱";
          console.log(b+a);//我爱中国

• 七.编码转换utf-8

• window.encodeURI(“字符串”)；转为utf-8格式
• window.decodeURI(“utf-8编码”)；转为普通字符串（这两个默认不会转换标点符号）
• encodeURIComponent 标点符号转换
• decodeURIComponent 转回
• 八.如何预览图片

• <input type="file" id="file" onchange="fun()">
      <img src="" id="myImg" alt="" width="400px">
      <script>
          function fun() {
              var fileBtn = file.files[0]; //返回的多个图片（数组）中第一个字符串 
              var src = window.URL.createObjectURL(fileBtn);
              myImg.src = src;
          }
      </script>

• 总结

• 好好学习 天天向上