Webapis Bom操作

发布于:2023-01-20 ⋅ 阅读:(12) ⋅ 点赞:(0) ⋅ 评论:(0)

 BOM

⚫ BOM(Browser Object Model ) 是浏览器对象模型

⚫ window对象是一个全局对象,也可以说是JavaScript中的顶级对象

⚫ 像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。

⚫ 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

⚫ window对象下的属性和方法调用的时候可以省略window

定时器-延时函数

 

<body>
    <button id="start">开始</button>
    <button id="stop">结束</button>
    <script>
        let id 
        document.querySelector('#start').addEventListener('click',function(){
            id = setTimeout(function(){
                alert('急急急')
            },1000)
            //开启延时函数
        })
        document.querySelector('#stop').addEventListener('click',function(){
            clearTimeout(id)
            //停止延时函数
        })
    </script>
</body>

js执行机制 

avaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。 这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后 再删除。 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如 果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

<body>
    <button id="start">开始</button>
    <script>
        document.querySelector('#start').addEventListener('click',function(){
            setTimeout(function(){
                document.querySelector('#start').disabled = true
                console.log(this)
            },1000)
        })
    </script>
</body>
<!-- let that = this -->
<!-- setTimeout 属于是window对象的方法 里面的this,默认是 window对象 -->
<!-- setTimeout 里面使用this关键字,一定要慎用 -->


<body>
    <button id="start">开始</button>
    <script>
        document.querySelector('#start').addEventListener('click', function () {
            let that = this
            setTimeout(function () {
                that.disabled = true
            }, 1000)
        })
    </script>
</body>
<!-- let that = this -->
<!-- setTimeout 属于是window对象的方法 里面的this,默认是 window对象 -->
<!-- setTimeout 里面使用this关键字,一定要慎用 -->

 

 location对象

⚫ location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分

⚫ 常用属性和方法:

➢ href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转

➢ search 属性获取地址中携带的参数,符号 ?后面部分

➢ hash 属性获取地址中的啥希值,符号 # 后面部分

➢ reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新

 

<body>
    <button>开始</button>
    <script>
    console.log(location.href)
    //获取地址栏的地址
    const btn = document.querySelector('button')
    btn.addEventListener('click',function(){
      location.href = 'https://www.baidu.com'
    })
   
    </script>
</body>

 

 

 

<body>
    <a href="https://www.baidu.com">5秒后发生跳转</a>
    <script>
        const a = document.querySelector('a')
        let i = 5
        let id = setInterval(function () {
            i--
            a.innerHTML = `${i}秒后发生跳转`
            
            if (i === 1) {
                location.href = 'https://www.baidu.com'
                clearInterval(id)
            }
        }, 1000)


    </script>
</body>

 histroy对象

本地存储 

 localStorage

 ⚫ 作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在

⚫ 特性:

➢ 可以多窗口(页面)共享(同一浏览器可以共享)

➢ 以键值对的形式存储使用

 

<script>
        localStorage.setItem('name', '哈哈')
        localStorage.setItem('age', '11')
        //sessionStorage.setItem

        console.log(1)
        document.addEventListener('click', function () {
            console.log(4)
        })
        console.log(2)
        setTimeout(function () {
            console.log(3)
        }, 3000)
    </script>

sessionStorage

⚫ 特性:

➢ 生命周期为关闭浏览器窗口

➢ 在同一个窗口(页面)下数据可以共享

➢ 以键值对的形式存储使用

➢ 用法跟localStorage 基本相同

 存储复杂数据类型

 

    <script>
        const arr = [
            {
                name: '我问过',
                age: 18
            },
            {
                name: '你没问',
                age: 67
            }
        ]
        //存: JSON.stringify(数组或者对象)   将 数组或者对象 转化为 JSON格式的字符串
        localStorage.setItem('data',JSON.stringify(arr))

        const date = JSON.parse(localStorage.getItem('data'))
        //取: JSON.parse(JSON格式的字符串)   将 JSON格式的字符串 转换为js对象
        console.log(date)
    </script>