目录
刚学习js dom 首先需要理解三个关键字:文档、元素、节点。
文档:一个页面就是一个文档,dom中用document表示。
元素:页面中的所有标签都是元素,dom中使用element表示。
节点:网页中的所有内容都是节点(标签、属性、文本、注释等),dom中使用node表示。
一、获取元素
语法: var element = document.getElementById(id)
1.根据id获取
document.getElementById(id)
2.根据标签名获取
element.getElementsByTagName('标签名')
3.HTML5新增方法
document.getElementsByClassName('类名') //根据类名返回元素对象集合
document.querySelector('选择器') //根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器') //根据指定选择器返回
4.获取特殊元素(body、html)
doucument.body //返回body元素对象
document.documentElement //返回html元素对象
二、操作元素
1.改变元素内容
element.innerText
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也去掉
element.innerHTML
从起始位置到终止位置的内容,包括html标签,同时保留空格和换行
2.常用元素的属性操作
innerText、innerHTML、src、href、id、alt、title
表单元素:value、type、checked、selected、disabled
3.样式属性操作
element.style 行内样式操作(样式少,功能简单情况下使用)
element.className 类名样式操作(样式多,功能复杂情况下使用)
4.总结
三、排他思想
如果有同一组元素,想要某一个元素实现某种样式,需要用到循环的排他思想算法:
1.所有元素全部清除样式(干掉其他人)
2.给当前元素设置样式(留下自己)
3.注意顺序不能颠倒,首先干掉其他人,再设置自己
四、自定义属性
1.自定义属性操作获取
(1)获取属性值
element.属性 获取属性值
element.getAttribute('属性')
区别:
element.属性 获取内置属性值
element.setAttribute('属性') 主要获得自定义属性(标准)我们程序员自定义的属性
(2)设置属性值
element.属性='值' 设置内置属性值
element.setAttribute('属性','值')
区别:
element.属性 设置内置属性值
element.setAttribute('属性','值') 主要设置自定义属性(标准)
(3)移除属性
element.removeAttribute('属性')
2.H5自定义属性
(1)设置H5自定义属性
H5规定自定义属性data开头作为属性名并且赋值,例如:
<div data-index="1"></div>
(2)获取H5自定义属性
a.兼容性获取 element.getAttribute('data-index')
b.H5新增element.dataset.index或者element.dataset['index'] ie11才开始支持
五、节点
在开发中,节点操作主要操作的是元素节点。
1.节点层级
(1)父级节点
node.parentNode
- parentNode属性可返回某节点的父节点,注意是最近的一个父节点
- 如果指定的节点没有父节点则返回null
(2)子节点
parenNode.childNodes(标准) 返回包含指定节点的子节点的集合,该集合为即使更新的集合。
注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等。如果只是想要获取里面的元素节点,则需要专门处理。所以一般不提倡使用childNodes
parentNode.children(非标准) 返回所有的子元素节点,只返回子元素节点,其余节点不返回。
parentNode.firstChild 返回第一个子节点,找不到则返回null,包含所有的节点。
parentNode.lastChild
parentNode.firstElementChild 返回第一个子元素节点,找不到返回null。
parentNode.laseElementChild
注意:parentNode.firstElementChild和parentNode.lastElementChild两个方法有兼容性问题,IE9以上才支持。
实际开发中主要使用parentNode.chilren[0]。
(3)兄弟节点
node.nextSibling 返回当前元素的下一个兄弟所有节点,找不到则返回null。
node.previousSibling 返回当前元素上一个兄弟所有节点,找不到则返回null。
node.nextElementSibling 返回当前元素下一个兄弟元素节点,找不到则返回null。
node.previousElementSibling 返回当前元素上一个兄弟节点,找不到则返回null。
注意:后两个方法有兼容性问题,IE9以上才支持。
2.节点的增、删
(1)创建节点
document.crenteElement('tagName') 动态创建元素节点
(2)添加节点
node.appendChild(child)
将一个元素添加到指定父节点列表末尾,类似css的after伪元素。
node.insertBefore(child,指定元素)
将一个节点添加到父节点的指定子节点前面,类似css的before伪元素。
(3)复制节点(克隆节点)
node.cloneNode()
注意:如果括号参数为空或者false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点;如果括号参数为true,则是深度拷贝,会复制节点本身以及本身以及里面所有的子节点。
(4)删除节点
node.removeChild(child)
3.三种动态创建元素区别
- document.write()
- element.innerHTML
- document.createElement()
区别:
a.document.write是直接将内容写入页面的内容流,但是当文档执行完毕,则它会导致页面全部重绘。
b.innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘。
c.innerHTML创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍复杂。
d.createElement()创建多个元素效率稍微低一点点,但是结构更加清晰。
总结:不同浏览器下,innerHTML效率要比creatElement高。
六、事件
1.事件步骤
1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)
2.常见事件
(1)常见鼠标事件
鼠标事件 | 触发条件 |
onclick | 鼠标点击左键触发 |
onclick | 鼠标点击左键触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获取鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
(2)常见键盘事件
键盘事件 | 触发条件 |
onkeyup | 某个键盘按键被松开时触发 |
onkeydown | 某个键盘按键被按下时触发 |
onkeypress | 某个键盘按键被按下时 触发 但是不能识别功能键 |
注意:
- keydown和keypress在文字框里面的特点:他们两个事件触发的时候,文字还没有落入文本框中。
- 如果使用addEventListener不需要加on
- onkeypress和前面两个区别是,它不识别功能键,比如左右箭头,shift等。
- 三个事件的执行顺序是:keydown--keypress--keyup
3.注册事件
给元素添加事件,称为注册事件或者绑定事件。
注册事件有两种方式:传统方式和方法监听注册方式。
(1)传统注册方式
- 利用on开头的事件onclick
- <button οnclick="alert('hi~')"></button>
- btn.οnclick=function(){}
- 特点:注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数
(2)方法监听注册方式
- w3c标准推荐方式
- addEventListener()它是一个方法
- IE9之前的IE不支持此方法,可使用attachEvent()代替
- 特点:同一个元素同一个事件可以注册多个监听器
4.addEventistener事件监听方式
eventTarget.addEventListener(type,listener[,useCapture])
- type:事件类型字符串,比如click、mouseover,注意这里不要带on
- listener:事件处理函数,事件发生时,会调用该监听函数
- useCapture:可选参数,是一个布尔值,默认为false
5.attachEvent事件监听方式
eventTaget.attachEvent(eventNameWithOn,callback)
- eventNameWithOn:事件类型字符串,比如onclick、onmouseover,这里要带on
- callback:事件处理函数,当目标触发事件时回调函数被调用
6.删除事件
(1)传统注册事件
eventTarget.onclick=null
(2)方法监听注册方式
eventTaget.removeEventListener(type,listener[,useCapure])
eventTarget.detachEvent(eventNameWithOn,callback)
七、DOM事件流
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。
DOM事件流分为3个阶段:
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
- 事件冒泡:IE最早提出,事件开始时,由具体的元素接收,然后逐级向上传播到DOM最顶层节点过程。
- 事件捕获:网景最早提出,由DOM最顶层节点来时,然后逐级向下传播到到最具体元素的元素接收的过程。
注意:
- JS代码中只能执行捕获或者冒泡其中的一个阶段。
- onclick和attachEvent只能得到冒泡阶段。
- addEventListener(type,listener[,useCapture])第三个参数如果是true,表示事件在捕获阶段调用事件处理程序;如果是false(不写默认就是false),表示事件冒泡阶段调用事件处理程序。
- 实际开发中很少用到事件捕获,更加关注事件冒泡。
- 有些事件没有冒泡的,比如:onblur、onfocus、onmouseenter、onmouseleave
- 事件冒泡有时候也会带来麻烦
1.事件对象
eventTarget.onclick=function(event){}
eventTarget.addEventListener('click',function(event){})
// event就是事件对象可以简写成e
官方解释:event对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解:事件发生后,跟事件相关的一系列信息数据的集合都会放在这个对象里面,这个对象就是事件对象event,它有很多属性和方法。
比如:
- 谁绑定了这个事件。
- 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。
- 键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。
(1)事件对象的使用语法
eventTarget.onclick=function(event){}
eventTaget.addEventListener('click',function(event){})
这个event是个形参,系统帮我们设定为事件对象,不需要传递。
当我们注册事件时,event对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)。
注意:在IE6~8中,浏览器不会给对方传递参数,如果需要的话,需要到window.event中获取查找。
解决方案:e=e || window.event
(2)事件对象的常见方法和属性
事件对象属性方法 | 说明 |
e.target | 返回触发事件的对象 标准 |
e.srcElement | 返回触发事件的对象 非标准 ie6-8使用 |
e.type | 返回事件的类型 比如 click mouseover 不带on |
e.cancelBubble | 该属性用于阻止冒泡 非标准 ie6-8使用 |
e.returnValue | 该属性 用于阻止默认事件(默认行为)非标准 ie6-8使用 比如不让链接跳转 |
e.preventDefault() | 该方法 阻止默认事件(默认行为)标准 比如不让链接跳转 |
e.stopPropagation() | 阻止冒泡 标准 |
(3)鼠标事件对象
鼠标事件对象 | 说明 |
e.clientX | 返回鼠标相对于浏览器窗口可视区的x坐标 |
e.clientY | 返回鼠标相对于浏览器窗口可视区的y坐标 |
e.pageX | 返回鼠标相对于文档页面可视区的x坐标 IE9+支持 |
e.pageY | 返回鼠标相对于文档页面可视区的y坐标 IE9+支持 |
e.screenX | 返回鼠标相对于电脑屏幕的x坐标 |
e.screenY | 返回鼠标相对于电脑屏幕的y坐标 |
(4)键盘事件对象
键盘事件对象 属性 | 说明 |
keyCode | 返回该键的ASCll值 |
注意:onkeydown和onkeyup不区分字母大小写,onkeypress区分字母大小写。
在实际开发中,我们更多的使用keydown和keyup,它能识别左右键(包括功能键)Keypress不能识别功能键,但是keyCode属性能区分大小写,返回不同ASCll值。
2.阻止事件冒泡
事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到DOM最顶层节点。
事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要我们灵活的掌握。
阻止事件冒泡
- 标准写法:利用事件对象里面的stopPropagation()方法
e.stopPropagation()
- 非标准写法:IE6-8利用事件对象cancelBubble属性