我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

谷江涛-20221111-DOM&BOM&DAY05

[复制链接]
暴风雨 发表于 2022-11-15 17:41:05 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
1.DOM与BOM比较相似,都是管理抽象对象的规则
2.BOM主要负责页面与页面的通讯
3.BOM的核心对象是window,通常BOM一般指的是window对象
4.BOM是对浏览器进行管理的规则,因此没有统一二点标准

BOM与DOM之间的关系:
DOM通过document对象来访问,控制,修改html等文档中的内容
BOM通过window对象来访问,控制,修改浏览器中的内容

#通常可以说DOM是被包含在BOM中的,可以通过js操作来访问浏览器,通过执行浏览器的DOM来获取文档的内容

#区别:
#DOM描述了处理网页内容的方法和接口,操作页面内部
#BOM描述了与浏览器尽享交互的方法和接口,操作页面之间

#全局对象都是挂载在window上2.页面加载事件区别 :
onliad:dom,静态资源(css/图片)都加载完毕后在执行function里面的代码

DOMContentLoaded:dom节点加载完毕后,不包括css,图片或者其他的静态资源
加载速度比onload更快调整窗口大小事件:onresize

响应式布局---重绘3.定时器

定时器是window下的,可以省略前缀window.

3.1分类周期定时器---一直执行下去
setInterval(回调函数,执行时间);
//window.setInterval(回调函数,执行时间);
//可省略window

延迟定时器---只执行一次
setTimeout(回调函数,执行时间);
//window.setTimeout(回调函数,执行时间);
//可省略window

执行时间单位都是毫秒----1000ms=1s3.2清除定时器直接清除清除周期定时器
clearInterval(定时器名字);
//window.clearInterval(timerId1);
//可省略window

清除延迟定时器
clearTimeout();
//window.clearTimeout(timerId3);
//可省略window条件清除//运行一次清除

    let timerId1 = setTimeout(function () {
        console.log('setTimeout');
        clearTimeout(timerId1);
    }, 2000);

//达到条件清除

    let num = 0;
    let timerId2 = setInterval(function () {
        num++;
        console.log(num);
        //10s后不再进行
        if (num == 10) {
            clearInterval(timerId2);
        }
    }, 1000)4.JS同步和异步同步:
按照默认书写顺序,从上到下,从左到右,依次执行
#同步错误影响整个代码执行


异步:
异步代码遇到同步代码,先执行同步代码,后执行异步代码
执行顺序:先触发条件执行
#异步错误不影响同步执行

js中三种异步的情况

1.事件
2.定时器
3.ajax5.location对象

location对象,提供了当前窗口中加载文档的信息,以及通常的导航功能,主要对浏览器url地址相关数据的获取和定义

//文档加载所有的信息
window.location;

//参数
location.search;

//herf---完整的url地址
location.href;

//hash---哈希
location.hash;

//port---端口号
location.port;

//host---页面的域名以及端口号
location.host;

//hostname---页面的域名
location.hostname;

//pathname---页面中的路径或文件名
location.pathname;

//origin---返回的是url原地址---协议/域名/端口号
location.origin;location方法
        // 重新加载---刷新
        location.reload();模拟a标签
#运用location,href属性模拟a标签点击事件
<!-- <a href="https://www.baidu.com/">去百度</a> -->

    <div>div</div>
    <p>这是段落,我要去百度</p>

    <script>
        // 获取dom节点
        const box = document.querySelector('div');

        box.addEventListener('click', function () {
            window.location.href = "https://www.baidu.com/";
        })
        const p = document.querySelector('p');

        p.addEventListener('click', function () {
            window.location.href = "https://www.baidu.com/";
        })
    </script>
回复

使用道具 举报

关注0

粉丝0

帖子33

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026