JS BOM（浏览器对象模型）

一.JavaScript的组成

JavaScript由ECMAScript，BOM，DOM组成；

1.ECMAScript是一种语法标准语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象编码遵循ECMAScript标准。

2.BOM：Browser Object Model（浏览器对象模型）

 提供了独立于内容与浏览器窗口进行交互的对象。

3.DOM：Document Object Mode.（文档对象模型）

DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作HTML和XML功能的一类对象的集合，也有人称DOM是对HTML及XML的标准编程接口。

二.BOM 浏览器对象模型

1.window对象常用属性

（1）screen

说明：有关客户端的屏幕和显示性能的信息

属性：

screen.width/height - 屏幕的宽度/高度

screen.availWidth/availHeight - 除任务屏幕的宽度/高度

window.innerWidth/innerHeight - 屏幕的可视化宽度/高度;

（2）history

说明：有关客户访问过的URL的信息

属性：

history.forward() - 浏览器回到下一步

history.back() - 浏览器返回上一步

history.go(1) == history.forward()

history.go(-1) == history.back();

（3）location

说明：有关当前URL信息

属性：

location.reload() - 刷新

location.reload(true) - 刷新并强制更新缓存

location.href - 地址信息（全）

location.protocol - 协议 http：

location.hostname - 域名 www.baidu.com

location.port - 端口号：8080

location.pathname - 地址 /javascript/index.html

location.search - 查询 ？name=gxy&age=20

location.hash - 哈希值（锚点-？后面的值）

（4）navigator

说明：有关当前浏览器的信息

属性：

navigator.userAgent - 浏览器的头信息

判断当前浏览器是否是手机浏览器？

if（（navigator.userAgent）.includes（"mobile"））{

document.write("手机浏览器")

}else{

document.write("pc浏览器")

}

2.window对象的常用方法

（1）prompt：显示可提示用户输入的对话框；

（2）alert：显示一个提示信息和一个确定按钮的警示框

（3）confirm：显示一个带有提示信息和确定，取消按钮的对话框

（4）open方法

说明：打开一个新的浏览器窗口，加载给定的URL所指定的文档

语法：

window.open（URL，name，feature）

URL：打开文件的地址

name：名称

feature：声明浏览器的特征

（5）setTimeout：定时器

（6）setInterval：计时器

3.window对象的常用事件

（1）onload

说明：一个页面或一幅图像完成加载 在对象已加载时触发

（2）onresize

说明：当窗口发生大小变化

语法：

window.οnresize=function(){
                console.log("窗口大小变化");
                console.log("</br>宽"+window.innerWidth+",高"+window.innerHeight)
        }

（3）onscroll

说明：滚动条滚动事件

获取窗口滚动的垂直方向距离：

document.documentElement.scrollTop

获取窗口滚动的水平方向距离：

document.documentElement.scrollLeft

4.编码

（1）转/解URL编码

encodeURL（str）；

decodeURL（"%E4%B8%AD%E5%9B%BD"）;

（2）转/解URL编码  包含标点符号

encodeURLComponent；

decodeURLComponent；

（3）如何实现图片上传实时预览？

<input type="file" id="myf" οnchange="preimg()">
        <img src="" alt="" id="mypic">
        <script>
            function preimg() {
                var file = myf.files[0];//只取列表的第一个文件
                // 把图片转换为base46码
                // create创建object对象字符串编码
                var str = URL.createObjectURL(file)
                mypic.src = src
            }
        </script>