Mr笔记

Appearance

S04-02 Web-DOM ​

[TOC]

DOM API ​

关系图 ​

EventTarget ​

构造函数

  • EventTarget()：()，创建一个新的 EventTarget 对象实例。

实例方法

Node ​

实例属性

  • Node.parentElement：Element，只读，返回一个当前节点的父节点 Element 。如果当前节点没有父节点或者说父节点不是一个元素 (Element), 这个属性返回 null。
  • Node.parentNode：Node，只读，返回一个当前节点 Node的父节点。如果没有这样的节点返回 null。
  • Node.childNodes：NodeList，只读，返回一个包含了该节点所有子节点的实时的NodeList。NodeList 是动态变化的。
  • Node.firstChild：Node，只读，返回该节点的第一个子节点Node，如果该节点没有子节点则返回null。
  • Node.lastChild：Node，只读，返回该节点的最后一个子节点Node，如果该节点没有子节点则返回null。
  • Node.previousSibling：Node，只读，返回一个当前节点同辈的前一个节点 ( Node) ，如果没有返回null。
  • Node.nextSibling：Node，只读，返回与该节点同级的下一个节点 Node，如果没有返回null。
  • Node.nodeName：DOMString，只读，返回一个包含该节点名字的DOMString。
  • Node.nodeType：number，只读，返回一个与该节点类型对应的无符号短整型的值。
  • Node.nodeValue：string，返回或设置当前节点的值。
  • Node.textContent：string，返回或设置一个元素内所有子节点及其后代的文本内容。
  • 其他：Node.baseURI，Node.baseURIObject，Node.isConnected，Node.ownerDocument，Node.parentElement

实例方法

Document ​

继承：Node - EventTarget

构造函数：

  • Document()：()，创建一个新的 Document 对象。

实例属性：

实例方法：

事件类型：

HTMLDocument ​

继承：Document - Node - EventTarget

实例属性：

实例方法：

XMLDocument ​

继承：Document - Node - EventTarget

没有额外的属性和方法

Element ​

继承：Node - EventTarget

实例属性：

实例方法：

  • Element.append()：(...param)，在元素的最后一个子元素后插入一组 Node 对象或字符串。
  • Element.prepend()：(nodes)，在元素的第一个子元素之前插入一组 Node 对象或字符串。
  • Element.before()：(...param)，在 Element 父节点的子节点列表中插入一组Node对象或字符串，位于 Element 之前。
  • Element.after()：(...node)，在 Element 父节点的子节点列表中插入一组 Node 对象或字符串，位于 Element 之后。
  • Element.insertAdjacentElement()：(position, element)，将指定元素节点插入调用该函数的元素的指定位置。
  • Element.insertAdjacentHTML()：(position, text)，解析 HTML 或 XML 文本，并将生成的节点插入树中指定的位置。
  • Element.insertAdjacentText()：(where, data)，将给定的文本节点插入调用该函数的元素的指定位置。
  • Element.remove()：()，从父元素的子元素列表中删除该元素。
  • Element.replaceChildren()：(...param)，用一组指定的新子节点替换 Node 的现有子节点。
  • Element.replaceWith()：(...param)，用一组 Node 对象或字符串替换父元素子元素列表中的元素。
  • 获取元素：
  • Element.querySelector()：(selectors)，返回相对于元素符合指定选择器字符串的第一个 Node。
  • Element.querySelectorAll()：(selectors)，返回 NodeList 中相对于元素符合指定选择器字符串的节点。
  • Element.getElementsByClassName()：(names)，返回一个实时的 HTMLCollection，其中包含当前元素的所有后代，这些后代拥有参数中给定的类列表。
  • Element.getElementsByTagName()：(tagName)，返回一个实时的 HTMLCollection，其中包含当前元素的特定标签名的所有后代元素。
  • Element.getElementsByTagNameNS()：(namespaceURI, localName)，返回一个实时的 HTMLCollection，其中包含当前元素的特定标签名和命名空间的所有后代元素。
  • 属性操作：
  • Element.getAttribute()：(attributeName)，从当前节点读取指定属性的值，并以字符串形式返回。
  • Element.setAttribute()：(name, value)，设置当前节点的指定属性值。
  • Element.hasAttribute()：(attributeName)，返回一个布尔值，表示元素是否具有指定属性。
  • Element.removeAttribute()：(attrName)，从当前节点删除指定属性。
  • 属性操作-其他：
  • Element.hasAttributes()：()，返回一个布尔值，表示元素是否具有一个或多个 HTML 属性。
  • Element.toggleAttribute()：(name, force?)，在指定的元素上切换布尔属性，如果存在则删除它，如果不存在则添加它。
  • 属性操作-NS：
  • Element.getAttributeNS()：(namespace, name)，从当前节点读取指定名称空间和名称的属性值，并以字符串形式返回。
  • Element.hasAttributeNS()：(namespace,localName)，返回一个布尔值，表示元素是否在指定名称空间中具有指定属性。
  • Element.requestFullscreen()：(options?)，异步要求浏览器全屏显示元素。
  • Element.scroll()：(x, y) | (options)，滚动到指定元素内部的特定坐标。
  • Element.scrollBy()：(x, y) | (options)，以给定数值滚动元素。
  • Element.scrollTo()：(x, y) | (options)，滚动到指定元素内部的特定坐标。
  • Element.scrollIntoView()：(alignToTop?, scrollIntoViewOptions?)，滚动页面，直到元素进入视图。

