JS 4.18

JS

---

1.操作元素

1.1获取元素属性

• element.属性------获取元素内置属性
• element.getAttribute（’’）-----------可获取自定义属性

1.2设置元素属性

• element.属性 = ‘值’
• element.getAttribute（‘属性’ ‘值’）

1.3导航栏案例

给每个导航栏设置自定义属性index，点击某个li，显示相应index，其余隐藏

1.4自定义属性

H5规定自定义属性以data- 开头
H5新增获取自定义属性：element.dataset.属性
element.dataset [ ’ ’ ]
dataset是集合，存放所有以data开头的自定义属性
若自定义属性名中存在-，获取时用驼峰命名法，如list-name转换为listName

2.节点操作

元素节点nodeType ：1
属性节点nodeType ：2
文本节点nodeType ：3

2.1父节点

parentNode—获取最近的父节点，找不到返回为空

2.2子节点

childNodes—子节点包括文本节点
需要专门处理来获得元素节点，一般不提倡使用childNodes

for (var i = 0; i < ul.childNodes.length; i++){
    if (ul.childNodes[i].nodeType == 1) {
        console.log(ul.childNodes[i]);
    }
}

• 子节点（非标准）parentNode.children–只获取子元素，常用
• parentNode.firstChild–获取第一个子节点，无论是文本节点还是元素节点
• parentNode.firstElementChild–获取第一个元素节点（IE9以上支持）
• 实际开发：parentNode.children [ i ]

2.3兄弟节点

nextSibling下一个兄弟节点，包括文本节点
previousSibling下一个兄弟节点，包括文本节点
nextElementSibling下一个兄弟元素节点（IE9以上）
previousElementSibling上一个兄弟元素节点（IE9以上）

2.4创建节点

document.createElement（‘tagName’）动态创建元素节点

2.5添加节点

node.appendChild（）将节点添加到指定父节点的子节点列表末尾
node.insertBefore (child , 指定元素)在指定元素前插入节点

2.6删除节点

node.removeChild（child）
阻止链接跳转：href=“javascript:;”

2.7复制节点

node.cloneNode（）
括号参数为空或false，只克隆节点本身，不克隆子节点
括号里为true，复制节点的内容

2.8动态创建元素

• document.write() 文档流执行完毕，会导致页面全部重绘
• element.innerHTML创建多个元素时效率更高（不要拼接字符串，采取数组形式拼接join）
• document.createElement() 创建多个元素时效率低一些，但是结构清晰

3.事件

3.1注册事件

传统注册方式

利用on开头，具有唯一性，后面的事件会覆盖前面的事件

方法监听注册方式

addEventListener（）
IE9之前不支持，用attachEvent（）代替—尽量不适用
evenTarget.addEventListener（type,listener [ , useCapture ]）事件类型为字符串，要加引号，不带on。listener为处理函数

3.2删除事件

传统方式

div[0].onclick = null;

方法监听方式

evenTarget.removeEventListener（type,listener [ , useCapture ]）
evenTarget.removeEventListener（‘click’ ,fn）里面的fn不需要调用加（）

3.3DOM事件流

事件发生时在元素节点间按特定顺序传播，整个过程称为事件流
3个阶段：

• 捕获阶段
• 当前目标阶段
• 冒泡阶段
  JS代码中智能捕获或冒泡其中一个阶段，onclick和attachEvent只能得到冒泡阶段
• 如果 evenTarget.addEventListener（type,listener [ , useCapture ]）第三个参数为true，则处于捕获阶段
  document → html → body → father → son
• 如果 evenTarget.addEventListener（type,listener [ , useCapture ]）第三个参数为false或省略，则处于冒泡阶段
  son → father → body → html → document
  开发中更关注冒泡阶段，但onblur,onfocus,onmouseente,onmouseleave没有冒泡

3.4事件对象

写到侦听函数的小括号里，当形参来看function（event）
事件对象是事件中与事件有关的一系列相关数据的集合，事件对象可以自己命名，IE9以上支持，IE678用window.event

3.4事件对象常见属性和方法

• e.target返回的是触发事件的对象，this返回绑定事件的对象
• 阻止默认行为，比如让链接不跳转，提交按钮不提交
  e.preventDefault();
  IE678使用e.returnValue
  也可以直接return false解决兼容问题，但后面代码不再执行，只限于传统注册方式

阻止冒泡

• 标准写法：stopPropagation（）
• 非标准：cancelBubble = true

事件委托（代理）

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响设置每个子节点
只操作一次DOM，提高了程序性能

3.5常用鼠标事件

禁止鼠标右键菜单

contextmenu控制何时现实上下文菜单使用e.preventDefault();
如

document.addEventListener('contextmenu' , function(e) {
   		e.preventDefault();
}

禁止鼠标选择

selectstart禁止选中文字

document.addEventListener('selectstart' , function(e) {
   		e.preventDefault();
}

鼠标事件对象

移动时，将坐标作为变量记得加px

3.6常用键盘事件

onkeyup（）键盘弹起时触发事件
onkeydown（）按下时触发事件
onkeypress（）按下时触发，不识别功能键
执行顺序 down → press → up

键盘事件对象

keyCode：返回ASCII值
keyup和keydown不区分大小写
keypress区分大小写
search.focus（）；获得焦点
keydown和keypress在文本框时：触发事件时，文字还没有落入文本框