API和webAPI

• API（Application Programming Interface）应用程序编程接口（暴露出来的工具）。
• webAPI：浏览器平台对外公开的提供操作浏览器和网页的接口（BOM、DOM）
• DOM：操作页面元素的方法 document object model
• BOM：操作浏览器的

DOM介绍

DOM的概念

概念：文档对象模型。

• 文档：html文件
• 对象：属性和方法
• 模型：（树）

文档树

​ 文档树：浏览器在加载html文件时，会把文档、文档中的标签、属性、文本、注释转换成对象，然后按照标签的关系（父子、兄弟、祖孙）以树状结构存储到内存中。

文档树中的对象，也被称为节点对象 。

节点对象的分类：文档（document） 、元素（标签转换的对象） 、文本、属性、注释

学DOM要干什么

操作页面元素

获取，注册事件，操作

• 获取元素【DOM提供方法】
• 给元素注册事件
• 操作元素的属性
• 动态操作元素（创建、追加、删除、克隆等）

获取元素

根据id值获取单个元素

• 语法： document.getElementById(‘id值’);

• 代码：

    <button id="btn">按钮1</button>
    <button id="btn">按钮2</button>
    <script>
      // 根据id获取单个元素，返回一个元素
      var btn = document.getElementById('btn');
      // dir可以打印出对象中的属性和方法
      console.dir(btn);
      console.log(btn);
      // 细节：若页面上有相同的id值的标签时，在获取时，获取的是id值第一次出现的标签。
    </script>
  

根据标签名获取一组元素

• 语法：document.getElementsByTagName(‘标签名’);

• 代码：

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
      // 需求：获取所有按钮
      // 根据标签名获取一组元素，返回的是一个伪数组
      var btns = document.getElementsByTagName('button');
      console.log(btns);
  
      // 数组和伪数组的区别？
      // 相同：都有索引和长度（length）
      // 不同点：伪数组不能够调用真正数组中内置的方法（push、pop、sort...）
    </script>
  

选择器

根据选择器获取单个元素

• 语法：document.querySelector(‘选择器’);

根据选择器获取一组元素

• 语法：document.querySelectorAll(‘选择器’);

代码：

  <button class="btn">按钮1</button>
  <button class="btn">按钮2</button>
  <button class="btn">按钮3</button>
  <script>
    // 根据选择器获取当个元素，若有多个同样选择器的标签，获取的将会是第一次出现的标签
    var btn = document.querySelector('.btn');
    console.log(btn);

    // 根据选择器获取一组元素
    var btns = document.querySelectorAll('.btn');
    console.log(btns);
  </script>

注意：根据选择器获取元素在IE8以下有兼容性问题。

案例：

1. 根据id值获取按钮
2. 根据标签名获取一组li
3. 缩小范围获取元素

事件基础

什么是事件

​ 用户做的动作就是事件

​ 用户和网页之间的交互行为（鼠标点击、鼠标进入、鼠标离开、键盘按下、键盘弹起、手指按压、手指移动等等）

事件三要素

• 事件源：被触发的元素，比如点击的按钮
• 事件类型：如何触发的事件，比如点击按钮 onclick
• 事件处理程序：事件发生后的结果。

给元素注册事件

• 语法：事件源.事件类型 = 事件处理程序;

  • 事件源→ 触发的那个元素
  • 事件类型→ 点击 onclick
  • 事件处理程序→ 函数

• 代码：

   // 获取按钮元素
   var btn = document.getElementById('btn');
   btn.onclick = function(){
     // 函数体中的代码，就是事件发生后要执行的程序
     alert('燃烧我的卡路里');
   };
  
   // 事件处理程序的本质是什么？
   // ① onclick本质上就是事件源这个对象中的某一个键值对而已。默认值是null，表示没有注册事件
   // ② 给事件源注册onclick事件，其实本质上就是给onclick赋值函数，所以onclick是事件源的一个方法而已
   // ③ 点击按钮时，浏览器自动调用了btn.onclick();
  

事件处理程序中的this

事件处理程序中的this指向事件源

 // 获取按钮元素
 var btn3 = document.getElementById('btn');
 btn3.onclick = function(){
   // 函数体中的代码，就是事件发生后要执行的程序
   // 关键字：this，代表事件源
   console.log(this);
 }