事件类型：

HTMLElement ​

继承：Element - Document - Node - EventTarget

实例属性：

Event ​

构造函数

  • Event()：(type, options?)，创建并返回一个 Event 对象。

实例属性

实例方法

UIEvent ​

构造函数

  • UIEvent()：(type, options?)，创建一个 UIEvent 对象。

实例属性

MouseEvent ​

继承 UIEvent、Event

构造函数

  • MouseEvent()：(type, options?)，生成一个新的 MouseEvent 对象

实例属性

MouseEvent-DragEvent ​

继承 MouseEvent、Event

构造函数

  • DragEvent()：(type, dragEventInit?)，创建合成和不可信的 DragEvent.

实例属性

事件类型

  • drag：(event) => {}，拖动元素或选择文本时触发此事件。
  • dragend：(event) => {}，当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件。
  • dragenter：(event) => {}，当拖动的元素或选择文本输入有效的放置目标时，会触发此事件。
  • dragleave：(event) => {}，当拖动的元素或文本选择离开有效的放置目标时，会触发此事件。
  • dragover：(event) => {}，当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时，会触发此事件。
  • dragstart：(event) => {}，当用户开始拖动元素或选择文本时触发此事件。
  • drop：(event) => {}，当在有效放置目标上放置元素或选择文本时触发此事件。
MouseEvent-WheelEvent ​

继承：MouseEvent - UIEvent - Event

构造函数

  • WheelEvent()：(type, options?)，创建一个 WheelEvent 对象。

实例属性

KeyboardEvent ​

继承：UIEvent - Event

构造函数

  • KeyboardEvent()：(type, options?)，创建一个新的 KeyboardEvent 对象。

实例属性

事件类型

  • keydown：(event) => {}，一个键被按下。
  • keyup：(event) => {}，一个键被释放。
ClipboardEvent ​

继承：Event

构造函数

  • ClipboardEvent()：(type, options?)，用给定的参数创建了一个 ClipboardEvent 事件。

实例属性

  • ClipboardEvent.clipboardData：DataTransfer，只读，包含了由用户发起的 cut 、 copy 和 paste 操作影响的数据，以及它的 MIME 类型。

事件类型

  • copy：(event) => {}，复制事件。
  • cut：(event) => {}，剪切事件。
  • paste：(event) => {}，粘贴事件。
InputEvent ​

