凯的个人博客

事件Dom与Bom

4/30/2024 js

# Dom与Bom

  • window 对象
  • window 全局对象
  • Dom
  • Bom

# 1.window 对象

在js 中 有一个全局对象，整个对象拥有浏览器和页面DOM树所有的操作方法

window 自身带有一些全局方法：定时器 setInterval 延时器 setTimeout

window。document 文档对象--DOM操作对象

BOM对象：window.location 浏览器地址栏 window.history浏览器历史记录 window.screw 浏览器屏幕对象

# 定时器

创建定时器

没间隔 1s 执行一次函数体

let timer = window.setInterval(function(){
    
},1000)
1
2
3

案例 倒计时发送验证码

<body>
    <button>发送验证码</button>
    <script>
        let btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            let count = 10
            let timer = setInterval(function () {
                count--; 
                if (count > 0) {
                    btn.textContent = count + '后重新发送';
                } else {
                    clearInterval(timer); 
                    btn.textContent = '发送验证码'; 
                }
            }, 1000)
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 事件的清除与重新绑定 【补充】

const countDown = function(){
    //具体事件
}
//给dom添加一个事件监听---重新
dom.addEventListener('click',countDown)
//清除这个dom的事件监听
dom.removeEventListener('click',null)
1
2
3
4
5
6
7
  • 倒计时 验证码 完整代码
        let btn = document.querySelector('button');
        const countDown = function () {
            console.log('点了一次');
            // 每间隔1s 10 累减 输出
            let num = 10;
            let timer = window.setInterval(function () {
                num--;
                btn.innerText = num + 's后重新获取'
                // 如果num ==0,停止定时器
                if (num == 0) {
                    // 清除定时器
                    window.clearInterval(timer)
                    // 设置按钮的文本
                    btn.innerText = '发送验证码'
                    // 重新给这个按钮添加事件--点了之后 又可以进行倒计时
                    btn.addEventListener('click',countDown )
                }
            }, 1000)
            // 清除自身的点击事件
            btn.removeEventListener('click',countDown)
        }
        btn.addEventListener('click',countDown )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 延时器

//创建 
let timer = window.setTimeout(function(){
    
})

//清除
window.clearTimeout(timer);
1
2
3
4
5
6
7

# DOM

dom树操作

dom节点的增删改查

dom节点自身操作： 获取/修改属性 获取/修改样式 操作自身节点的内容

    // 给div添加 p标签
        //1.创建一个节点 追加到div的内容最后
        let p = document.createElement('p');
        // 给p添加内容
        p.innerHTML = '我是添加进来的内容';
        // 给p标签修改类名 
        // p.className = 'p1'
        p.classList.add('p1');
        p.id = 'aa';
        p.dataset['xxxx'] = 1000;
        p.style.color="#f44"

        console.log(p);
        document.querySelector('div').appendChild(p);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 // 2.通过innerHTML 直接覆盖赋值 给div的内容修改
        document.querySelector('div').innerHTML= `
            <p id="aa" style="color:#f44" data-xxx="1000" class="p1"> 我是新增的内容  </p>
        `
1
2
3
4
 // 1.获取dom
        let box = document.querySelector('.box')
        // 2.删除dom
        box.remove()
1
2
3
4
5
//修改节点
    let p = document.querySelector('p')

        p.classList.add('p1');
        p.id = 'aa';
        p.dataset['xxxx'] = 1000;
        p.style.color="#f44"
1
2
3
4
5
6
7
   // h4  4个
        let p1 = document.getElementById('a')
        let p2 = document.getElementsByClassName('b')   // 类名获取获取的是 伪数组：不能使用数组的所有内置方法 
        let p3 = document.getElementsByTagName('p')   //标签名获取 伪数组
        let p4 = document.getElementsByName('aa')     // 根据name属性获取 nodelist伪数组 可以用数组的forEach map


        // h5  2个
        let p5 = document.querySelector('p')  //根据选择器获取 满足匹配选择器的第一个元素
        let p6 = document.querySelectorAll('p') //根据选择器获取 满足匹配选择器的所有元素组成的 nodelist伪数组
        console.log(p5); 
        console.log(p6);
1
2
3
4
5
6
7
8
9
10
11
12

# BOM

# location 浏览器地址栏

获取 浏览器地址栏信息

可以实现页面跳转

 search："?id=1000&name=zhangsan"     #获取网页的数据 ?key=val&key1=val1
hash: "#a"    #页面当前展示的 盒子区域，可以快速展示显示 到某个盒子  匹配是根据id名匹配
host: "127.0.0.1:5500"   #域名/ip + 端口号
href: "http://127.0.0.1:5500/04-BOm-location.html#a"    #当前完整的网址
protocol: "http:"       #协议
1
2
3
4
5
location.reload()   //重载当前网页  刷新
1
location.href = '新的网页链接'   //跳转网页
1
  • 将search 转换为 一个对象
 location.search："?id=1000&name=zhangsan"
1
//"?id=1000&name=zhangsan"    ===> {id:1000,name:zhangsan}

function formatSearch(){
    
}
1
2
3
4
5

# history 历史记录

history.forward()   #前进一页
history.back()  #后退一页
history.go(数字)  #前进后退 对应页数  数字>0 表示前进几页    数字<0 后退几页  数字=0 刷新网页
1
2
3

# Screen 屏幕对象

availHeight: 1040    #屏幕可用高度
availWidth: 1920    #屏幕可用宽度

height: 1080   #屏幕总高度  （多的40px 是windows 桌面状态栏 最下面的 ）
width: 1920   #屏幕总宽度
1
2
3
4
5

获取当前的浏览器版本信息 和兼容信息

获取用户的地址信息（浏览器自带 ）navigatior.geolocation.getcurrentPosition()

​ 请求的响应服务器 是 浏览器的厂商 ，谷歌服务器（有墙）

# 面试题：

  • HTTP 和 https 的区别

http端口：80 和 https端口：443 都是超文本传输协议，都可以用在前端浏览器 请求数据上，都是 基于TCP网络通信协议的子协议

HTTPS 的 S代表： SSL 数字安全证书

​ SSL: 全球公认的做网络通信加密的机构，定义一种通信传输数据过程中定义的加密规则（公钥 私钥：随时随地随机在变的），网站可以配置SSL数字安全证书，在网络通信过程中 会自动将数据进行加密再发送。 SSL颁发机构有很多，SSL 可以用免费的 也可以用收费的，SSL证书里面存储的就是 公钥信息

# 作业： 20-30 分钟

轮播图片： 三张图进行轮播，每间隔3s中 自动切换下一张 如果用户点击下一张/上一张，等待3s后 继续切下一张 如果用户鼠标 悬停 在轮播上，应该停止自动切换功能

swiper
1

# 作业：转换search

功能：无论search 拿到的时候 任意个参数都可以支持

//"?id=1000&name=zhangsan"    ===> {id:1000,name:zhangsan}

function formatSearch(){
    
}
1
2
3
4
5

# 作业3： dom文档对象模型-day07 课后作业完成

Ajax 网络请求