JS中的DOM操作和事件

Posted 2020-10-05

 【DOM树节点】
 DOM节点分为三大类： 元素节点、 属性节点、 文本节点；

 文本节点、属性节点属于元素节点的子节点。操作时，均需要先取到元素节点，再操作子节点；

可以使用getElement系列方法，取到元素节点。

 【查看元素节点】
 1、getElementById：通过id取到唯一节点。如果ID重名，只能取到第一个。
 getElementsByName()： 通过name属性
   getElementsByTagName()： 通过标签名
   getElementsByClassName()： 通过class名

 >>> 获取元素节点时，一定要注意：获取节点的语句，必须在DOM渲染完成之后执行。 可以有两种方式实现： ① 将JS代码写在body之后； ② 将代码写到window.onload函数之中；

 >>> 后面三个getElements，取到的是数组格式。不能直接添加各种属性，而应该取出数组的每一个单独操作。 例如：getElementsByName("name1")[0].onclick = function


 【查看/设置属性节点】
 1、查看属性节点：getAttribute("属性名");
 2、设置属性节点：setAttribute("属性名","新属性值");

 >>> 查看和设置属性节点，必须先取到元素节点，才能使用。
 >>> setAttribute();函数在IE浏览器中可能会存在兼容性问题。比如在IE中不支持使用这个函数设置style/onclick等样式属性和事件属性。

 >>> 我们推荐使用点符号法替代上述函数：
 eg: dom1.style.color="" dom1.onclick="" dom1.src=""


 【总结-JS修改DOM节点的样式】
 1、 使用setAttribute()设置class和style属性，但是存在兼容性问题，不提倡
 div.setAttribute("class","cls1");

2、 使用.className直接设置class类,注意是className而不是.class：
 div.className = "cls1";

 3、 使用.style设置单个属性，注意属性名要是用驼峰命名法：
 div.style.backgroundColor = "red";

 4、 使用.style 或 .style.cssText 设置多个样式属性：
 div.style = "background-color:red; color:yellow;"
 div.style.cssText = "background-color:red; color:yellow;" √


【查看设置文本节点】
 1、 .innerText: 取到或设置节点里面文字内容；
 .innerhtml: 取到或设置节点里面的HTML代码；
 .tagName: 取到当前节点的标签名。 标签名全部大写显示。

 

【根据层次获取节点】
 1 .childNodes： 获取元素的所有子节点。包括回车等文本节点。
 .children: 获取当前元素的所有元素节点(只获取标签)。

 2 .firstChild: 获取元素的第一个子节点。包括回车等文本节点。
 .firstElementChild: 获取元素的第一个子节点。不包括回车等文本节点。
 .lastChild: 获取元素的最后一个子节点。包括回车等文本节点。
 .lastElementChild:

 3 .parentNode: 获取当前节点的父节点。

 4 .previousSibling: 获取当前节点的前一个兄弟节点；包括回车等文本节点。
 .previousElementSibling:

 5 .nextSibling: 获取当前节点的后一个兄弟节点；包括回车等文本节点。
.nextElementSibling:

 6 .getAttributes: 获取当前节点的属性节点。

 

 【创建并新增节点】
 1. document.createElement("标签名")：创建节点 。需要配合 setAttribute设置各种新的属性；
 2. 父节点.appendChild(新节点)：末尾追加方式插入节点
 3. 父节点.insertBefore(新节点,目标节点)：在目标节点前插入新节点.
 4. 被克隆节点.cloneNode(true/false)：克隆节点
 >>> 传入true： 表示克隆当前节点，以及当前节点的所有子节点；
 >>> 传入false或不传： 表示只克隆当前节点，而不克隆子节点。

 【删除或替换节点】
 1. 父节点.removeChild(被删节点): 删除父节点中的子节点；
 2. 父节点.replaceChild(新节点,老节点): 使用新节点，替换掉老节点。\n
 3. 节点.removeAttribute("属性")：删除属性。

 

 [表格对象]