继承：UIEvent - Event

构造函数

  • InputEvent()：(type, options?)，创建一个 InputEvent 对象。

实例属性

  • InputEvent.data：string，只读，返回包含插入字符的字符串，如果更改没有插入文本（例如删除字符时）则该值为空字符串。
  • InputEvent.dataTransfer：DataTransfer，只读，返回一个 DataTransfer 对象，该对象包含有关要添加到可编辑内容，或从可编辑内容中删除的富文本或纯文本数据的信息。
  • InputEvent.inputType：insertText | deleteContentBackward | insertFromPaste | formatBold，只读，返回对可编辑内容所做更改的类型，例如插入、删除或格式化文本。
  • 其他：InputEvent.isComposing

实例方法

  • InputEvent.getTargetRanges()：()，返回一个 StaticRange 对象数组，如果不取消输入事件，该数组将受到 DOM 更改的影响。
TouchEvent ​

继承：UIEvent - Event

构造函数：

  • TouchEvent()：(type, options?)，创建一个TouchEvent对象。

实例属性：

  • TouchEvent.touches：TouchList，只读，一 个 TouchList 对象，包含了所有当前接触触摸平面的触点的 Touch 对象，无论它们的起始于哪个 element 上，也无论它们状态是否发生了变化。
  • TouchEvent.targetTouches：TouchList，只读，一个 TouchList 对象，是包含了如下触点的 Touch 对象：触摸起始于当前事件的目标 element 上，并且仍然没有离开触摸平面的触点。
  • TouchEvent.changedTouches：TouchList，只读，一个 TouchList 对象，包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 Touch 对象。
  • **其他：**TouchEvent.altKey，TouchEvent.ctrlKey，TouchEvent.metaKey，TouchEvent.shiftKey

事件类型：

  • touchstart：(event) => {}，当用户在触摸平面上放置了一个触点时触发。
  • touchend：(event) => {}，当一个触点被用户从触摸平面上移除（即用户的一个手指或手写笔离开触摸平面）时触发。当触点移出触摸平面的边界时也将触发。
  • touchmove：(event) => {}，当用户在触摸平面上移动触点时触发。
  • touchcancel：(event) => {}，当触点由于某些原因被中断时触发。如被弹窗打断，离开了文档窗口，触点个数超标。

其他 ​

HTMLCollection ​

实例属性：

实例方法：

  • HTMLCollection.item()：(index)，根据给定的索引（从 0 开始），返回具体的节点。超出则返回 null。
  • HTMLCollection.namedItem()：(key)，根据 ID 返回指定节点，若不存在，则根据字符串所表示的 name 属性来匹配。

NodeList ​

实例属性：

实例方法：

  • NodeList.item()：(index)，返回 NodeList 对象中指定索引的节点，索引越界则返回null。
  • NodeList.entries()：()，返回一个迭代协议，允许遍历此对象中包含的所有键/值。
  • NodeList.keys()：()，遍历这个对象中包含的所有的键。
  • NodeList.values()：()，遍历该对象中包含的所有值（Node 对象）的迭代器。
  • NodeList.forEach()：(callback, thisArg?)，按插入顺序为列表中的每个值对调用一次参数中给定的回调。即遍历 NodeList。

DataTransfer ​

构造函数：

  • DataTransfer()：()，生成并且返回一个新的 DataTransfer 对象。

实例属性：

  • DataTransfer.dropEffect：none | copy | link | move，获取当前选定的拖放操作类型或者设置的为一个新的类型。
  • DataTransfer.effectAllowed：none | copy | copyLink | copyMove | link | linkMove | move | all | uninitialized，提供所有可用的操作类型。
  • DataTransfer.files：File[]，包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为空列表。
  • DataTransfer.items：DataTransferItemList，只读，提供一个包含所有拖动数据列表的 DataTransferItemList 对象。
  • DataTransfer.types：string[]，只读，一个提供 dragstart 事件中设置的格式的 strings 数组。

