JS正则

alert(str.match(re)); match 把所有匹配的东西全部提取出来

var re = /\d+/g;

+：若干（多少都可以） g global 找到全部

转译

\d 数字 [0-9] \w 英文 数字 下划线 \s 空白字符

获取元素方式

• getElementsByClassName('box') 根据类名获得某些元素集合
• querySelector('.box') 返回指定选择器的第一个元素对象 里面的选择器需要加符号 .box #nav
• querySelectorAll('.box') 返回指定选择器的所有元素对象集合

事件

步骤

触发相应的一种机制。

• 获取事件源：事件被处罚的对象
• 绑定事件
• 添加事件处理程序

innerText&innerHTML

均 可读写，可以获取元素里面的内容

innerText

• 不识别html标签
• 去除空格和换行

innerHTML

• 识别html标签
• 保留空格和换行
• W3C标准

获取元素属性值

1.element.属性

2.element.getAttribute('属性')

我们自己添加的属性——自定义属性 eg. div.getAttribute('index')

设置元素属性值

1.element.属性 = '值'

2.element.setAttribute("属性","值"); （主要针对自定义属性

H5自定义属性

设置H5自定义属性

H5规定自定义属性以data-开头做属性名。

element.setAttribute("data-index",2)
div.getAttribute("data-index")
div.dataset
div.dataset.index
div.dataset["index"]
div.dataset.listName

1. element.setAttribute(name, value);

设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。

1. let attribute = element.getAttribute(attributeName);

getAttribute()返回元素上一个指定的属性值。如果指定的属性不存在，则返回null或 ""（空字符串）

1. element.removeAttribute(attrName);

元素方法removeAttribute()从指定的元素中删除一个属性

<div getTime="10" data-index="2" data-list-name="gloucester"></div>

#节点操作

1.节点概述

一般的，节点至少拥有nodeType（节点类型），nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

• 元素节点nodeType为1
• 属性节点nodeType为2
• 文本节点nodeType为3（文本节点不包括文字/空格/换行等）

2.节点层级

子节点

（标准）parentNode.childNodes返回值里包含所有子节点，如果需要获得某一特定节点，如元素节点，则需要专门处理。

（非标准）parentNode.children只返回子元素节点，其余节点不返回。

firstChild 第一个子节点

firstElementChild 第一个元素节点

(IE9以上才支持

parentNode.children[0]

parentNode.children[parentNode.children.length - 1]

兄弟节点

• node.nextSibling返回当前元素的下一个兄弟节点。
• node.nextElementSibling返回当前元素的下一个兄弟元素节点，找不到则返回null。
• node.previousElementSibling

添加节点

node.appendChild(child) node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里的after伪元素。

node.insertBefore(child,指定元素)

复制节点

node.cloneNode()

• 如果括号参数为空/false，则是浅拷贝，即只克隆节点本身，不克隆里面的子节点。
• 如果括号参数为true，则是深拷贝，克隆节点本身，并且克隆里面的子节点。

三种动态创建元素区别

• document.write()
• element.innerHTML
• document.createElement()

区别：

1. document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。
2. innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。
3. innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。

createElement()创建多个元素效率稍低一点，但是结构更清晰。

注册事件

注册事件概述：给元素添加事件

1.传统注册方式

• 利用on开头的事件
• 特点：注册事件的唯一性
• 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

2.方法监听注册方式

• addEventListener()
• IE9以前：attachEvent()
• 特点：同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行。

删除事件

删除事件的方式

1.传统注册方式

eventTarget.onclick = null;

2.方法监听注册方式

eventTarget.removeEventListener(type, listener[, useCapture]);

DOM事件流：事件传播过程

DOM事件流分为三个阶段：

1.捕获阶段

2.当前目标阶段

3.冒泡阶段

注意：

1. JS代码中只能执行捕获/冒泡其中的一个阶段
2. onclick,attachEvent只能得到冒泡阶段
3. addEventListener(type, listener[, useCapture])第三个参数如果是ture，表示在事件捕获阶段调用事件处理程序；如果是false/不写，表示在事件冒泡阶段调用事件处理程序。
4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
5. 有些事件是没有冒泡的，比如onblur,onfocus,onmouseover,onmouseleave。
6. 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙地做某些事情。

事件对象

1. event就是一个事件对象，写到侦听函数的小括号里面，当形参来看。
2. 事件对象只有有了事件才会存在，它是系统给自动创建的，不需要我们传递参数。
3. 事件对象是事件的一系列相关数据的集合。如鼠标点击里面就包含了鼠标的相关信息：鼠标坐标等。
4. 事件对象可以自己命名，如event,evt,e
5. 事件对象也有兼容性问题，ie678通过 window.event兼容性的写法e = e || window.event;

事件对象常见属性和方法

• e.target:返回触发事件的对象（即我们点击的那个对象

• e.srcElement：返回触发事件的对象，非标准，ie6-8使用。

• e.type: 返回事件的类型，比如click,mouseover,不带on。

• e.returnValue：阻止默认行为（事件），非标准，ie678，如让链接不跳转。

• e.preventDefault()：阻止默认行为（事件），标准。

• e.stopPropagation

事件对象阻止默认行为

阻止默认行为（事件），比如不让链接跳转，或者让提交按钮不提交。

1. 方法监听注册方式

dom标准写法： event.preventDefault();

var a = document.querySelector("a");
a.addEventListener("click", function(e) {
e.preventDefault();
});

2. 传统注册方式

• 普通浏览器：e.preventDefault();
• 低版本浏览器（ie678）：return false;

没有兼容性问题，但return 后面的代码不执行了，而且只限于传统的注册方式。

事件委托

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用事件冒泡影响每一个子节点。

常用的鼠标事件

鼠标事件对象

• e.clientX/e.clientY：返回鼠标相对于可视区的x和y坐标。
• e.pageX/e.pageY：返回鼠标相对于文档页面的x和y坐标。

常用的键盘事件

• onkeyup：按键弹起的时候触发。
• onkeypress：按键按下的时候触发，不能识别功能键，如ctrl，shift，左右箭头。
• keydown：按键按下的时候触发，能识别功能键，如ctrl，shift，左右箭头。

三个事件的执行顺序：keydown -- keypress -- keyup

JS执行机制

1. 先执行执行栈中的同步任务。
2. 异步任务（回调函数）放入任务队列中。
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

location对象

location.href：获取或设置整个URL。 location.search：返回参数。 location.hash：返回片段#后面的内容，常见于链接/锚点

offset系列

offset与style区别

offset

• 可以得到任意样式表中的样式值
• 获得的数值无单位
• offsetWidth包含padding+border+width
• offsetWidth只读属性，不能赋值。

style

• 只能得到行内样式表中的样式值
• style.width获得的是带有单位的字符串
• style.width获得不包含padding, border的值
• style.width是可读写属性，既可以获取也可以赋值

三大系列总结

• element.offsetWidth
• element.clientWidth：返回padding，内容区宽度，不含border，返回数值不带单位。
• element.scrollWidth：返回自身实际宽度，不含border，返回数值不带单位。
• 页面滚动的距离通过window.pageXOffset获得

立即执行函数

1.立即执行函数：不需要调用，立马能够自己执行的函数

2.写法

(function(){})() (function(){}()) 也可以传递参数进来，第二个小括号可以看作是调用函数。

3.立即执行函数的作用

独立创建了一个作用域，不存在命名冲突。