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区分字母大小写