实例方法：

  • DataTransfer.getData()：(format)，检索给定类型的数据，如果该类型的数据不存在或 data transfer 不包含数据，则返回空字符串。
  • DataTransfer.setData()：(format, data)，设置给定类型的数据。如果该类型的数据不存在，则将其添加到末尾，以便类型列表中的最后一项将是新的格式。如果该类型的数据已经存在，则在相同位置替换现有数据。
  • DataTransfer.clearData()：(format?)，删除与给定类型关联的数据。
  • DataTransfer.setDragImage()：(imgElement, xOffset, yOffset)，用于设置自定义的拖动图像。

概述 ​

API的概念 ​

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

  • 任何开发语言都有自己的API
  • API的特征输入和输出(I/O)
    • var max = Math.max(1, 2, 3);
  • API的使用方法(console.log('adf'))

Web API的概念 ​

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

掌握常见浏览器提供的API的调用方式 ​

MDN-Web API

JavaScript的组成 ​

ECMAScript - JavaScript的核心 ​

定义了JavaScript 的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

BOM - 浏览器对象模型 ​

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型 ​

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM ​

DOM的概念 ​

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格(目前，HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

DOM又称为文档树模型

  • 文档：一个网页可以称为文档
  • 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
  • 元素：网页中的标签
  • 属性：标签的属性

DOM经常进行的操作 ​

  • 获取元素
  • 对元素进行操作(设置其属性或调用其方法)
  • 动态创建元素
  • 事件(什么时机做相应的操作)

获取页面元素 ​

为什么要获取页面元素 ​

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作

根据id获取元素 ​

javascript
var div = document.getElementById('main');
console.log(div);

// 获取到的数据类型 HTMLDivElement，对象都是有类型的

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

根据标签名获取元素 ​

javascript
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}
js
// getElement***获取到的集合是一个动态集合
// querySelector(All) 获取到的集合是一个静态集合

var oUl = document.getElementById('my-ul');
var aLi = oUl.getElementsByTagName('li');

// 这里必须要把aLi.length从for里面拿出来，
// 否则的话每次for循环都会运行一遍aLi.length
// 而由于appendChild在生成新的li，所以aLi的长度是变化的，就会形成一个死循环
var len = aLi.length;	
for(var i = 0; i < len; i++){
  oUl.appendChild( document.createElement('li') );
}
console.log(aLi.length);

根据name获取元素* ​

​ 兼容：在IE和Opera中， getElementsByName() 方法还会返回那些 id 为指定值的元素

javascript
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

根据类名获取元素* ​

​ 兼容：IE9+才支持

javascript
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

根据选择器获取元素* ​

​ 兼容：IE8+支持

​ getElement*** 获取到的集合是一个动态集合 ​ querySelector(All) 获取到的集合是一个静态集合

javascript
var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}
  • 总结
掌握
	getElementById()
	getElementsByTagName()
了解
	getElementsByName()
	getElementsByClassName()
	querySelector()
	querySelectorAll()

事件 ​

事件：触发-响应机制

事件三要素 ​

  • 事件源:触发(被)事件的元素
  • 事件名称: click 点击事件
  • 事件处理程序:事件触发后要执行的代码(函数形式)

事件的基本使用 ​

javascript
var box = document.getElementById('box');
box.onclick = function() {
  console.log('代码会在box被点击后执行');  
};

案例 ​

  • 点击按钮弹出提示框
  • 点击按钮切换图片

属性操作 ​

非表单元素的属性 ​

href、title、id、src、className

javascript
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

案例：

​ 点击按钮显示隐藏div

​ 美女相册

  • innerHTML和innerText*
javascript
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);
  • HTML转义符
"		&quot;
'		&apos;
&		&amp;
<		&lt;   // less than  小于
>		&gt;   // greater than  大于
空格	   &nbsp;
©		&copy;

  • innerHTML和innerText的区别

    innerHTML 获取内容的时候，如果内容中有标签，会把标签也获取到，而且是原封不动的获取
