JS中的DOM操作和事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS中的DOM操作和事件相关的知识,希望对你有一定的参考价值。

 【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
}
}


























































































































































































以上是关于JS中的DOM操作和事件的主要内容,如果未能解决你的问题,请参考以下文章

JQuery中的Dom操作和事件

2017-6-3 JQuery中的Dom操作和事件

ref 和 React.js 中的 DOM 操作

JS 中的事件绑定事件监听事件委托

js dom操作总结

JS中的函数节流