JS特效-BOM和DOM
一.javascript的组成
-
ECMAScript
- JavaScript的标准规范
- ES6
- JavaScript的标准规范
-
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
微信图片_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的区别：
- return返回null，起到中断方法执行的效果，只要不return false事件处理函数将会继续执行，表单将提交
- return false，事件处理函数会取消事件，不再继续向下执行。比如表单将终止提交。
-
补充。
value，innerHTML，innerText。
