BOM 的概念和常用 API

BOM(Browser Object Model): 浏览器对象模型
- 其实就是操作浏览器的一些能力
我们可以操作哪些内容?
- 获取浏览器的相关信息(窗口大小)
- 操作浏览器进行页面的跳转
- 获取当前浏览器地址栏的信息
- 操作浏览器的滚动条
- 浏览器的信息(浏览器的版本)
- 让浏览器出现一个弹出框(alert/prompt/confirm)
- ...
BOM 的核心就是 window 对象
window 是浏览器内置的一个对象, 里面包含着操作浏览器的方法

获取浏览器窗口的尺寸

innerHeight 和 innerWidth
- 作用: 获取浏览器窗口的高度和宽度(包含滚动条)
- 语法:
```
  window.innerHeight; window.innerWidth
```

获取浏览器窗口的尺寸

innerHeight 和 innerWidth
- 作用: 获取浏览器窗口的高度和宽度(包含滚动条)
- 语法: `window.innerHeight; window.innerWidth

浏览器的地址信息

在 window 中有一个对象叫做 location, 他是专门用来存储浏览器地址栏内的信息

location.href

location.href 专门存储浏览器地址栏内 url 地址的信息
语法: var url = window.location.href
我们也可以给这个属性赋值, 这样就会跳转到我们复制的地址了
```
  window.location.href = 'https://www.baidu.com'
```

location.reload

location.reload 会重新加载页面, 相当于刷新
注意: 不要写在全局内, 否则浏览器会一直刷新
```
  window.location.reload()
```

浏览器的历史记录

window 中有一个对象叫做 history 他专门用来存储历史记录信息

history.back

history.back 用来回退历史纪录的, 就是回到前一个页面, 相当于浏览器左上角的 ← 按钮
注意: 我们需要有上一条记录, 不然就一直在这个页面不会回退
```
  window.history.back()
```

history.forward

history.forward 是去到下一个历史记录里面, 也就是去到下一个页面, 就相当于浏览器左上角的 → 按钮
注意: 前提是我们之前有过回退操作, 不然的话我们现在就是在最后一个页面, 没有下一个
```
  window.history.forward()
```

浏览器的版本信息(了解)

window 中的 navigator 可以获取到浏览器的信息

浏览器的 onload 事件

该事件会在页面所有资源加载完毕后执行

  window.onload = function () {
      console.log('页面已经加载完毕')
 }

在浏览器中, 把 JS 写在 head 中, JS 在加载时 DOM 还没加载完, 可能会导致获取 DOM 时出现问题, 但是如果把代码放在 onload 事件中, 则不会出现问题
如果把 JS 写在 body 底部, 则写不写 onload 都一样

浏览器的 onscroll 事件

当浏览器的滚动条滚动时会触发该事件, 或者鼠标滚轮滚动时触发

  window.onscroll = function () {
      console.log('浏览器滚动了')
  }

浏览器的滚动距离

浏览器的内容可以滚动, 那么我们就可以获取到浏览器滚动的距离
但是需要思考一个问题
- 浏览器真的滚动了吗?
- 其实浏览器没有滚动, 一直在那里, 滚动的是浏览器的页面
- 所以说: 其实浏览器没动, 只不过页面向上走了
所以这个已经不能单纯的算是浏览器的内容了, 而是我们页面的内容
所以不再是使用 window 对象了, 而是使用 document 对象

scrollTop

获取的事页面向上滚动的距离
- 两种方式
  - document.body.scrollTop
  - document.documentElement.scrollTop

    window.onscroll = function () {
         console.log(document.body.scrollTop) 
         console.log(document.documentElement.scrollTop)
}

区别
- IE 浏览器(了解)
  - 没有 DOCTYPE 声明的时候, 用这两个都行
  - 有 DOCTYPE 声明的时候, 只能用 document.documentElement.scrollTop
- Chorme 和 FireFox
  - 没有 DOCTYPE 声明的时候, 用 document.body.scrollTop
  - 有 DOCTYPE 声明的时候, 用 document.documentElement.scrollTop
- Safari
  - 两个都不用, 使用一个单独的方法 window.pageYOffset

scrollLeft

获取页面向左滚动的距离
- document.body.scrollLeft
- document.documentElement.scrollLeft

    window.onscroll = function () {
        console.log(document.body.scrollLeft)
        console.log(document.documentElement.scrollLeft)
    }

区别
- 参考 scrollTop

浏览器的本地存储

localStorage
- 浏览器本地存储, 持久存储, 一旦存储永久存在
- 只能存基础数据类型(一般为字符串), 不能存储复杂数据类型
- 可以跨页面通讯
  
  // 增 window.localStorage.setItem(key, value) // 删 window.localStorage.removeItem(key) // 清除 window.localStorage.clear() /**
  - 查
  - ```
   有      --->    返回对应的 value