取消a标签默认行为

1. 方式1：事件处理程序中最后设置return false;

     <a id="link" href="https://www.baidu.com">点击</a>
     <script>
       var link = document.getElementById('link');
       link.onclick = function(){
           alert('你好');
           // 方式1：取消a点击后的默认跳转行为 return false;
           return false;
       };
     </script>
   

2. 方式2：设置a标签的href属性值为：javascript:

     <!-- 方式二：给a标签的herf值设置javascript: ,表示将来点击a时，会阻止默认跳转行为，并且仅仅会执行js代码-->
     <a href="javascript:">点击2</a>
     <!-- 扩展：通过a可以打开打电话应用 -->
     <a href="tel:">打电话</a>
     <!-- 扩展：通过a可以打开电子邮件应用 -->
     <a href="mailto:">打开邮件</a>
   

案例：

1. 点击按钮弹出'你好'
2. 给一组按钮注册事件，点击弹出‘你好’
3. 给a标签注册点击事件，点击弹出'你好'，并且点击a标签不跳转

操作元素的属性

语法格式

• 获取：

  • 语法：元素.属性名;

• 设置：

  • 语法：元素.属性名= 值;

常见的属性

id、title、href、src、className、innerText / textContent、innerHTML

• className操作类名

  <div id="box" class="a"></div>
  <script>
   var div = document.getElementById('box');
   // 获取类名
   console.log(div.class); // undefined
   console.log(div.className);  // a
   // 设置类名
   div.className = 'b';
  </script>
  

• innerText和innerHTML的区别

  <div id="box"><h2>我是div中的标题</h2></div>
  <script>
   // 1. 获取div元素
   var div = document.getElementById('box');
   console.dir(div);
   // 【获取】
   // ① 通过innerText获取,仅仅包含文本
   console.log(div.innerText);
   // ② 通过innerHTML获取，若有子标签时，会包含文本和子标签
   console.log(div.innerHTML);
  
   // 【设置】
   // ① 通过innerText设置,若设置中包含了子标签，该标签不会被渲染而是当做普通文本显示
   // div.innerText = '<a href="#">我是div中的超链接</a>';
   // ② 通过innerHTML设置,若设置中包含了子标签，该标签会被渲染显示
   div.innerHTML= '<a href="#">我是div中的超链接</a>';
  
  </script>
  

• innerText和textContent的兼容性问题

  <div id="box"><h2>我是div中的标题</h2></div>
  <script>
   // 1. 获取div元素
   var div = document.getElementById('box');
   console.log('innerText:' + div.innerText);
   console.log('textContent:' + div.textContent);
   // 相同点：获取的都是文本
   // 不同点：
   // ① textContent属性在ie低版本中不支持，innerText基本没有兼容问题
   // ② textContent标准属性（官宣），innerText（野路子，但是兼容性好,推荐使用）
  
  </script>
  

事件类型

• onclick

• onmouseenter 鼠标进入元素事件

• onmouseleave 鼠标离开元素事件

• onmouseover / onmouseout

• 代码：

  <div></div>
  <script>
   var div = document.querySelector('div');
  
   div.onmouseenter = function() {
     console.log('鼠标进入了div');
   };
   div.onmouseleave = function() {
     console.log('鼠标离开了div');
   };
  </script>
  

元素属性：

​ HTML属性：获取：元素.属性名；设置：元素.属性名 = 值;

​ CSS属性：设置：元素.style.属性名 = ‘值’;【元素.className=值】

操作元素的样式

两种设置样式：

​ 1.、通过style直接设置样式

​ 2、通过修改className达到修改样式操作

通过style属性设置样式

• 语法：元素.style.样式属性名 = ‘样式属性值’;

• 代码：

  <div>111</div>
  <script>
   var div = document.querySelector('div');
   div.style.width = '300px';
   div.style.height = '300px';
   // background-color → backgroundColor
   div.style.backgroundColor = 'red';
   // div.style.fontSize = '50px';
   div.style.font = 'bold 50px "宋体"';
  
   // 若操作少量的样式时，适合用style属性操作
  </script>
  

通过className设置样式

• 语法：元素.className = ‘类名’

