一、BOM浏览器对象模型
BOM
属性：
①window.navigator是一个对象
⚫ navigator 对象下包含有许多信息，如 platform、userAgent
⚫ onLine 属性检测当前是否处理联网状态
⚫ geolocation 属性可以获取用户所在经纬度位置
⚫ 注：众多的信息中有许多并不准确，如 appName、appCodeName等。
②History：history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
⚫ length 属性记录了与当前页页相关的页面的数量
⚫ back 方法跳转至上一个链接地址对应的页面，与浏览器的后退操作一致
⚫ forward 方法跳转至下一个连接地址对应的页面，与浏览器的前端操作一致
⚫ go 方法跳转到历史记录中任一链接地址对应的页面，参数可以正数也可以是负数
③location:地址栏,location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分,URL 即我们平时所说的链接地址，它有着固定的格式如下图所示：协议、主机、端口、路径、参数、哈希。
⚫ location,.href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
⚫ search 属性获取地址中携带的参数，符号 ？后面部分
⚫ hash 属性获取地址中的啥希值，符号 # 后面部分
⚫ reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
⚫ assign：方法用于加载指定的url，会产生历史记录
⚫ replace：方法用于替换url，不会产生历史记录
④screen:screen 属性的数据类型是对象，它记录用户电脑屏幕的相关参数，如宽度、高度等(该对象的使用场景并不多)
⚫ Screen.width
⚫ Screen.height
二、了解window对象------顶级对象，全局对象
1、 方法：
⚫ Alert
⚫ 总结：警告提示框会阻程序继续执行，直到用户点击确认后。
⚫ Comfirm
⚫ 总结：用户点击确定返回值为 true ，点击取消返回值为 false。
⚫ Prompt
⚫ 总结：传入第 2 个参数可以充当默认值。
2.事件
⚫ load 会等待所有的资源（图片、样式、脚本、音视频等）加载完毕后才触发
⚫ DOMContentLoaded 只要 HTML 结构加载完毕就会被触发，该事件通过 document 进行监听
⚫ 将 script 标签写在 head 标签中时，查找 DOM 会失败
⚫ 由于 DOMContentLoaded 比 load 更早被触发，因此通常推荐使用 load 事件
①beforeunload：该事件会在即将离开当前页面时被触发，一般用于提示用户即将离开某个页面，用户可以阻止页面刷新和者跳转。
② resize：该事件会在浏览器窗口大小调整时被触发。documentElement 能够获得视口的大小------基于 resize 可以动态计算 html 的字号大小，完成移动端 rem 屏幕适配
三、文件读取
出于安全性考虑 JavaScript 无法直接读取用户本地的文件，必须由用户主动选择才能对本地文件进行读取，有两种方式引导用户做出选择：<input type="file"> 和文件拖拽
文件拖拽drag：用户将文件直接拖拽至网页中的某个标签中，然后对文件进行读取
⚫ 用户拖动文件至监听了 dragover 事件的元素之上时，dragover 事件就会被触发
⚫ 用户拖动文件至监听了 drop 事件的元素之上然后松开拖拽文件时，drop 事件就会被触发
⚫ 事件对象 dataTransfer.files 是 File 类型对象，包含了文件的大小、名称、格式等信息
⚫ 通过 FileReader 实现文件的进行读取
④classList：是专门用于类名对象，该对象下包含了一些方法能够非常方便的进行类名的操作
⚫ add 用于为元素节点添加一个类名
⚫ remove 用于为元素节点删除一个类名
⚫ contains 用于检测是否包含某个类名
⚫ toggle 用于切换某个类名
四、自定义属性
data-*
⚫ 为了区分 HTML 的标准属性，要求所有的自定义属性均为 data- 做为固定的前缀，形如 data-src、data-my-info
⚫ 上述代码中 info、extra、abc-bcd 即自定义属性，data- 是语法前缀
dataset
⚫ 自定义属性的作用是帮助完成逻辑，所以获取自定义属性尤为重要。通过 DOM 节点的 dataset 属性可以获取所有的自定义属性，也可以重新为自定义属性赋值，通过 dataset 赋值的自定义属性不存在时，会自动添加
自定义属性使用 - 连接时，要采用驼峰命名规则
网友评论