```
- ```
 没有    --->    返回 Null
```
  */ window.localStorage.getItem(key)
sessionStorage
- 浏览器的本地存储, 临时存储, 关闭浏览器以后, 存储内容自动消失
- 想要跨页面通讯, 必须是从本页面跳转的才可以
  
  // 增 window.sessionStorage.setItem(key, value) // 删 window.sessionStorage.removeItem(key) // 清除 window.sessionStorage.clear() /**
  - 查
  - ```
   有      --->    返回对应的 value
```
- ```
 没有    --->    返回 Null
```
  */ window.sessionStorage.getItem(key)
cookie
1. 只能存储字符串, 有固定格式
  - key=value; key2=value2; key3=value3
2. 存储大小有限制
  - 4KB左右
3. 存储有时效性
  - 默认是会话级别时效, 但是可以手动设置过期时间
4. 操作必须依赖服务器
  - 本地打开的也页面时不能操作 cookie
  - 要求页面必须在服务器打开
5. 跟随前后端请求自动携带
  - 只要 cookie 空间中有内容的时候
  - 会在该页面和后端交互的过程中自动携带
6. 前后端操作
  - 前端可以使用 JS 来操作
  - 任意一个后端语言都可以操作
7. 存储依赖域名
  - 哪一个域名存储, 那一个域名使用
  - 不能跨域名通讯

本地存储的区别 (面试必问)

出现时间
- cookie: 有 JS 就有了
- storage: H5 出现后才有
存储大小
- cookie: 4k 左右
- storage: 20MB 左右
前后端交互
- cookie: 会随着当前页面的请求自动携带
- storage: 不会跟随请求自动携带
前后端操作
- cookie: 前后端语言都可以操作
- storage: 只能前端 JS 操作
过期时间
- cookie: 默认是会话, 可以手动设置过期时间
- storage: 不能手动设置

localStorage 和 sessionStorage 的区别
- 过期时间
  - localStorage: 永久存储, 除非手动清除
  - sessionStorage: 临时存储
- 跨页面通讯
  - localStorage: 直接跨页面通讯
  - sessionStorage: 只能是当前窗口跳转的页面才可以通讯
- 共同点
  - 只能存储字符串, 不能存储复杂数据类型
  - 存储其他数据类型的时候, 获取回来的也是字符串类型

DOM 的基本概念及操作

DOM(Document Object Model): 文档对象模型
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面中添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些 css 样式
- ...
DOM 的核心对象就是 document 对象
document 对象是浏览器内置的一个对象, 里面存储这专门用来操作元素的各种方法
DOM: 页面中的标签, 我们通过 JS 获取到以后, 就把这个对象叫做 DOM 对象

获取非常规元素

document.documentElement
document.head

document.body

  // 1. html
  var htmlEle = document.documentElement
  console.log(htmlEle)
  // 2. head
  var headEle = document.head
  console.log(headEle)
  // 3. body
  var bodyEle = document.body
  console.log(bodyEle)

获取常规元素

通过 JS 代码来获取页面中的标签, 获取后我们就可以操作这些标签

getElementById

getElementById 是通过标签的 ID 名称来获取标签的

因为页面中的 ID 是唯一的, 所以获取到的就是一个元素

  <body>
      <div id="box"></div>
      <script>
          var box = document.getElementById('box')
          console.log(box) // 页面中 ID 为 box 的标签
      </script>
  </body>

getElementsByClassName

getElementsByClassName 是通过标签的 class 名称来获取标签的
因为页面中可能会有多个元素的 class 名称一样, 所以获取到的是一组元素

哪怕页面中只有一个, 获取到的也是一组元素, 只不过这一组元素只有一个 DOM 元素

  <body>
  <div calss="box"></div>
  <script>
      var box = document.getElementsByClassName('box')
      console.log(box) // [<div></div>]
      console.log(box[0]) // <div></div>
  </script>
  </body>

注意!!! getElementsByClassName 是一组长得很像数组的数据解构, 但它不是数组, 我们叫这种数据结构为: 伪数组
这一组数据也是按照索引排列的, 所以我们想要准确的拿到这个 div, 需要用索引来获取

getElementsByTagName

getElementsByTagName 是通过标签的标签名称来获取标签饿
因为页面中可能有多个元素的标签名称一样, 所以获取到的是一组元素

哪怕只有一个这个标签名, 获取到的也是一组数据, 只不过一组数据中只有一个 DOM 元素

  <body>
  <div></div>
  <script>
       var box = document.getElementsByTagName('div')
      console.log(box) // [<div></div>]
      console.log(box[0]) // <div></div>
  </script>
  </body>

和 getElementsByClassName 一样, 获取到的是一个长得很像数组的元素
必须要用索引才能准确地到 DOM 元素

querySelector

querySelector 是按照选择器的方式来获取元素
也就是说, 按照我们写 css 的时候的选择器来获取
这个方法只能获取到一个元素, 并且是页面中第一个满足条件的元素

        console.log(document.querySelector('div'))  // 获取页面中第一个 div 元素
        console.log(document.querySelector('.box'))  // 获取页面中第一个 有 box 类名的元素
        console.log(document.querySelector('#box'))  // 获取页面中第一个 id 名为 box 的元素

querySelectorAll

querySelectorAll 是按照选择器的方式来获取元素
这个方法能获取到所有满足条件的元素, 以一个伪数组的形式返回

        console.log(document.querySelectAll('div')) // 获取页面中的所有的 div 元素
        console.log(document.querySelectAll('.div')) // 获取页面中的所有的 类名为 box 的元素

获取到的是一组数据, 也是需要用索引来获取到准确的每一个 DOM 元素

操作属性

我们获取到元素后, 可以直接操作 DOM的属性, 然后直接把效果展示在页面上

innerHTML

获取元素内部的 HTML 解构

        <div>
            <p>
                <span>hello</span>
            </p>
        </div>
        var div = document.querySelector('div')
                console.log(div.innerHTML)    // <p><span>hello</span></p>

设置元素内部的 HTML 解构

        <div></div>
        var div = document.querySelector('div')
        div.innerHTML = '<p><span>hello</span></p>'

innerText

获取元素内部的文本(只能获取到文本, 获取不到 html 标签)

        <div>
            <p>
                <span>hello</span>
            </p>
        </div>
        var div = document.querySelector('div')
        console.log(div.innerHTML)    // hello

设置元素内部的 HTML 解构

        <div></div>
        var div = document.querySelector('div')
        div.innerHTML = '<p><span>hello</span></p>'

会把 '
hello
' 当作一段文本出现在 div 元素内, 而不会吧 p 解析成标签

getAttribute

获取元素的某个属性(包括自定义属性)

        <div a="100" class="box"></div>

        var div = document.querySelector('div')
        console.log(div.getAttribute('a'))  // 100
        console.log(div.getAttribute('calss'))  // box

setAttribute

给元素设置的一个属性(包括自定义属性)

        <div></div>

        var div = document.querySelector('div')
        console.log(div.setAttribute('a', 100))
        console.log(div.setAttribute('calss', box))

removeAttribute

直接移出元素的某个属性

        <div a="100" class="box"></div>
        var div = document.querySelector('div')
        console.log(div.removeAttribute('calss'))

H5 自定义属性

在 H5 自定义属性中 data- 表示该属性是一个自定义属性
data- 以后的内容才是属性名
= 后面的内容才叫做属性值
每一个元素身上天生自带一个属性, 叫做 dataset, 是一个类似对象的数据结构
内部记录的是该元素身上所有 data- 开头的自定义属性
对于该元素 H5 自定义属性的操作, 就是对这个数据结构的操作(对象操作语法)

        <div data-a="100" class="box"></div>

        var oDiv = document.querySelector('div')
        // 增
        oDiv.dataset.age = 18
        // 删
        delete oDiv.dataset.a
        // 查
        console.log(oDiv.dataset.age)

style

专门用来个元素添加 css 样式的
添加的都是行内样式

        <div></div>

        var div = document.querySelector('div')
        div.style.width = '100px'
        div.style.hright = '100px'
        div.style.backgroundColor = 'pink'

className

专门用来操作元素的类名

        <div class='box'></div>

        var div = document.querySelector('div')
        console.log(div.className)  // box
        div.calssName = 'ceshi'
        console.log(div.calssName)  // ceshi

在设置的时候, 不管之前有没有类名, 都会全部被设置的值覆盖

JS笔记3

BOM 的概念和常用 API

获取浏览器窗口的尺寸

获取浏览器窗口的尺寸

浏览器的地址信息

location.href

location.reload

浏览器的历史记录

history.back

history.forward

浏览器的版本信息(了解)

浏览器的 onload 事件

浏览器的 onscroll 事件

浏览器的滚动距离

scrollTop

scrollLeft

浏览器的本地存储

本地存储的区别 (面试必问)

DOM 的基本概念及操作

获取非常规元素

获取常规元素

getElementById

getElementsByClassName

getElementsByTagName

querySelector

querySelectorAll

操作属性

innerHTML

innerText

getAttribute

setAttribute

removeAttribute

H5 自定义属性

style

className