• 代码：

  <style>
  .a {
  width: 300px;
  height: 300px;
  background-color: red;
  font:bold 50px '宋体';
  }
  .b {
  width: 500px;
  height: 500px;
  background: purple;
  }
  </style>
  <div>111</div>
  <script>
  var div = document.querySelector('div');
  div.className = 'b';
  // 若操作多个样式属性时，用className管理比较合适
  </script>
  
  
  document.body==》body元素
  

案例

• 开关灯

操作表单元素的属性(表单)

value 操作表单元素的内容

• 获取：元素.value; 返回字符串
• 设置：元素.value = 值;

disabled 操作表单元素是否禁用(未激活)

• 获取：元素.disabled; 返回布尔值（true→禁用，false→不禁用）;
• 设置：元素.disabled = 布尔值;

checked 操作表单元素是否选中

• 获取：元素.checked; 返回布尔值（true→选中，false→不选中）;
• 设置：元素.checked = 布尔值;

selected 操作表单元素的是否选中

• 获取： 元素.selected;
• 设置：元素.selected = 布尔值;

案例：

1. 购物车页面中的商品数量文本框
2. 购物车的全选
3. 注册页面，选中同意复选框启用注册按钮

自定义属性行内属性

• 标签内所能操作的属性：

  • 系统支持的：href、title、src…，可以通过元素直接调用
  • 自定义标签属性：bigSrc，不可以通过元素直接点的方式调用
  • 往标签上自定义的属性，一定不可以直接用【元素.属性】的方式用

• 获取

  • 语法：元素.getAttribute(name);
  • name:属性名

• 设置

  • 语法：元素.setAttribute(name,value);

• 移除

  • 语法：元素.removeAttribute(name,value);

• 代码：

 <!-- 系统支持：src ; 可以通过元素直接调用-->
  <!-- 自定义的标签属性：bigSrc；不可以通过元素直接点的方式调用 -->
  <img src="small.jpg" title="图片" bigSrc="big.jpg" >
  <script>
    var img = document.querySelector('img');
    console.log(img.src);
    console.log(img.bigSrc);  // undefined
    // 获取
    var v = img.getAttribute('bigSrc');
    console.log(v);
    // 设置
    img.setAttribute('bigSrc','100086.jpg');
    // 移除
    img.removeAttribute('bigSrc');

    // 注意：set/get/removeAttribute不仅可以操作自定义标签属性，还可以操作系统支持标签属性。
    var v = img.getAttribute('src');
    console.log(v);
  </script>

节点的层级

根据节点的关系来获取元素

节点的关系

• 父子关系
• 兄弟关系

根据子节点获取父节点

• 语法：子节点.parentNode

根据父节点获取子节点

• 语法：父节点.childNodes; 获取的子节点包含【文本】和【元素】
• 语法：父元素.children; 获取的子节点仅仅包含【元素】
• 语法：父节点.firstElementChild; 获取【第一个】子元素节点
• 语法：父节点.lastElementChild; 获取【最后一个】元素节点

节点的nodeType、nodeName、nodeValue的属性

• 节点的nodeType（节点类型）属性的作用：元素→ 1； 文本→3
• 节点的nodeName（节点名称）属性的作用：元素→ 大写的标签名 文本→ #text
• 节点的nodeValue（节点值）属性的作用：元素→ null 文本→ 文本的内容

获取兄弟节点

• 获取下一个兄弟
  • 语法：节点.nextElementSibling
• 获取上一个兄弟
  • 语法：节点.previousElementSibling

补充案例

1、京东侧边栏

// 1. 获取元素
// 1.1 获取一组li
// 1.2 获取一组类名为item的div
// 1.3 获取类名为slide的div

// 2. 循环遍历给每一个li注册onmouseenter，并且每一个li添加一个index表示索引
// 2.1 循环遍历把所有的li的类名设置为'',把所有的item的display设置为none
// 2.2 让当前的li突出显示（加类名active）
// 2.3 获取到当前的li的编号（加的索引）
// 2.4 通过编号找到对应的item项设置display为block


// 3. 给类名为slide的div鼠标离开事件onmouseleave
// 3.1 循环遍历把所有的li的类名设置为'',把所有的item的display设置为none

核心知识点

• 动态创建元素
• 动态追加元素
• 动态删除元素

动态创建元素

