Day40 事件、属性操作、节点操作
- 事件
1.1 组织a标签跳转
1.2 鼠标事件
1.2.1 移入移出
onmouseover鼠标移入事件:在鼠标指针移动到元素上时触发。
onmouseout 鼠标移出事件:在鼠标指针移出元素后触发
onmouseenter鼠标进入事件:在鼠标指针进入到元素上时触发。
onmouseleave 鼠标离开事件:在鼠标指针离开元素后触发
1.2.2 获得焦点/失去焦点
onfocus获取焦点事件:在鼠标光标获取输入框焦点时触发
onblur失去焦点事件:在鼠标光标失去焦点时触发。
1.2.3 单击/双击
onclick单击事件:在鼠标指针单击时触发
ondblclick双击事件:在鼠标光标双击时触发。
1.3 键盘事件
onkeydown:键盘按下
onkeyup:键盘抬起
1.4 浏览器事件
onload:浏览器加载完成执行
onscroll:滚动浏览器滚动条时触发
- 属性
2.1 元素自定义属性
标签除了自带属性之外,还可以根据我们自己的需求,去自定义属性,属性名自定义
2.2 设置方式
setAttribute : DOM.setAttribute(“属性”,”值”); 为元素添加属性,可以自定义属性
getAttribute : DOM.getAttribute(“属性”) ; 获取元素的某个属性值,可以获取自定义的属性的值
removeAttribute : DOM.removeAttribute(“属性”); 删除元素的某个属性
setProperty : DOM.style.setProperty(“属性”,”值”) 设置css样式
cssText : DOM.style.cssText = “属性:值;属性:值;…”; 设置css样式
DOM.style.xxx = xxx; 设置css样式
DOM.属性=’值’ 设置标签已有的属性值,不可以自定义属性
- 节点
3.1 是什么
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
整个文档是一个文档节点 document
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
3.2 nodeType
3.3 nodeName
3.4 nodeValue
3.5 常用方法
3.6 节点关系
节点之间的关系就是嵌套关系(父子关系)、并列关系(兄弟关系)。注意区分节点与元素节点之间的区别。
父节点–parentNode
父元素节点–parentElement
子节点–childNodes:标签节点、文本节点、注释节点 得到的是伪数组
子元素节点–children :标签节点
第一个子节点–firstChild:文本
第一个子元素节点–firstElementChild:第一个标签
最后一个子节点–lastChild:文本
最后一个子元素节点–lastElementChild: 最后一个标签
上一个子节点–previousSibling:文本
上一个子元素节点–previousElementSibling: 上一个标签
下一个子节点 --nextSibling:文本
下一个子元素节点–nextElementSibling: 下一个标签
总结:firstChild、lastChild、previousSibling、nextSibling获取到的都是文本,如果没有就是文本节点名称#text, firstElementChild、lastElementChild、previousElementSibling、nextElementSibling获取到的都是标签,如果没有就是空。
3.7 节点创建
3.7.1 第一种
3.7.2 第二种
3.7.3 第三种
父元素.appendChild(子元素):给父元素末尾添加子元素
3.8 动态创建列表
1 按钮
2 盒子
按钮有点击事件,点击之后,在盒子中动态创建ul
- 事件进阶
4.1 事件三要素
事件源:是指那个元素引发的事件。比如当你点击cdsn图标的时候,会跳转到cdsn首页。那么这个cdsn图标就是事件源,再或者,可以这样理解, 当你对某个元素执行动作的时候,会触发一系列效果(动画,跳转…),那么这个元素就是事件源。
事件类型:例如,点击,鼠标划过,按下键盘,获得焦点。
事件驱动程序:事件驱动程序即执行的结果,例如,当你点击cdsn图标的时候,会跳转到cdsn首页。那么跳转到cdsn首页就是事件的处理结果。
执行事件的步骤:获取元素、绑定事件、书写事件驱动程序
4.2 DOM0和DOM2事件绑定
4.2.1 事件绑定
DOM0会发生事件覆盖问题
btn.onclick = function(){
alert(1)
}
btn.onclick = function(){
alert(2)
}
以上程序 只会弹框 2 , 因为第二次绑定相同事件 会覆盖第一次绑定的事件
而DOM2 优化了事件绑定
使用 addEventListener,并且不会发生事件覆盖
btn.addEventListener(‘click’,function(){
alert(1)
});
btn.addEventListener(‘click’,function(){
alert(2)
});
以上DOM2绑定方式, 弹框1和弹框2 都会执行
4.2.2 事件绑定
DOM0解绑 btn.onclick = null;
DOM2解绑 btn.removeEventListener(‘click’,function);
4.3 事件对象
4.4 事件源妙用
绑定事件后,如果还要新增元素,则新增元素不会拥有该事件监听
可以利用事件源,对父盒子绑定事件,然后通过事件源 找到真正触发该事件的元素,进行操作
4.5 事件冒泡
如果父子标签绑定相同的事件监听,如果触发子元素的事件的时候,会从子到父依次触发绑定了该事件的元素事件
还有一种是捕获机制,相反,是从父到子依次触发
什么是冒泡事件
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。
假设一个元素div,它有一个下级元素p。
元素