day40节点操作 BOM

Day40 事件、属性操作、节点操作

1. 事件
   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. 属性
   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. 节点
   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. 事件进阶
   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。

　　

元素

这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？ 如何阻止冒泡（存在兼容性） e.stopPropagation(); 谷歌和火狐支持, window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持 5. BOM