innerText 获取内容的时候，如果内容中有标签，会把标签过滤掉，并且会把前后的换行和空白都去掉，只保留一个空格

  • innerText的兼容性处理 ​

表单元素属性 ​

  • value 用于大部分表单元素的内容获取(option除外)
  • type 可以获取input标签的类型(输入框或复选框等)
  • disabled 禁用属性
  • checked 复选框选中属性
  • selected 下拉菜单选中属性

案例 ​

  • 点击按钮禁用文本框
  • 给文本框赋值，获取文本框的值
  • 检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
  • 设置下拉框中的选中项
  • 搜索文本框
  • 全选反选

自定义属性操作 ​

  • getAttribute() 获取标签行内属性
  • setAttribute() 设置标签行内属性
  • removeAttribute() 移除标签行内属性
  • 与element.属性的区别: 上述三个方法用于获取任意的行内属性。

样式操作 ​

  • 使用style方式设置的样式显示在标签行内
javascript
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

  • 注意

    通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

设置多个样式@ ​

方式一：style.cssText：可以通过修改 style.cssText 属性来一次性设置多个 CSS 样式

js
// 获取元素
const element = document.getElementById("myElement");

// 一次性修改多个样式
element.style.cssText = "background-color: red; font-size: 20px; color: white;";

方式二：setAttribute()：可以通过 setAttribute 方法设置 style 一次性修改多个样式

js
// 获取元素
const element = document.getElementById("myElement");

// 一次性修改多个样式
element.setAttribute("style", "background-color: red; font-size: 20px; color: white;");

方式三：Object.assign()：可以通过JS的 Object.assign() 方法将多个样式合并到元素的 style 属性中。

js
// 获取元素
const element = document.getElementById("myElement");

// 使用 Object.assign 一次性设置多个样式
Object.assign(element.style, {
  backgroundColor: 'red',
  fontSize: '20px',
  color: 'white'
});

类名操作 ​

  • 修改标签的className属性相当于直接修改标签的类名
javascript
var box = document.getElementById('box');
box.className = 'show';

案例 ​

  • 开关灯
  • 点击按钮改变div的背景颜色
  • 图片切换二维码案例
  • 当前输入的文本框高亮显示
  • 点击按钮改变div的大小和位置
  • 列表隔行变色、高亮显示
  • tab选项卡切换

创建元素的三种方式 ​

document.write() ​

javascript
document.write('新设置的内容<p>标签也可以生成</p>');

innerHTML ​

javascript
var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';

document.createElement() ​

javascript
var div = document.createElement('div');
document.body.appendChild(div);

性能问题 ​

  • innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
  • 可以借助字符串或数组的方式进行替换，再设置给innerHTML
  • 优化后与document.createElement性能相近

案例 ​

  • 动态创建列表，高亮显示
  • 根据数据动态创建表格

节点操作 ​

javascript
var body = document.body;
var div = document.createElement('div');
body.appendChild(div);

var firstEle = body.children[0];
body.insertBefore(div, firstEle);

body.removeChild(firstEle);

var text = document.createElement('p');
body.replaceChild(text, div);

案例：

​ 选择水果

节点属性 ​

  • nodeType 节点的类型
    • 1 元素节点
    • 2 属性节点
    • 3 文本节点
  • nodeName 节点的名称(标签名称)
  • nodeValue 节点值
    • 元素节点的nodeValue始终是null

模拟文档树结构 ​

javascript
function Node(option) {
  this.id = option.id || '';
  this.nodeName = option.nodeName || '';
  this.nodeValue = option.nodeValue || '';
  this.nodeType = 1;
  this.children = option.children || [];
}

var doc = new Node({
  nodeName: 'html'
});
var head = new Node({
  nodeName: 'head'
});
var body = new Node({
  nodeName: 'body'
})
doc.children.push(head);
doc.children.push(body);

