JavaScript学习记录——DOM部分
DOM重点核心——事件的基础部分
- 文档对象模型(DOM)是W3C组织推荐的处理可拓展标记语言( html或xml)的标准编程接口
- W3C 定义的一系列的DOM接口,通过这个可以改变网页的内容、结构、样式
- 对于html,dom使得html形成一棵dom树,包含文档、元素和节点
- 我们获取过来的DOM元素是一个对象(object),所以称为文档对象模型
- dom操作主要针对元素的操作:增删改查和属性操作、事件操作等
创建元素
1.document.write
2.innerHTML
3.createElement
增加元素
1.appendChild
2.insertBefore
删除元素
1.removeChild
更改元素
1.修改元素属性:src、href、title等
2.修改普通元素内容:innerHTML(普通元素)、innerText(表单元素)
3.修改表单元素:value、type、disabled
4.修改元素样式:style、className
查
1.dom提供的api方法:getElementById、getElementsByTagName古老方法 不推荐
2.H5提供的新方法:querySelector、querySelectorAll 提倡
3.利用节点操作获取元素:parentNode、children、(上一个兄弟)previousElementSibling、nextElementSibling 提倡
属性操作
1.serAttribute:设置dom的属性值
2.getAttribute:得到dom的属性值
3.removeAttribute:移除属性
事件操作
事件源.事件类型=事件处理程序
事件高级
注册事件(绑定事件)
传统注册方式
<button onclick ="hi"></button>
btn.onclick = function(){}
传统注册方式的特点:事件的唯一性,就是一个函数一次只能设置一个处理函数 后面注册的处理函数会覆盖之前注册的处理函数
var btn = document.querySelectorAll('button')
btn[0].onclick = function(){
alert('hi');
}
btn[0].onclick = function(){
alert('hello');
}
后面只会显示hello
方法监听注册方式
addEventListener()
- 可以解决同一个元素同一个事件可以注册多个监听器(就是后面的监听处理函数)
- 按照注册顺序依次进行
btns[1].addEventListener('click',function() {
alert(22);
})
btns[1].addEventListener('click',function() {
alert(233);
})
- 里面的事件类型是字符串,必须要加引号 而且不加on
- 同一个元素 同一个时间可以添加多个监听器(事件处理程序) 依次执行
删除事件(解绑事件)
传统注册方式
eventTarget.onclick = null
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
alert(11);
divs[0].onclick = null;
}
</script>
方法监听注册方式
eventTarget.removeEventListener
divs[1].addEventListener('click',fn)
//fn不需要调用加小括号
function fn() {
alert(11);
divs[1].removeEventListener('click',fn);
}
divs[2].attachEvent('onclick',fn1);
function fn1() {
alert(11);
divs[2].detachEvent('onclick',fn1);
}
DOM事件流
事件流描述的是从页面中接受时间的顺序
DOM事件流分为3个阶段:
1.捕获阶段(从最顶层节点开始 逐级向下传播到最具体的元素接收的过程)
2.当前目标阶段
3.冒泡阶段(由具体元素接收 逐级向上传播到最顶层节点的过程)
- 注意js代码只能执行捕获或者冒泡其中一个阶段
- onclick和attachEvent只能获得冒泡阶段
- 在实际开发中更关注事件冒泡
- 有些事件是没有冒泡的 比如onblur onfocus onmouseenter onmouseleave
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
//捕获阶段 如果addEventListener的第三个参数是true 则处于捕获阶段
//捕获路径document->html->body->father->son
var son = document.querySelector(".son");
son.addEventListener('click',function(){
alert('son');
},true);
var father = document.querySelector(".father");
father.addEventListener('click',function(){
alert('father');
},true);
</script>
因为找到father的时候发现也有绑定事件 所以先弹出father 再弹出son
var son = document.querySelector(".son");
son.addEventListener('click',function(){
alert('son');
},false);
var father = document.querySelector(".father");
father.addEventListener('click',function(){
alert('father');
},false);
先弹出son 再弹出father
事件对象
- event对象表示事件的状态 比如按键的状态 鼠标的位置 鼠标按钮的状态
- 简单理解为事件发生后 跟事件相关的一系列信息数据的集合都会放到这个对象里面 这个对象就是事件对象event(可以自命名)有很多属性和方法
这个event是个形参 系统帮我们设定为事件对象 不需要传递实参过去
关于e.target和this的区别
e.target返回的是出发事件的对象(元素)this返回的是绑定事件的对象(元素)
e.target点击了哪个元素 就返回那个元素 this哪个元素绑定了这个点击事件 就返回哪个元素
事件对象的常见属性和方法
阻止点击后跳转链接事件
var a =document.querySelector('a');
a.addEventListener('click',function(e){
e.preventDefault();
})
三个传统注册方式下的阻止默认事件
1.普通浏览器 e.preventDefault();
e.preventDefault();
2.低版本浏览器 ie678 returnValue属性
e.returnValue;
3.用return false也能阻止默认行为 但是后续代码无法继续执行 而且只限于传统注册方式
return false;
阻止事件冒泡的两种方式
1.stopPropagation()(常用)
e.stopPropagation()
2.cancelBubble
e.cancelBubble = true;
兼容性解决方案
事件冒泡的好处——事件委托(代理、委派)
事件委托的原理:
不是给每一个子节点单独设置事件监听器 而是将事件监听器设置在其父节点上 然后利用冒泡原理影响设置每一个子节点
事件委托的作用:
只操作了一次dom 但是提高了程序的性能
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click',function(){
alert('是的');
})
设置点击的li背景为粉色
ul.addEventListener('click',function(e){
// alert('是的');
e.target.style.backgroundColor='pink';
})
</script>
常用的鼠标事件
//选中以后不能鼠标右键菜单
document.addEventListener('contextmenu',function(e) {
e.preventDefault();
})
//禁止鼠标选中
document.addEventListener('selectstart',function(e)
{
e.preventDefault();
})
鼠标事件对象
event对象代表事件的状态,跟事件相关的一系列信息的集合,现阶段我们主要用的是鼠标事件对象——MouseEvent和键盘事件对象——KeyboardEvent
常用的键盘事件
三个事件的执行顺序 keydown-keypress-keyup
键盘事件对象
keyCode属性可以得到相应键的ASCII码值
- 注意keyup和keydown事件不区分字母的大小写 a和A得到的都是65
- 要想得到a和A的不同 使用keypress事件