1、 rows属性： 返回表格中的所有行，是一个数组格式；
 2、 insertRow(index): 在指定位置插入一行，index从0开始；
 3、 deleteRow(index): 删除指定的一行，index从0开始；

 [行对象]
 1、 cells属性： 返回这一行中的所有单元格，是一个数组格式；
 2、 rowIndex属性： 返回这一行是表格中的第几行，从0开始；
 3、 insertCell(index): 在这一行指定位置，插入一个单元格，index从0开始；
 4、 deleteCell(index): 删除这一行的指定单元格，index从0开始

 [单元格对象]
 1、 cellIndex属性： 返回这个单元格是本行的第几个，从0开始；
 2、 innerText innerHTML align className

 

 【JS中的事件分类】
 1、鼠标事件
 click/dblclick/onmouseover/onmouseout

 2、HTML事件
 onload/onscroll/onsubmit/onchange/onfocus

 3、键盘事件
 keydown： 键盘按下时触发
 keypress：键盘按下并松开的瞬间触发
 keyup： 键盘抬起时触发

 [注意事项]
 ① 执行顺序：keydown->keypress->keyup->
 ② 当长按时，会循环执行keydown->keypress
 ③ 有keydown并不一定有keyup，当事件触发过程中，鼠标将光标
 移走将导致没有keyup；
 ④ keypress只能捕获键盘上的数字、字符、符号键，不能捕获各种
 功能键，而keydown和keyup可以。
 ⑤ keypress支持区分大小写，keydown和keyup并不支持。

 [确定触发的按键]
 ① 在触发的函数中，传入一个参数e，表示键盘事件；
 ② 使用e.keyCode，取到按键的Ascii码值，进而确定触发按键；
 ③ 所有浏览器的兼容写法(一般并不需要)：
 var evn = e || event；
 var code = evn.keyCode || evn.which || evn.charCode;

 

 【JS中的DOM0事件模型】
 1、内联模型(行内绑定)：直接将函数名作为HTML标签的某个事件属性的属性值；
 eg：<button onclick="func()">DOM0内联模型</button>
 缺点：违反了W3C关于HTML与javascript分离的基本原则；

 2、脚本模型(动态绑定)：在JS脚本中，取到某个节点，并添加事件属性；
 eg：window.onload = function(){}
 优点：实现了HTML与JavaScript的分离。
 缺点：同一个节点，只能绑定一个同类型事件。如果绑定多次，最后一个生效。

【DOM2事件模型】
 1、添加事件绑定方式：
 ① IE8之前：btn2[2].attachEvent("onclick",函数)；
 ② 其他浏览器：btn2[2].addEventListener("click",函数，true/false)；
 参数三：false(默认) 表示事件冒泡 true 表示事件捕获
 ③ 兼容写法：if(btn2.attachEvent){
 btn2[2].attachEvent();
 }else{
 btn2.addEventListener()；
 }
 2、优点：① 可以给同一节点，添加多个同类型事件；
 ② 提供了可以取消事件绑定的函数；

3、取消DOM2事件绑定：
 注意：如果要取消DOM2的事件绑定，那么在绑定事件时，处理函数必须要使用有名函数，而不能使用匿名函数。
 btn[2].removeEventListener("click",func2);
btn[2].detachEvent("onclick",func2);

 

 【JS中的事件流】

 1、事件冒泡：当某DOM元素触发一种事件时，会从当前节点开始，逐级
 往上触发其祖先节点的同类型事件，直到DOM根节点；

 >>> 什么情况下会产生事件冒泡？
 ① DOM0模型绑定事件，全部都是冒泡；
 ② IE8之前，使用attachEvent()绑定的事件，全部都是冒泡；
 ③ 其他浏览器，使用addEventListener()添加事件，当第三个参数
 省略或者为false时为事件冒泡；

 2、事件捕获：当某DOM元素触发一种事件时，会从文档根节点开始，逐级向下
 触发其祖先节点的同类型事件，直到该节点自身；

 >>> 什么情况下会触发事件捕获？
 使用addEventListener()添加事件，当第三个参数省略或者为true时为事件捕获；


3、阻止事件冒泡：
 在IE浏览器中，使用e.cancelBubble = true;
 在其他浏览器中，使用e.stopPropagation();

 兼容所有浏览器的写法：
 function myParagraphEventHandler(e) {
       e = e || window.event;
       if (e.stopPropagation) {
           e.stopPropagation(); //IE以外
       } else {
           e.cancelBubble = true; //IE8之前
       }
  }

 4、取消事件默认行为
 在IE浏览器中，使用 e.returnValue = false;
 在其他浏览器中，使用 e.preventDefault();

兼容所有浏览器的写法：
 function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
}