16-JS特效-BOM和DOM

JS特效-BOM和DOM

一.javascript的组成

• ECMAScript

  • JavaScript的标准规范
    • ES6

• BOM

  • 浏览器对象模型

• DOM

  • 文档对象模型

二.BOM

1.简介

• （Browser Object Document）即浏览器对象模型。
• 提供了独立于内容，而与浏览器窗口进行交互的对象。
• 主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。
• BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。

2.需要掌握什么？

• 掌握与浏览器窗口交互的一些对象

  
  
  无标题122.png

• 关系图

  
  
  无标题.png

3.window对象

• 主要知识点。

  他既是ECMAscript规定的全局global对象，又是javascript访问浏览器窗口的一个接口。
  

• 系统对话框。

  • 系统对话框。
    微信图片_20181026163234.png

  • 移动窗口，调整窗口大小。

  • 导航和打开窗口

  • 时序相关的函数(原来是BOM的实现，而非ECMAjavascript的实现）。

• 目前掌握

  所有全局的变量都是window的属性。
  所有全局的函数都是window的方法。
  

4.document对象

微信图片_20181026171313.png

5.location对象

6.navigator对象

7.history对象

三.事件

1.JavaScript是事件驱动为核心的一门语言。

2.事件三要素。

• 事件源，事件，事件驱动程序。
• 获取事件源，绑定事件，书写事件驱动程序。

3.事件步骤。

• 现实
  微信图片_20181026172603.png

• 编码
  微信图片_20181026173829.png

4.常见的事件。

onmouseover  进入
onmouseout  出去
onmousedown按下
onmouseup  抬起
onmousemove  移动

微信图片_20181026173935.png

5.相关补充。

• 事件源获取方式。
  微信图片_20181026193522.png

    var btn = document.getElementById('btn');
    var btn2 = document.getElementsByClassName('my-btn');
    var btn2 = document.getElementsByClassName('my-btn')[0];
    var btn3 = document.getElementsByTagName('button')[0];
    var btn4 = document.getElementsByName('btn')[0];
    var btn5 = document.querySelector('#btn');
    var btn6 = document.querySelector('.my-btn');
    var btn7 = document.querySelectorAll('.my-btn');
    var btn8 = document.querySelectorAll('.my-btn')[1];

• 事件绑定。
  微信图片_20181026194507.png

6.案例小实战。

• 图标切换
• 关闭小广告

四.DOM

1.简介

文档对象模型（Document Object Model）。

2.原理分析。

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点，然后操作的时候修改的是该元素的属性。

3.文档对象模型。

• document是文档对象模型的一部分。
• DOM是一个复合的数据类型。

4.DOM的数据结构（树状）。

微信图片_20181026235737.png

5.DOM访问关系。

• 节点的获得。

  节点的访问关系，是以属性的方式存在的。
  DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。
  

• 父节点（parentNode）。

  • 调用者就是节点，一个节点只有一个父节点。
  • 节点.parentNode
  • 案例实操。
    1.通过子盒子设置父盒子的背景色。
    2.关闭二维码。

• 兄弟节点。

  • 单词普及。
    Sibling-兄弟，Next-下一个，Previous-上一个。

  • 下一个兄弟节点。
    nextELementsSibling和nextSibling。

    
    
    微信图片_20181027114619.png

  • 上一个兄弟节点。
    previousElementSibling和previousSibling。

• 单个节点。

例（兼容性写法）：firstElementChild（兼容火狐谷歌IE9+） || firstChild（IE678）；

• 第一个子节点。
  

  firstElementChild和firstChild。
  微信图片_20181027124234.png

• 最后一个子节点。
  

  lastElementChild和lastChild。
  微信图片_20181027124341.png

• 所有子节点。
  

  childNodes和children。
  微信图片_20181027131433.png

• 补充。

  • 获取任意兄弟节点。
    节点自己.parentNode.children[index];

6.DOM节点操作。

• CRUD（增删改查）。

  • 创建节点。新的标签（节点）= document.createElement（‘标签名’）;
  • 插入节点。父节点.appendChild（新节点）;父节点.insertBefore（新节点，参考节点）;
  • 删除节点。父节点.removeChild（子节点）;当前节点.remove();word.parentNode.removeChild(word);//利用自己删除自己

  • 复制节点。oldNode.cloneNode(true)；
    微信图片_20181029002454.png
    
    

    document.body//拿到文档里的body元素。

• 节点属性（节点.属性）。

  • 获取：getAttribute（名称）。
  • 设置：setAttribute（名称，值）。
  • 删除：removeAttribute（名称）。
  • 注意：IE6、7不支持。

获取：getAttribute(名称)
console.log（img.getAttribute("src"));
设置：setAttribute (名称，值)
img.setAttribute("src","img/pic.jpg");
删除：removeAttribute（名称）
img. removeAttribute("src")

• 相关案例。

图片切换，显示和隐藏图片，宠物相册。
return false;(避免自动跳转)
return和return false的区别：

1. return返回null，起到中断方法执行的效果，只要不return false事件处理函数将会继续执行，表单将提交
2. return false，事件处理函数会取消事件，不再继续向下执行。比如表单将终止提交。

• 补充。

value，innerHTML，innerText。