关于javascript:JS中的DOM和BOM

明天开始咱们开始应用 js 去操作浏览器和页面中的 html 元素了

BOM（Browser Object Model）：浏览器对象模型
其实就是操作浏览器的一些能力
咱们能够操作哪些内容
- 获取一些浏览器的相干信息（窗口的大小）
- 操作浏览器进行页面跳转
- 获取以后浏览器地址栏的信息
- 操作浏览器的滚动条
- 浏览器的信息（浏览器的版本）
- 让浏览器呈现一个弹出框（alert/confirm/prompt）
BOM 的外围就是 window 对象
window 是浏览器内置的一个对象，外面蕴含着操作浏览器的办法

innerHeight 和 innerWidth

这两个办法别离是用来获取浏览器窗口的宽度和高度（蕴含滚动条的）

var windowHeight = window.innerHeight
console.log(windowHeight)

var windowWidth = window.innerWidth
console.log(windowWidth)

alert 是在浏览器弹出一个提示框
```
window.alert('我是一个提示框')
```
- 这个弹出层常识一个提醒内容，只有一个确定按钮
- 点击确定按钮当前，这个提示框就隐没了
confirm 是在浏览器弹出一个询问框
```
var boo = window.confirm('我是一个询问框')
console.log(boo)
```
- 这个弹出层有一个询问信息和两个按钮
- 当你点击确定的时候，就会失去 true
- 当你点击勾销的时候，就会失去 false
prompt 是在浏览器弹出一个输入框
```
var str = window.prompt('请输出内容')
console.log(str)
```
- 这个弹出层有一个输入框和两个按钮
- 当你点击勾销的时候，失去的是 null
- 当你点击确定的时候失去的就是你输出的内容

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

location.href 这个属性存储的是浏览器地址栏内 url 地址的信息
```
console.log(window.location.href)
```
- 会把中文编程 url 编码的格局

location.href 这个属性也能够给他赋值

window.location.href = './index.html'
// 这个就会跳转页面到前面你给的那个地址

location.reload() 这个办法会从新加载一遍页面，就相当于刷新是一个情理
```
window.location.reload()
```
- 留神：不要写在全局，不然浏览器就会始终处在刷新状态

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

history.back 是用来会退历史记录的，就是回到前一个页面，就相当于浏览器上的 ⬅️ 按钮
```
window.history.back()
```
- 前提是你要有上一条记录，不然就是始终在这个页面，也不会回退

history.forword 是去到下一个历史记录外面，也就是去到下一个页面，就相当于浏览器上的 ➡️ 按钮
```
window.history.forward()
```
- 前提是你要之前有过回退操作，不然的话你当初就是最初一个页面，没有下一个

window 中有一个对象叫做 navigator
是专门用来获取浏览器信息的

navigator.userAgent 是获取的浏览器的整体信息

console.log(window.navigator.userAgent)
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

navigator.appName 获取的是浏览器的名称
```
console.log(window.navigator.appName)
```

navigator.appVersion 获取的是浏览器的版本号
```
console.log(window.navigator.appVersion)
```

navigator.platform 获取到的是以后计算机的操作系统
```
console.log(window.navigator.platform)
```

这个不在是对象了，而是一个事件

是在页面所有资源加载结束后执行的

window.onload = function () {console.log('页面曾经加载结束')
}