• 通过innerHTML创建元素

  • 语法：元素.innerHTML = ‘内容’;
  • 代码

 <button>创建li</button>
  <ul>
    <li>我是li</li>
  </ul>
  <script>
    var btn = document.querySelector('button');
    var ul = document.querySelector('ul');
    btn.onclick = function() {
      // 获取ul中原有的内容
      var str = ul.innerHTML;
      // 设置ul的内容
      ul.innerHTML =str + '<li>我是新来的</li>';
    };
  </script>

• 通过document.createElement创建元素

  • 语法：document.createElement(‘标签名’); 返回一个新的元素对象

  • 代码：

      <button>创建li</button>
      <ul>
        <li>我是li</li>
      </ul>
      <script>
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        btn.onclick = function() {
          // 创建一个新的li元素
          var newLi = document.createElement('li');
          // 追加到ul中
          ul.appendChild(newLi);
          // 设置元素的内容
          newLi.innerText = '我是新来的';
        };
      </script>
    

• 性能测试

  • innerHTML在追加多个元素时执行速度慢，性能差。不推荐使用
  • createElement方法执行速度快，性能高 ，在实际开发中推荐使用 。

动态追加元素

• 语法：父元素.appendChild(子元素);

• 代码：

  <button>创建li</button>
  <ul>
   <li>我是li</li>
  </ul>
  <script>
   var btn = document.querySelector('button');
   var ul = document.querySelector('ul');
   btn.onclick = function() {
     // 创建一个新的li元素
     var newLi = document.createElement('li');
     // 追加到ul中
     ul.appendChild(newLi);
     // 设置元素的内容
     newLi.innerText = '我是新来的';
   };
  </script>
  

动态删除元素

• 语法：父元素.removeChild(子元素);
• 代码：

1、创建元素：var n = document.createElement(‘标签名’);

2、追加元素：父元素.appendChild(子元素)

3、删除元素：父元素.removeChild(子元素)

其他操作

插入元素

• 语法：父节点.insertBefore(新的节点,旧的子节点)
• 代码：

替换元素

• 语法：父节点.replaceChild(新的节点,旧的子节点)
• 代码：

克隆元素

• 语法：元素.cloneNode(true或false); 返回一份新的克隆后的元素
• 代码：

案例

1. 根据数组动态创建英雄(ul)列表
2. 根据数据动态生成表格
3. 表格封装(封装一个函数，传入数据生成表格)
4. 微博发布

事件监听

为什么要学事件监听

需求：给一个元素连续绑定两次点击事件，并且事件处理程序都有效。

事件监听注册事件

• 语法：事件源.addEventListener(‘事件类型’,事件处理程序,是否捕获);

  事件源 → 操作的元素

  事件类型→ 在此不加on, onclick→click

  事件处理程序→ 函数

  是否捕获，可选参数，默认为false。 true→ 捕获，false→冒泡

• 代码：

    var btn = document.querySelector('button');
    // 事件监听注册事件
    btn.addEventListener('click',function(){
      console.log(1);
    });
  

事件监听移除事件

• 语法：事件源.removeEventListener(‘事件类型’,事件处理程序的名称)

  • 事件源，操作的元素
  • 事件类型，不加on
  • 事件处理程序的名字：函数名
    • 注意：若将来要通过事件监听的方式移除事件时，之前注册事件要把事件处理程序单独抽取出来命名 。

• 代码：

    var btn = document.querySelector('button');
    // 事件监听注册事件
    var fn1 = function() {
      console.log(1);
    };
    var fn2 = function() {
      console.log(2);
    };
    btn.addEventListener('click',fn1);
    btn.addEventListener('click',fn2);
  
    // 事件移除事件
    btn.removeEventListener('click',fn2)
    btn.removeEventListener('click',fn1)
  

注册事件：

​ 事件源.onclick = function () {}

​ 事件源.addEventListener(‘事件类型不加on的’,function () {});

移除事件：

​ 事件源.onclick = null;

​ 事件源.removeEventListener(‘事件类型不加on的’,事件处理名称);

事件流

什么是事件流

事件流 ：事件触发后的三个阶段（捕获阶段、目标阶段、冒泡阶段）。

