菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 解婵-20221111-DOM&BOM-DAY05 [打印本页]

作者: 美什么鱼 时间: 2022-11-23 22:02
标题: 解婵-20221111-DOM&BOM-DAY05

DOM&BOM-day05BOM概述，window顶级对象1.BOM基本描述：BOM浏览器对象模型，是一套用来管理控制浏览器的规则

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标签点击事件


<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>

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)