<html>
  <head>
    <meta charset="UTF-8" />
    <script>
      // 这个代码执行的时候，body 还没有加载
      // 这个时候咱们就获取不到 body 中的那个 div
      
      // 就须要应用 window.onload 事件
      window.onload = function () {
        // 这个函数会在页面加载结束当前在执行
        // 那么这个时候页面的 DOM 元素都曾经加载了，咱们就能够获取 div 了
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div></div>
    
    <script>
        // 这个代码执行的时候，body 曾经加载结束了
      // 在这里就能够获取到 div，写不写 window.onload 就无所谓了
      
      window.onload = function () {
        // 这个函数会在页面加载结束当前在执行
        // 那么这个时候页面的 DOM 元素都曾经加载了，咱们就能够获取 div 了
      }
    </script>
  </body>
</html>

这个 onscroll 事件是当浏览器的滚动条滚动的时候触发
或者鼠标滚轮滚动的时候登程
```
window.onscroll = function () {console.log('浏览器滚动了')
}
```
- 留神：前提是页面的高度要超过浏览器的可是窗口才能够

浏览器内的内容即然能够滚动，那么咱们就能够获取到浏览器滚动的间隔
思考一个问题？
- 浏览器真的滚动了吗？
- 其实咱们的浏览器是没有滚动的，是始终在那里
- 滚动的是什么？是咱们的页面
- 所以说，其实浏览器没有动，只不过是页面向上走了
所以，这个曾经不能单纯的算是浏览器的内容了，而是咱们页面的内容
所以不是在用 window 对象了，而是应用 document 对象

获取的是页面向上滚动的间隔
一共有两个获取形式
- 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
  - Chrome 和 FireFox
    - 没有 DOCTYPE 申明的时候，用 document.body.scrollTop
    - 有 DOCTYPE 申明的时候，用 document.documentElement.scrollTop
  - Safari
    - 两个都不必，应用一个独自的办法 window.pageYOffset

获取页面向左滚动的间隔

也是两个办法

document.body.scrollLeft

document.documentElementLeft

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

两个之间的区别和之前的 scrollTop 一样

在 js 外面，有两种定时器，倒计时定时器 和 距离定时器

倒计时多少工夫当前执行函数
语法：setTimeout(要执行的函数，多长时间当前执行)
会在你设定的工夫当前，执行函数
```
var timerId = setTimeout(function () {console.log('我执行了')
}, 1000)
console.log(timerId) // 1
```
- 工夫是依照毫秒进行计算的，1000 毫秒就是 1 秒钟
- 所以会在页面关上 1 秒钟当前执行函数
- 只执行一次，就不在执行了
- 返回值是，以后这个定时器是页面中的第几个定时器

每距离多少工夫就执行一次函数
语法：setInterval(要执行的函数，距离多少工夫)
```
var timerId = setInterval(function () {console.log('我执行了')
}, 1000)
```
- 工夫和方才一样，是依照毫秒进行计算的
- 每距离 1 秒钟执行一次函数
- 只有不敞开，会始终执行
- 返回值是，以后这个定时器是页面中的第几个定时器

设置定时器的时候，他的返回值是局部 setTimeout 和 setInterval 的

只有有一个定时器，那么就是一个数字

var timerId = setTimeout(function () {console.log('倒计时定时器')
}, 1000)

var timerId2 = setInterval(function () {console.log('距离定时器')
}, 1000)

console.log(timerId) // 1
console.log(timerId2) // 2

咱们方才提到过一个 timerId，是示意这个定时器是页面上的第几个定时器
这个 timerId 就是用来敞开定时器的数字

咱们有两个办法来敞开定时器 clearTimeout 和 clearInterval

var timerId = setTimeout(function () {console.log('倒计时定时器')
}, 1000)
clearTimeout(timerId)

敞开当前，定时器就不会在执行了

var timerId2 = setInterval(function () {console.log('距离定时器')
}, 1000)
coearInterval(timerId2)

敞开当前定时器就不会在执行了

原则上是
- clearTimeout 敞开 setTimeout
- clearInterval 敞开 setInterval

然而其实是能够通用的，他们能够混着应用

var timerId = setTimeout(function () {console.log('倒计时定时器')
}, 1000)
// 敞开倒计时定时器
clearInterval(timerId)

var timerId2 = setInterval(function () {console.log('距离定时器')
}, 1000)
// 敞开距离定时器
clearTimeout(timerId2)

DOM（Document Object Model）：文档对象模型
其实就是操作 html 中的标签的一些能力
咱们能够操作哪些内容
- 获取一个元素
- 移除一个元素
- 创立一个元素
- 向页面外面增加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素增加一些 css 款式
- …
DOM 的外围对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象，外面存储着专门用来操作元素的各种办法
DOM：页面中的标签，咱们通过 js 获取到当前，就把这个对象叫做 DOM 对象

通过 js 代码来获取页面中的标签
获取到当前咱们就能够操作这些标签了

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

因为在一个页面中 id 是惟一的，所以获取到的就是一个元素

<body>
  <div id="box"></div>
  <script>
      var box = document.getElementById('box')
      console.log(box) // <div></div>
  </script>
</body>

获取到的就是页面中的那个 id 为 box 的 div 标签

getElementsByClassName 是用过标签的 class 名称来获取标签的
因为页面中可能有多个元素的 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>
```
- 获取到的是一组元素，是一个长得和数组一样的数据结构，然而不是数组，是伪数组
- 这个一组数据也是依照索引排列的，所以咱们想要精确的拿到这个 div，须要用索引来获取

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 是依照选择器的形式来获取元素
也就是说，依照咱们写 css 的时候的选择器来获取

这个办法只能获取到一个元素，并且是页面中第一个满足条件的元素

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

querySelectorAll 是依照选择器的形式来获取元素

这个办法能获取到所有满足条件的元素，以一个伪数组的模式返回

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

获取到的是一组数据，也是须要用索引来获取到精确的每一个 DOM 元素

通过咱们各种获取元素的形式获取到页面中的标签当前
咱们能够间接操作 DOM 元素的属性，就能间接把成果展现在页面上

获取元素外部的 HTML 构造

<body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

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

设置元素的内容

<body>
  <div></div>

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

设置完当前，页面中的 div 元素外面就会嵌套一个 p 元素

获取元素外部的文本（只能获取到文本内容，获取不到 html 标签）

<body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div')
    console.log(div.innerText) // hello
  </script>
</body>

能够设置元素外部的文本
```
<body>
  <div></div>

  <script>
    var div = document.querySelector('div')
       div.innerText = '<p>hello</p>'
  </script>
</body>
```
- 设置结束当前，会把 <p>hello</p> 当作一个文本呈现在 div 元素外面，而不会把 p 解析成标签

获取元素的某个属性（包含自定义属性）

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

  <script>
    var div = document.querySelector('div')
       console.log(div.getAttribute('a')) // 100
    console.log(div.getAttribute('class')) // box
  </script>
</body>

给元素设置一个属性（包含自定义属性）

<body>
  <div></div>

  <script>
    var div = document.querySelector('div')
       div.setAttribute('a', 100)
    div.setAttribute('class', 'box')
    console.log(div) // <div a="100" class="box"></div>
  </script>
</body>

间接移除元素的某个属性

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

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

专门用来给元素增加 css 款式的

增加的都是行内款式

<body>
  <div></div>

  <script>
    var div = document.querySelector('div')
       div.style.width = "100px"
    div.style.height = "100px"
    div.style.backgroundColor = "pink"
    console.log(div) 
    // <div style="width: 100px; height: 100px; background-color: pink;"></div>
  </script>
</body>

页面中的 div 就会变成一个宽高都是 100，背景色彩是粉色

专门用来操作元素的类名的

<body>
  <div class="box"></div>

  <script>
    var div = document.querySelector('div')
       console.log(div.className) // box
  </script>
</body>

也能够设置元素的类名，不过是全笼罩式的操作

<body>
  <div class="box"></div>

  <script>
    var div = document.querySelector('div')
       div.className = 'test'
    console.log(div) // <div class="test"></div>
  </script>
</body>

在设置的时候，不论之前有没有类名，都会全副被设置的值笼罩

BOM

获取浏览器窗口的尺寸

浏览器的弹出层

浏览器的地址信息

location.href

location.reload

浏览器的历史记录

history.back

history.forword

浏览器的版本信息（理解）

navigator.userAgent

navigator.appName

navigator.appVersion

navigator.platform

浏览器的 onload 事件

在 html 页面中把 js 写在 head 外面

在 html 页面中把 js 写在 body 最初面

浏览器的 onscroll 事件

浏览器滚动的间隔

scrollTop

scrollLeft

定时器

倒计时定时器

距离定时器

定时器的返回值

敞开定时器

DOM（上）

获取一个元素

getElementById

getElementsByClassName

getElementsByTagName

querySelector

querySelectorAll

操作属性

innerHTML

innerText

getAttribute

setAttribute

removeAttribute

style

className