复习-DOM

1.访问元素节点的常用方法

方法	功能	兼容性
document.getElementById()	通过id得到元素	IE6
document.getElementByTagName()	通过标签名得到元素数组	IE6
document.getElementsByClassName()	通过类名得到元素数组	IE9
document.querySelector()	通过选择器得到元素	IE8部分兼容,IE9全部兼容
document.querySelectorAll()	通过选择器得到元素数组	IE8部分兼容,IE9全部兼容

2. 节点的关系有哪些

节点的关系也是可以获得节点的

• 得到节点的属性
  childNodes, parentNode, firstChild, lastChild, previousSibling, nextSibling
• 只有元素节点, 不考虑文本节点等其他节点的属性
  children, parentNode, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling

3.常见的节点操作有哪些?

1. 改变文本的内容: innerHTML和innerText属性. 两者的区别就是innerHTML可以解析标签
2. 更改CSS样式, 使用xxx.style.驼峰属性 = ‘…’
3. 改变html的属性: 标准W3C属性, 如src, href属性, 使用xxx.属性= ‘…’, 非标准W3C,如"data-"属性需要使用setAttribute属性来修改(xxx.dataset.驼峰名 = ‘’)和getAttribute属性来进行读取

4.节点的创建, 移除和克隆要如何实现?

1. 节点的创建: 使用createElement()方法, 但是创建出来的是孤儿节点, 必须使用插入节点的方法才能上树, appendChild()或者insertBefore()用来把新的节点添加到父节点上, appendChild是追加, insertBefore是在之前插
2. 移除节点: 使用removeChild(), 一定要主要不能自删, 必须使用父节点
3. 克隆节点: 使用cloneNode()方法, 有一个参数, true表示连着后代节点都克隆(深克隆), false表示只克隆本身.

5.事件监听

5.1 常见的事件监听

1. 鼠标事件
   onclick/ondblclick/onmousedown/onmouseup/onmousemove/onmouseenter/onmouseleave/onmousewheel
2. 键盘事件
   onkeydown/onkeyup
3. 表单事件
   onchange/oninput/onfocus/onblur/onsubmit/onreset
4. 页面事件 (更多关于窗口和页面的事件在BOM中介绍)
   onload 页面加载完成/onunload 用户退出页面

6. 事件传播-事件捕获和事件冒泡是什么?

1. 从最外层元素传播到最内层元素(捕获阶段), 然后再从最内层元素传播到最外层元素(冒泡阶段), 先捕获再冒泡
   DOM0级事件监听: onxxx只能监听冒泡阶段
   DOM2级事件监听: addEventListener()方法, 最后一个参数true表示捕获, false表示冒泡

oBox.addEventListener('click', function(){

},false)
//参数1: 事件名不用加on
//参数2: 回调函数/事件处理函数
//参数3:true监听捕获阶段, false监听冒泡阶段

注意事项:

1. 最内层元素的书写顺序是能够影响执行顺序的, 先写谁就先执行谁
2. 如果给元素设置同名事件, DOM0级写法会覆盖, 而DOM2级会按顺序执行

7. 事件对象

事件对象: 事件处理函数提供一个形式参数, 它是一个对象, 封装了本次事件的细节.
一般使用字母event/ev/e表示

oBox.addEventListener('click', function(e){
	//形参对象e是"事件对象"
},false)
//实际参数由谁传? 对于事件处理函数来说, 触发它的是事件, 所以由浏览器或者由操作系统为我们传入这次事件的事件对象
//(事件对象中封装了本次事件的一些细节)

1.事件对象的作用:

事件对象里面的属性和方法比较多, 挑几个比较常见的回忆一下.

2. 鼠标位置的相关属性

在触发鼠标事件时, 描述鼠标位置的一些属性

属性	属性描述
clientX	鼠标位置相对于浏览器的水平坐标
clientY	鼠标位置相对于浏览器的垂直坐标
pageX	鼠标位置相对于整张网页的水平坐标
pageY	鼠标位置相对于整张网页的垂直坐标
offsetX	鼠标位置相对于事件源的水平坐标
offsetY	鼠标位置相对于事件源的垂直坐标

注意: offsetX和offsetY计算的是最内层元素.

3. e.charCode和e.keyCode属性

• e.charCode属性通常用于onkeypress事件中, 表示用户输入的"字符码"
• e.keyCode属性通常用于onkeydown事件和onkeyup事件中, 表适用用户按下的"键码"

onkeydown要比onkeypress事件能够响应系统按键, ←↑→↓, 回车键, F1~F12

4. e.preventDefault()方法

• e.preventDefault()方法用来阻止事件产生的"默认动作"

5. e.deltaY属性

鼠标滚轮事件onmousewheel, 它的事件对象e提供deltaY属性表示滚轮的方法, 向下滚动时返回正值, 向上滚动时返回负值.

6. e.stopPropagation()方法

• e.stopPropagation()方法用来阻止事件继续传播

事件是分为两个阶段进行传播的①捕获阶段②冒泡阶段, e.stopPropagation可以阻止任何这两个事件传播的

8.事件委托

事件委托: 利用事件冒泡机制, 将后代元素事件委托给祖先元素(父元素).这样的话点击父元素视为点击了子元素.

  <ul id="list">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
  </ul>
  //点击任何的li元素, 事件都会通过冒泡这个机制传给祖先元素.

1.4.1 e.target和e.currentTarget属性

属性	属性描述
target	触发此事件的最内层元素, “事件源元素”
currentTarget	事件处理程序附加到的元素

1. e.currentTarget表示当前事件处理函数附加到的这个元素,
   它和this非常相似的, 在事件处理函数中, this是指向事件处理程序附加的元素
2. 在ul的onclick事件当中写e.target属性就可以得到到底是用户点击的哪个li来触发的这个事件.

1.4.2 事件委托的使用场景

1. 当有大量类似元素需要批量添加事件监听时, 使用事件委托可以减少内存开销.
2. 当有动态元素节点上树时, 使用事件委托可以让新上树的元素具有事件监听.

1.4.3 事件委托的注意事项

1. 不能使用不冒泡的事件给祖先元素
   onmouseenter不冒泡, onmouseover冒泡 都表示"鼠标进入"
2. 最内层元素不能再有额外的内层元素了

9. 定时器和延时器

省略

10. 异步语句

setInterval()和setTimeout()是两个异步语句

11. JS和CSS3结合实现动画

JS和CSS3结合实现动画规避了定时器制作动画的缺点
有很多案例->看笔记
注意:

• 使用定时器setInterval一定要注意: 里面有一个"设表先关,防止积累"技巧.
• 使用CSS3过渡, 里面有一个函数节流锁的算法知识

12. 函数节流

// 函数节流的公式
var lock = true;
function 需要节流的函数() {
  // 如果锁是关闭状态, 则不执行
  if(!lock) return;
  // 函数核心语句

  // 关锁
  lock = false;

  // 指定毫秒数后将锁打开
  setTimeout(function(){
    lock = true;
  }, 2000);
}