var div = new Node({
  nodeName: 'div',
  nodeValue: 'haha',
});

var p = new Node({
  nodeName: 'p',
  nodeValue: '段落'
})
body.children.push(div);
body.children.push(p);

function getChildren(ele) {
  for(var i = 0; i < ele.children.length; i++) {
    var child = ele.children[i];
    console.log(child.nodeName);
    getChildren(child);
  }
}
getChildren(doc);

节点层级 ​

javascript
var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);

  • 注意

    childNodes和children的区别，childNodes获取的是子节点，children获取的是子元素

    nextSibling和previousSibling获取的是节点，获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素

    ​ nextElementSibling和previousElementSibling有兼容性问题，IE9以后才支持

  • 总结

节点操作，方法
	appendChild()
	insertBefore()
	removeChild()
	replaceChild()
节点层次，属性
	parentNode
	childNodes
	children
	nextSibling/previousSibling
	firstChild/lastChild

事件详解 ​

注册/移除事件的三种方式 ​

javascript
var box = document.getElementById('box');
box.onclick = function () {
  console.log('点击后执行');
};
box.onclick = null;

box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  console.log('点击后执行');
}

兼容代码 ​

javascript
function addEventListener(element, type, fn) {
  if (element.addEventListener) {
    element.addEventListener(type, fn, false);
  } else if (element.attachEvent){
    element.attachEvent('on' + type,fn);
  } else {
    element['on' + type] = fn;
  }
}

function removeEventListener(element, type, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(type, fn, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + type, fn);
  } else {
    element['on'+type] = null;
  }
}

事件的三个阶段 ​

  1. 捕获阶段

  2. 当前目标阶段

  3. 冒泡阶段

    事件对象.eventPhase属性可以查看事件触发时所处的阶段

事件对象的属性和方法 ​

  • event.type 获取事件类型
  • clientX/clientY 所有浏览器都支持，窗口位置
  • pageX/pageY IE8以前不支持，页面位置
  • event.target || event.srcElement 用于获取触发事件的元素
  • event.preventDefault() 取消默认行为

案例 ​

  • 跟着鼠标飞的天使
  • 鼠标点哪图片飞到哪里
  • 获取鼠标在div内的坐标

阻止事件传播的方式 ​

  • 标准方式 event.stopPropagation();
  • IE低版本 event.cancelBubble = true; 标准中已废弃

常用的鼠标和键盘事件 ​

  • onmouseup 鼠标按键放开时触发
  • onmousedown 鼠标按键按下触发
  • onmousemove 鼠标移动触发
  • onkeyup 键盘按键按下触发
  • onkeydown 键盘按键抬起触发

特效 ​

偏移量 ​

  • offsetParent用于获取距离当前元素最近的定位父级元素
  • offsetParent和parentNode的区别
javascript
var box = document.getElementById('box');

console.log(box.offsetParent);
// 获取距离当前元素最近的定位父级元素
console.log(box.offsetLeft);
console.log(box.offsetTop);
// 大小包括border和padding
console.log(box.offsetWidth);
console.log(box.offsetHeight);

客户区大小 ​

javascript
var box = document.getElementById('box');
// client** 是border的宽度
console.log(box.clientLeft);
console.log(box.clientTop);
// 获取大小 包括padding 但是不包括border
console.log(box.clientWidth);
console.log(box.clientHeight);

滚动偏移 ​

javascript
var box = document.getElementById('box');
// box 滚动出去的距离
console.log(box.scrollLeft)
console.log(box.scrollTop)

console.log(box.scrollWidth)
console.log(box.scrollHeight)

案例 ​

  • 拖拽案例
  • 弹出登录窗口
  • 放大镜案例
  • 模拟滚动条
  • 匀速动画函数
  • 变速动画函数
  • 无缝轮播图
  • 回到顶部

附录 ​

元素的类型 ​