注意： 在事件触发后，这三个阶段始终是存在的，顺序① 先捕获，② 到达目标，③ 再冒泡。 但是在触发后，针对捕获和冒泡，仅仅启用一个。

事件对象

什么是事件对象

事件对象，在事件触发后 ，在事件处理程序中 （函数体），所获取并操作的对象。

事件对象：事件发生时的相关信息对象【event】

获取事件对象

• 语法：事件源.事件类型 = function(e){ // 第一个形参e就是事件对象 }
• 代码：

鼠标事件对象相关属性

• 鼠标事件类型

  • onclick
  • onmouseenter
  • onmouseleave
  • onmousemove,鼠标移动事件
  • onmousedown 鼠标按键按下事件【】
  • onmouseup 鼠标按钮弹起事件
  • onmouseenter：不支持事件冒泡，mouseover：支持事件冒泡
  • onmouseenter，onmoouseover
  • onmouseleave，onmouseout

• 鼠标事件对象相关属性-获取鼠标的位置

  • 事件对象.clientX / 事件对象.clientY 参照是浏览器
  • 事件对象.pageX / 事件对象.pageY 参照是文档
  • 事件对象.offsetX / 事件对象.offsetY 参照是当前的元素
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lREcpT8U-1647419767815)(media/04.png)]

事件监听注册事件：事件源.addEventListener(‘事件类型’，事件处理程序，是否捕获);

​ 移除事件：事件源.onclick = null;

​ 事件监听移除事件；事件源.removeEventListener(‘事件类型’，事件程序名称);

事件流：事件触发后的三个阶段：捕获，目标，冒泡

事件对象：事件发生后的相关信息对象

键盘事件对象相关属性

• 键盘事件

  • 事件类型
    • onkeydown 键盘按下事件
    • onkeyup 键盘弹起事件
  • 注意：
    • 一般情况给document绑定键盘事件。

• 键盘事件对象相关属性-键盘按下哪个键

  • 事件对象.keyCode 获取键盘按键对应的键码值
  • 事件对象.altKey 表示alt键是否按下，返回布尔值。
  • 事件对象.shiftKey 表示shift键是否按下，返回布尔值。
  • 事件对象.ctrlKey 表示ctrl键是否按下，返回布尔值。（true按下，false没有按下）

事件对象的公共属性和方法

• 属性：

  • 事件对象.target 获取最先触发的元素
  • 和this的区别
    • this在事件处理程序中始终代表的是事件源
    • e.target 代表不一定是事件源，代表的是最先触发的元素【目标阶段→ document】

• 方法：

  • 事件对象.preventDefault(); 阻止默认行为
  • 事件对象.stopPropagation(); 停止冒泡传播
  • 【onmouseover支持冒泡，onmouseenter不支持冒泡】

扩展-兼容问题

• 获取事件对象的兼容问题

  • 标准：事件处理程序中的第一个形参

  • IE低版本：window.event

  • 兼容处理：

       document.onclick = function (e) {
         var _e = e || window.event;
         // 在js中，任何数据可以参与任何运算
         // 或运算格式：  左侧数据 || 右侧数据
         // 或运算结果是：左右其中一个数据
         // 运算规则：或运算运算的顺序是自左向右，若左侧是false或者将来能变成false,则输出右侧数据。否则输出左侧数据。
         console.log(_e);
       };  
    

事件委托

事件委托介绍

事件委托 （事件代理）：把子孙元素的事件注册，完全交给子孙元素的上级元素代理。
注意：委托是下级元素委托上级元素。 没有上级委托下级

如何实现事件委托

• 实现步骤

  ① 给子孙元素的上级注册事件

  ② 在事件处理程序中，通过事件对象.target 获取最先触发的元素

  ③ 可以通过事件对象.target的nodeName 属性检测最先触发的是否是指定元素

• 代码

  <script>
  // ① 给子孙元素的上级注册事件
  var ul = document.querySelector('ul');
  ul.onclick = function(e) {
   // ② 在事件处理程序中，通过事件对象.target 获取最先触发的元素
   var t = e.target;
   // console.dir(t);
   // ③ 可以通过事件对象.target的nodeName 属性检测最先触发的是否是指定元素
   if(t.nodeName=='LI') {
     console.log(t.innerText);
   }
  };
  </script>
  

事件委托的作用

