发表于： 2018-05-25 23:07:53
1 561
今天完成的事情： 学习了解js知识。
学习了解DOM节点
学习了解数组，
尝试制作js1任务
明天计划的事情：继续学习Js知识，继续js1任务。
遇到的问题：不断点击开始，定时器会叠加。
收获：
DOM
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。
DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种。
Document：整个文档树的顶层节点DocumentType：doctype标签（比如<!DOCTYPE html>）Element：网页的各种HTML标签（比如<body>、<a>等）Attribute：网页元素的属性（比如class="right"）Text：标签之间或标签包含的文本Comment：注释DocumentFragment：文档的片段
浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。
文档的第一层只有一个节点，就是 HTML 网页的第一个标签<html>，它构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。
除了根节点，其他节点都有三种层级关系。
- 父节点关系（parentNode）：直接的那个上级节点
- 子节点关系（childNodes）：直接的下级节点
- 同级节点关系（sibling）：拥有同一个父节点的节点
DOM 提供操作接口，用来获取这三种关系的节点。比如，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。
鼠标事件
鼠标事件指与鼠标相关的事件，继承了MouseEvent接口。具体的事件主要有以下一些。
click：按下鼠标（通常是按下主按钮）时触发。dblclick：在同一个元素上双击鼠标时触发。mousedown：按下鼠标键时触发。mouseup：释放按下的鼠标键时触发。mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件（详见后文）。mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件（详见后文）。mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件（详见后文）。mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件（详见后文）。contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文菜单键”时触发。wheel：滚动鼠标的滚轮时触发，该事件继承的是WheelEvent接口。
数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。
var arr = ['a', 'b', 'c'];上面代码中的a、b、c就构成一个数组，两端的方括号是数组的标志。a是0号位置，b是1号位置，c是2号位置。
除了在定义时赋值，数组也可以先定义后赋值。
var arr = [];arr[0] = 'a';arr[1] = 'b';arr[2] = 'c';任何类型的数据，都可以放入数组。
var arr = [
{a: 1},
[1, 2, 3],
function() {return true;}];arr[0] // Object {a: 1}arr[1] // [1, 2, 3]arr[2] // function (){return true;}上面数组arr的3个成员依次是对象、数组、函数。
返回列表
评论