H5新增元素获取方式
var box = document.querySelector('选择器')
var box = document.querySelector('.box')//class选择器
var box = document.querySelector('#box')//id选择器
querySelector根据指定元素返回第一个元素对象
var box = document.querySelectorAll('.box')
querySelectorAll()返回指定选择器的所有元素对象集合
获取特殊元素
- 获取body元素
var bodyEle = document.body
- 获取HTML元素
var htmlEle = document.documentElement
常见的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
innerText 和innerHTML区别
element.innerText
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
区别：
- innerText不识别html标签，非标准，去除空格和换行
- innerHTML识别html标签，W3C标准，保留空格和换行
修改样式属性
element.style //行内样式操作
element.className //类名样式操作
注意：
- JS里面的样式采取驼峰命名方法，比如fontSize、backgroundColor
- JS修改style样式操作，产生的是行内样式，css权重比较高
- 如果样式修改较多，可以采取操作类名方式更改元素样式
- class因为是个保留字，因此使用className来操作元素类名属性
- className会直接更改元素的类名，会覆盖原先的类名
- 修改元素的className更改元素的样式时，如果想要保留原先的类名，可以采用多类名选择器
this.className = "first second"
排他思想
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//1.获取所有按钮
var btns = document.getElementsByTagName('button')
//btn得到的是伪数组，里面的每一个元素btns[i]
for(var i = 0 ; i < btns.length ; i++){
btns[i].onclick = function(){
//（1）先把所有的按钮背景颜色去掉，干掉所有人
for(var i = 0 ; i < btns.length ; i++){
btns[i].style.backgroundColor = ""
}
//（2）然后才设置当前的背景颜色，留下我自己
this.style.backgroundColor = "yellow"
}
}
//2.首先排除其他人，然后才设置自己的样式，这种排除其他人的思想称为排他思想
</script>
自定义属性的操作
1. 获取属性值
- element.属性 获取属性值
- element.getAttribute('属性');
区别：
- element.属性 获取内置属性值（元素本身自带的属性）
- element.getAttribute('属性')； 主要获得自定义的属性（标准）我们自己定义的属性
2.设置属性值
- element.属性 = '值' 设置内置属性值
- element.setAttribute('属性','值')； 主要针对于自定义属性（标准）
3.移除属性
- element.removeAttribute('属性')；
H5自定义属性
-
H5设置自定义属性
H5规定自定义属性data-开头作为属性名并且赋值
比如
<div data-index = "1"></div>或者使用JS设置
element.setAttribute('data-index',2)
-
H5获取自定义属性
-
兼容性获取 element.getAttribute('data-index');
-
H5新增element.dataset.index 或者 element.dataset['index'] 只能获取data-开头的 ie11才开始支持
注：如果自定义属性里面有多个-连接的单词，获取的时候采用驼峰命名法，如data-list-name,获取 的时候就是element.dataset.listName
-
节点操作
- 父级节点
node.parentNode
- parentNode 属性可返回某节点的父节点，返回最接近的一个父节点
- 如果指定的节点没有父节点就返回null
- 子节点
parentNode.children(非标准)
parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。
虽然children是一个非标准，但是得到了各个浏览器的支持，因此可以放心使用
- 兄弟节点
node.nextSibling
返回当前元素的下一个兄弟节点，找不到则返回null，包含所有节点
node.previousSibling
返回当前元素的上一个兄弟节点，找不到则返回null，包含所有节点
- 创建节点
document.createElement('tagName')
- 添加节点
1.node.appendChild(child)
node 父级 ， child 子级。将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。
2.node.insertBefore(child,指定元素)
将一个节点添加到指定父节点的指定子节点前面。类似于css里面的before伪元素。
- 删除节点
node.removeChild(child)
从DOM中删除一个子节点，返回删除的节点。
- 复制节点
node.cloneNode()
返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点。
注：
- 如果括号参数为空或者为false，则是浅拷贝，即只克隆节点本身，不可隆里面的子节点。
- 如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。
三种动态创建元素的区别
- document.write ()
- element.innerHTML
- document.createElement ()
区别
-
document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。
-
innnerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
-
innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接，结构稍微复杂。
-
createElement () 创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML效率要比createElement高
注册事件（绑定事件）
注册事件有两种方式：传统方式和方法监听注册方式
传统注册方式
- 利用on开头的事件，onclick等
<button onclick = "alert('hello')"></button>- btn.onclick = function (){ }
- 特点：注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
- w3c标准 推荐方式
- addEventListener () 它是一个方法
- IE9之前的IE不支持此方法，可使用attachEvent ()代替
- t特点：同一个元素同一个事件可以注册多个监听器
- 按注册顺序依次执行
addEventListener 事件监听方式
eventTarget.addEventListener(type , listener[,useCapture])
该方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
- type：事件类型字符串，比如click、mouseover，注意这里不要带on
- listener：事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，是一个布尔值，默认是false。
例：
btn.addEventListener('click',function(){
alert('hello');
})
//同一个元素，同一个事件可以添加多个侦听器（事件处理程序）
btn.addEventListener('click',function(){
alert('world');
})
attachEvent 事件监听方式
eventTarget.attachEvent(eventNameWithOn , callback)
eventTarget.attachEvent () 方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，指定的回调函数就会被执行。
该方法接收两个参数：
- eventNameWithOn：事件类型字符串，比如onclick、onmouseover，这里要带on
- callback：事件处理函数，当目标触发事件时回调函数被调用
注：IE8及早期版本支持
注册事件兼容性解决方案
function addEventListener (element , eventName , fn) {
//判断当前浏览器是否支持addEventListener方法
if(element.addEventListener) {
element.addEventListener(eventName , fn);//第三个参数默认是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName , fn);
} else {
//相当于element.onclick = fn
element('on' + eventName) = fn;
}
}
兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器
删除事件
-
传统注册方式
eventTarget.onclick = null;
-
方法监听注册方式
- eventTarget.removeEventListener(type , listener[ , useCapture]);
element.removeEventListener('click',fn)
- eventTarget.detachEvent(eventNameWithOn , callback);
element.detachEvent('onclick',fn)
DOM事件流
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
DOM事件流分为3个阶段：
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
注意
-
JS代码中只能执行捕获或者冒泡其中的一个阶段
-
onclick和attachEvent只能得到冒泡阶段
-
addEventListener(type,listener[ , useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
-
实际开发中很少使用事件捕获，更关注事件冒泡
-
有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
-
事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事情
事件对象
eventTarget.onclick = function(event){}
eventTarget.addEventListener('click',function(event)){}
//event就是事件对象
官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
简单解释：事件发生后，跟事件相关想一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。
比如：
- 谁绑定了这个事件。
- 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
注：这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去
当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）
事件对象兼容性问题
- 标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到
- 在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找
解决
e = e || window.event
事件对象的常见属性和方法
| 事件对象属性方法 | 说明 |
|---|---|
| e.target | 返回触发事件的对象 标准 |
| e.srcElement | 返回触发事件的对象 非标准ie6-8使用 |
| e.type | 返回事件的类型 比如click mouseover 不带on |
| e.cancelBubble | 该属性阻止冒泡 非标准ie6-8使用 |
| e.returnValue | 该属性阻止默认事件（默认行为） 非标准 ie6-8使用 比如不让链接跳转 |
| e.preventDefault() | 该方法阻止默认事件（默认行为） 标准 比如不让链接跳转 |
| e.stopPropagation() | 阻止冒泡 标准 |
e.target与this 的区别
-
e.target 返回的是触发事件的对象（元素）
-
this返回的是绑定事件的对象
例：例如点击一个li标签，事件绑定的是ul标签，那么this指向ul，e.target指向点击的那个对象，谁触发了这个事件，点击的是li，e.target指向的就是li
事件委托（代理、委派）
事件委托的原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。（利用事件冒泡的优点）
例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，时间会冒泡到ul上，ul有注册事件，就会触发事件监听器。
事件委托的作用
只操作了一次DOM，提高了程序的性能
常用的鼠标事件
//1.contextmenu禁用右键菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault();
})
//2.禁止选中文字 selectstart
document.addEventListener('selectstart',function(e){
e.preventDefault();
})
鼠标事件对象
| 鼠标事件对象 | 说明 |
|---|---|
| e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
| e.pageX | 返回鼠标相对于文档页面的X坐标 IE9+支持 |
| e.pageY | 返回鼠标相对于文档页面的Y坐标 IE9+支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
常用的键盘事件
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeypress | 某个键盘按键被按下时触发 但是它不识别功能键，比如ctrl shift 箭头等 |
注：三个事件的执行顺序是：keydown -- keypress -- keyup
键盘事件对象
| 键盘事件对象 属性 | 说明 |
|---|---|
| keyCode | 返回该键的ASCII值 |
注：onkeydown 和 onkeyup不区分字母大小写，onkeypress区分字母大小写