[TOC]

JavaScript是运行在浏览器上的一种脚本语言，有两部分组成，一是它的基本语法，而是由浏览器提供的WebApi，用于操作客户端网页的元素，如 HTML，CSS 等。

JavaScript之所以可以在浏览上面直接被执行，是因为浏览器中都有着自己的JS解析引擎，如 chrome的是 V8，firefox 的是 OrdinMonkey，Safiri 的是 JSCore， IE 的是 Chakra。这些解析引擎是可以直接执行js代码，不要进行编译。chrome 的 V8 解析引擎是最好的。

一 DOM

dom（document object model）文档对象模型
document 对象是其的最基本的一个对象，即用于管理 html文件，将 html 对象，其他的标签，属性，文本都是转化为对象由 document 来进行管理。可以看作一个树形结构，有层级关系

JavaScript 中的对象有三种类型

  1. 用户创建的对象，Object类型的实例变量
  2. 内建对象，如：Array，Date，Math 等
  3. 宿主对象，即 JavaScript 的运行环境，如运行在浏览器中，运行在 NodeJs 上，这个宿主也有自己提供的对象实例

1.1、获取节点

// 通过标签名获取元素
let els = document.getElementsByTagName('li')
console.log(els)

// 通过类名获取
let aaa = document.getElementsByClassName('aaa')
console.log(aaa)

// 通过id
let kk = document.getElementById('kk')
console.log(kk)

二 BOM

bom（browser object model）浏览器对象模型。

  1. window
  2. location
  3. screen
  4. navigator

  5. history

    2.1、window

    window对象，在 JavaScript 中使用的时候，可以直接省略该对象名，直接使用方法，因为 JavaScript 中如果直接声明的变量，都是挂载在 window 对象下的
    弹出框的三个方法：

  6. alert

  7. confirm

  8. prompt ```html 

    定时器的三个方法

1. setTimeout
1. setInterval
1. clearTimeout
1. clearInterval
```html
<script>
    // 延迟执行
    window.setTimeout(() => {
        console.log('延迟两秒执行')
    }, 2000)

    // 定时周期性执行
    setInterval(() => {
        console.log('每两秒执行一次')
    }, 2000)

    // 清除定时器
    let index = 0;
    let timer = setInterval(() => {
        index++;
        console.log('1s 执行一次')
        if (index === 10) {
            // 结束
            clearInterval(timer)
            console.log('清除定时器')
        }
    }, 1000)
</script>

    2.2、location

    location对象存储浏览器地址栏上的 url 信息，location 有很多属性用于获取到 url 的各个部分的数据，还可以用于页面跳转。

    <script>
    let href = location.href
    console.log(href)

    console.log(location.host,
        location.hostname,
        location.port,
        location.pathname,
        location.search)

    // 将 URL 的参数转化成 JSON
    let str = location.search.length > 0 ? location.search.substring(1) : ""
    let json = {}
    if (str.length > 0) {
        let arr = str.split('&')
        for (const str of arr) {
            let arr2 = str.split('=')
            const k = arr2[0]
            json[k] = arr2[1]
        }
        console.log(json)
    }

</script>

    浏览器跳转

    1. location.href 会产生历史记录，点击后退会返回前一个页面
    2. location.replace 方法，跳转后不能返回前一个页面

    3. location.reload() 刷新页面

      setTimeout(() => {
const url = 'https://search.bilibili.com/all?keyword=JavaScript%20bom'
location.href = url
location.replace(url)
}, 2000)

      2.3、navigator

      ```html 

      <a name="ebQGv"></a>
## 2.4、history
history对象记录的是浏览器的浏览历史<br />go(num)：可以对浏览器页面进行前进或者后退，num取值：正数表示前进，负数表示后退
```javascript
setTimeout(() => {
    history.go() // 也表示刷新当前页面， 和 location.reload() 效果一样
}, 2000)

      三 AJax

      四 Canvas

      五 JS内置对象