• 减少事件的绑定，节省内存。
• 上级元素可以代理未来新动态添加的元素。

事件委托的原理

• 关键：事件对象.target； 可以获取最先触发的元素
• 原理：因为事件冒泡的存在,我们才可以获取到最先触发的元素。【目标→ document】

核心知识点

• 定时器

DOM：操作页面元素

BOM：操作浏览器的

BOM

BOM介绍

BOM的概念：浏览器对象模型。

顶级对象-window

• window对象介绍

  1. window对象被 称为顶级对象 或全局对象 。
  2. 因为全局变量和全局函数本质上都是window对象的属性或方法。
  3. window对象可以省略。

• window中的对话框

  • alert
  • prompt
  • confirm

• 定时器1： window.setTimeout(callback, time);

  • 作用：延迟执行一段程序，仅仅执行一次 （定时炸弹），返回一个数字，表示是哪个定时器。

  • 参数：

    • callback, 函数定义，函数体中存放定义器要执行的代码。
    • time, 等待的时间，数字，表示的是毫秒

  • 清除定时器：window.clearTimeout(定时器的标识);

  • 代码：

        // 开启一个定时器
        var num1 = setTimeout(function(){
          // 定时器延迟时间到达后，要执行的代码
          console.log('爆炸了,Duang~~~1') ;
        },5000);
    
        // 开启一个定时器
        var num2 = setTimeout(function(){
          // 定时器延迟时间到达后，要执行的代码
          console.log('爆炸了,Duang~~~2') ;
        },5000);
        console.log(num1,num2);
    

    // 获取按钮
    var btn = document.querySelector('button');
    btn.onclick = function() {
      // 清除定时器
      clearTimeout(num1);
      clearTimeout(num2);
    };
  

• 定时器2：window.setInterval(callback, time);

  • 作用：延迟执行一段程序，重复执行 （闹钟）。返回一个数字，表示是哪个定时器。

  • 参数：

    • callback, 函数定义，函数体中存放定义器要执行的代码。
    • time, 等待的时间，数字，表示的是毫秒

  • 清除定时器：window.clearInterval(定时器的标识);

  • 代码：

      // 开启一个定时器
      var num = setInterval(function(){
        var date = new Date();
        console.log(date);
      },1000);
    

    // 获取按钮
    var btn = document.querySelector('button');
    btn.onclick = function () {
      clearInterval(num);
    };
  

location对象

• location对象，将来操作浏览器的地址栏。
• 属性：
  • location.href 设置或获取地址栏地址
• 方法：
  • location.reload(); 刷新页面
  • 【location.assign()，location.replace()】

history对象

• history对象 ，用来操作历史记录
• 属性：
  • history.length; 获取历史记录的长度
• 方法：
  • history.back(); 回退上一个历史记录
  • history.forward(); 前进下一个历史记录
  • history.go(数字); 正数，表示前进； 负数，表示回退；

navigator对象

• navigator对象， 用来获取浏览器的信息。
• 属性：
  • navigator.userAgent; 用来获取浏览器的信息

onload事件

• onload事件是页面加载事件，一般绑定给window
• 页面把link，scr，img图片都加载完

案例

1. 倒计时
2. 点击按钮跳转网页

核心知识点

• 元素的offset系列属性
• 元素的client系列属性
• 元素的scrollTop属性

元素的offset系列属性

获取元素的大小

• 元素.offsetWidth / 元素.offsetHeight;

  返回的是数字。 大小包含： 内容 + padding + border;

  注意：该属性仅仅只能够读取 ，不能够设置

• 代码：

  <style>
   div {
     width: 300px;
     height: 300px;
     position: absolute;
     left:100px;
     top:100px;
     background: pink;
     border: 10px solid blue;
     padding: 10px;
   }
  </style>
   <div></div>
  <script>
   var div = document.querySelector('div');
   // 获取元素的大小
   console.log(div.offsetWidth);
   console.log(div.offsetHeight);
  
   // 坑！设置(不能设置，是只读的)
   div.offsetWidth = 1000 + 'px';
   div.offsetHeight = 1000 + 'px';
  
  </script>
  

获取元素的位置

[offsetLeft，offsetTop]

[offsetWidth，offsetHieght]

• 元素.offsetLeft / 元素.offsetTop;

  返回的是数字。（参照谁？看定位关系）

• 代码：

  <div class="g">
   <div class="f">
     <div class="s"></div>
   </div>
  </div>
  <script>
   var s = document.querySelector('.s');
   // 获取横向位置
   console.log(s.offsetLeft);
   // 获取纵向位置
   console.log(s.offsetTop);
  
   // parentNode
   console.log(s.parentNode);
   // offsetParent
   console.log(s.offsetParent);
  
  </script>
  

获取元素的父元素

• 元素.offsetParent 和 元素.parentNode的区别

  • 元素.offsetParent ，获取“父元素”， 按照定位关系。
  • 元素.parentNode， 获取“父元素”， 按照标签关系。

元素的client系列属性【了解】

client系列：

​ [clientWidth，clientHeight]

​ [clientLeft，clientTop]

1.1 获取元素的大小

• 元素.clientWidth / 元素.clientHeight

  获取元素的大小，包含 【内容 + padding】

• 代码：

  <div></div>
  <script>
   var div = document.querySelector('div');
   // 获取元素的大小
   console.log(div.clientWidth);
   console.log(div.clientHeight);
  
   // 获取边框的厚度
   console.log(div.clientLeft);
   console.log(div.clientTop);
  
   // 坑！设置(不能设置，是只读的)
   div.clientWidth = 1000 + 'px';
   div.clientHeight = 1000 + 'px';
  
  </script>
  

获取边框的厚度

• 元素.clientLeft / 元素.clientTop

  获取边框 厚度

元素的scroll系列属性

获取元素的大小

• 元素.scrollWidth / 元素.scrollHeight

  获取的元素的大小 ,包含 【内容+ padding + 溢出】

• 代码：

   var div = document.querySelector('div');
   console.log('scroll系列：' +div.scrollWidth);
  

获取被卷起的页面间距

• 元素.scrollLeft / 元素.scrollTop

  获取的是在该元素中卷去的页面的间距。【该属性不仅可以获取，还可以设置】

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EEF2sYlh-1647419767818)(media/06-03.png)]

案例

• 回到顶部
• 放大镜

【案例】轮播图-讲解

核心知识点

• touch事件（touchstart、touchmove、touchend）
• touchEvent 事件对象
• transitionend事件

1. touch事件类型

​ 移动设备上无法使用鼠标，当手指触碰屏幕时会触发 click、mousedown、mouseup 事件。

但是，touch事件要比鼠标事件执行效率高，用户体验好。

注意：以下事件必须通过事件监听注册

事件添加：

​ 元素.onclick = function () {}

​ 元素.addEventlistener(‘click’,function (){});

• touchstart，手指按下事件
• touchmove，手指移动事件
• touchend，手指松开事件

2. touch事件对象

• 常见的属性

  1. 事件对象.touches ：位于屏幕上的所有手指的列表；
  2. 事件对象.targetTouches ：位于该元素上的所有手指的列表；
  3. 事件对象.changedTouches：被改变的手指列表。 touchstart时包含刚与触摸屏接触的触点，touchend时包含离开触摸屏的触点

• 手指的位置

  1. 手指对象.clientX/Y 手指相对于可视区域
  2. 手指对象.pageX/Y 手指相对于文档

  注意：手指对象.clientX/Y 使用较多

案例：

1. 模拟tap手势（点击）
2. 模拟drag手势（拖拽）【未演示，未做，未讲】
3. 模拟flick手势（轻滑）
4. 移动端京东轮播图

4. transitionend事件

谁有过渡效果，这个事件添加给谁【事件监听】

css中过渡结束后检测的行为

Swiper 轮播图插件

目标

使用 swiper 快速实现轮播图效果

概念

Web 插件：就是别人封装好的一个 js 代码 或 css代码，可以直接拿来用。

Swiper 就是一个轮播图的插件，由其他团队写好的，开源免费，全世界开发者都可以使用。

Swiper插件官网： https://www.swiper.com.cn/

百度按照步骤执行既可

1、下载并且引入CSS文件和JS文件

2、复制内容

3、设置大小（可以不设置）

4、复制功能代码

本地存储技术

​ localSortage对象：把数据以字符串的方式保存本地

​ 获取： localStorage.getItem()
​ 设置： localStorage.setItem()