DOM树节点和事件

Posted 2020-10-05

 

一、前言：DOM树节点是JS的基础语句。通过节点，能够取到html代码中的任意标签，从而对其进行修改和添加各种视觉效果。

二、DOM树节点
    DOM节点分为三大类： 元素节点，属性节点，文本节点
     文本节点，属性节点属于元素节点的子节点。操作时，均需要先取到元素节点，再操作子节点；
     可以使用getElement系列方法，取到元素节点 。
     
 1、查看元素节点
      getElementById：　　　　　　　　 通过ID取到唯一节点。如果id重名，则id只能取到第一个
      getElemenstByName():　　　　　　通过name属性
      getElemenstByTagName():　　　 　通过标签名
      getElementsByClassName():　　　  通过class名
 　　  》》获取元素节点时，一定要注意：获取节点的语句，必须在DOM渲染完成之后执行。可以有两者方式实现：
     　　　　　　 ① 将代码写在body之后；

　　　　　　 　 ② 将代码写到Window.onload(){}函数之中。
  　　  》》后面的三个取到的是数组格式。不能直接添加各种属性，而应该取出数组的每一个单独操(即使数组中只有一个值)。
  　　　　　　  例如：getElemenstByName("name1")[0].onclik = fucntion(){}
    
  2、 查看及设置属性节点
  　　  ①查看属性节点：getAttribute("属性名")；
   　　 ②重新设置属性节点：setAttribute("属性名"，"新属性值")；
  　　　　   》》查看和设置属性节点，必须先取到元素节点，才能使用。
   　　　　  》》setattribute（）；属性在IE浏览器中可能会存在兼容性问题。
    　　　　　　  比如在IE中不支持使用这个函数设置style/onclick等样式属性和事件属性
    　　　　 》》我们推荐使用点符号法代替上述函数：
 　　　　    eg：dom.style.color = " "       dom.onclick=" "   dom.src =" "
   　　 ③移除属性：removeAttribute("属性名")；
 【总结-JS修改DOM节点的样式】
   　　　　1.使用setAttribute 设置class和style属性，但是存在兼容性问题，不提倡
  　　　　  div.setAttribute ("class","class1");
   
  　　　　 2.使用.className直接设置class类：注意是className而不是.class：
  　　　　　　  div.className = "class1";
   
 　　　　  3.使用.style设置单个属性，注意属性名要使用驼峰命名法；
   　　　　　　 div.style.backgroudColor = "red";
    
  　　　　 4.使用.style或.style.cssText  设置多个样式属性 
  　　　　　　  div.style = "backgroud-color:red;color : yellow";
  　　　　　　  div.style.cssText = "backgroud-color:red;color : yellow";  √
   
  3、查看设置文本节点
   　　  .innerText：     取到或设置节点里面的文字内容(新设置的文字将代替原有的文字，原有文字将被抹掉)；
  　　  .innerHTML：   取到或设置节点里面的HTML代码(包含里面的所有代码及文字)；
  　　  .tagName :　　取到当前节点的标签名。标签名全部大写显示。

4、根据层次获取节点
 ① 　　 .childNodes:获取元素的所有子节点，包含回车等文本节点
      　　 .children：获取当前元素的所有元素节点。(只获取标签)

 ②　　 .firstChild:获取元素的第一个子节点。包括回车的文本节点
   　　   .firstElementChild：获取元素的第一个子节点。不包括回车等文本节点
   
    　　 .lastChild:获取元素的最后一个子节点。包括回车的文本节点
   　　  .lastElementChild：获取元素的最后一个子节点。不包括回车等文本节点
   
 ③　　.parentNode:获取当前元素的父节点

 ④ 　　.previousSibling:获取当前节点的前一个兄弟节点，包括回车等文本节点
  　　　 .previousElementSibling：获取当前节点的前一个兄弟节点，不包括回车等文本节点
   
 ⑤  　  .nextSibling：获取当前节点的后一个兄弟节点，包括回车等文本节点
 　　    .nextElementSibling：获取当前节点的后一个兄弟节点，包括回车等文本节点
  
  ⑥　　 .getAttributes:获取当前节点的属性节点

5、创建并新增节点
　　  ①createElement("标签名");:创建节点  ；需配合setAttribute设置各种新的属性
  　　②父节点.appendChild(新节点);:末尾追加方式插入节点
 　　 ③.父节点.insertBefore(新节点，目标节点);:在指定节点前插入新节点
　  　④.被克隆节点cloneNode(true/false);:克隆节点
   　　　　>>true：克隆当前节点，以及当前节点的所有子节点
  　　　　 >>false或不传：只克隆当前节点，而不可隆子节点
   
6、删除或替换节点

　　  ①父节点.removeChild(被删节点)；：删除父节点中的子节点
  　　②.父节点.replaceChild(新节点，老节点)；：使用新节点，替换掉老节点

7、表格对象
   ①    .rows属性：返回表格中的所有行，是一个数组格式；   //取到某行，rows[index]
   ②    .insertRow(index);:在指定位置插入一行，index从0开始  //insertRow(table.rows.length-1):插到倒数第一行的前面
   ③    .deleteRow(index);：删除指定的一行，index从0开始；
   
7-1行对象
   ①.cells属性：返回这一行中的所有单元格，是一个数组形式  
  　　  // 可用来取该行中的某个单元格 ： cell1.innerText = cloneRow.cells[1].innerText;
  
   ②.rowIndex属性：返回这一行是表格中的第几行，从0开始；
   ③.insertCell(index) ;:在这一行指定位置，插入一个单元格，index从0开始
   ④.deleteCell(index);:删除这一行的指定单元格，index从0开始
  
7-2单元格对象
  ①cellIndex属性：返回这个单元格是本行的第几个， 从0开始
  ②innerText   innerHTML   align   className 

三、事件

1、 S中的事件分类
   　  ①  鼠标事件
   　　   clic、dblclick、onmouseover、onmouseout
 　　②  HTML事件
    　　onload、onscroll、onsubmit、onchange、onfocus
        ③键盘事件
   　　　　 keydown： 键盘按下时触发
    　　　　keypress： 键盘按下并松开的瞬间触发
   　　　　 keyup：  键盘抬起时触发
  
2、注意事项
   1、执行顺序： keydown-> keypress->keyup
   2、当长按时，会循环执行 keydown-> keypress
   3、有keydown并不一定有keyup，当事件触发过程中，鼠标将光标移走，将导致没有keyup
   4、kypress只能捕获键盘上的数字、字符、符号键，不能捕获各种功能键,而keydown和keyup可以  
   5、keypress区分大小写，keydown和keyup并不支持
 
 3、确定触发的按键
   ① 再触发的函数中，传入一个参数e，表示键盘事件；
   ② 使用e.keyCode，取到按键的ASCII码值，进而确定触发按键；
   ③ 所有浏览器的兼容写法(一般并不需要)：
 　　 

 var evn =  e || event;
var code = evn.keyCode || evn.which || evn.charCode;

 

4、JS 事件中的DOM0事件模型]//事件捕获
     1、内联模型(行内绑定)：直接将函数名作为HTML标签的某个事件属性的属性值
    　　  eg：<button onclick="func()"> DOM0内联模型</button>
      优点:使用方便
      缺点：违反了W3C关于HTML与javascript分离的基本原则
    
     2、脚本模型(动态绑定)：在JS较本中，取到某个节点，并添加事件属性；
      eg：<button id="btn">DOM0脚本模型</button>
      优点：实现了HTML与javaScript分离的基本原则
      缺点：同一个节点只能绑定一个同类型事件。如果绑定多次，最后一个生效；
   
 5、DOM2事件模型
   1、添加事件绑定方式：
   　　 ① IE8之前：btn2.attachEvent("onclick",函数名);
  　　  ② 其他浏览器： btn2.addEventListener("click",函数名,true/false);
   　　　　   参数三：false(默认)表示事件冒泡  true：表示事件捕获
     
   　　 ③ 兼容写法：

if(btn2.attachEvent)  {
    　　　　　　   btn2.attachEvent();
}else{
    　　　　　　   btn2.addEventListener();
 }

 

   2、优点： ① 可以给同一节点，添加多个同类型事件 
     　　　　 ② 提供了可以取消事件绑定的函数；
   3、取消DOM2事件绑定：
   注意：如果要取消DOM2的事件绑定；那么在绑定事件时，处理函数必须要使用有名函数，而不能使用匿名函数。
     btn2.removeEventListener("click",func2);
     btn2.detachEvent("onclick",func2);

6、JS中的事件流
    1、事件冒泡：当某DOM元素触发一种事件时，会从当前节点开始，逐级往上触发其祖先节点的同类型事件，直到DOM根节点；
   　　  》》什么情况下会产生事件冒泡
    　　　　  ① DOM0模型绑定事件，全部都是冒泡
    　　　　  ② IE8之前，使用attachEvent（）绑定事件，全部都是冒泡
    　　　　  ③ 其他浏览器，使用addEventListener（）添加事件，当第三个参数省略或者为false时为事件冒泡；
    2、事件捕获：当某DOM元素触发一种事件时，会从文档根节点开始，逐级向下触发其祖先节点的同类型事件，直到该节点自身；
   　　  》》什么情况下会产生事件捕获
    　　　　 ① 使用addEventListener（）添加事件，当第三个参数为true时，为事件冒泡；
    
             ↓     DOM根节点       ↑
             ↓           ↑
            捕      爷爷节点         冒
             ↓           ↑
            获       父节点           泡
             ↓           ↑
             ↓     当前节点           ↑
    3、阻止事件冒泡
     在IE浏览器中，使用 window.event.cancelBubble = true；
     在其他浏览器中，使用 window.event.stopPropagation();
     兼容所有浏览器的写法：
    

   function myParagraphEventHandler(e) {
         e = e || window.event;
        if (e.stopPropagation) {
               e.stopPropagation(); //IE以外 
         } else {
               e.cancelBubble = true; //IE 
         }
   }

 

   4、 取消事件默认行为：比如超链接a的跳转
     在IE浏览器中，使用 window.event.returnValue = false;
     在其他浏览器中，使用 window.event.preventDefault();
     兼容所有浏览器的写法：
    

  function eventHandler(e) {
          e = e || window.event;
          // 防止默认行为 
          if (e.preventDefault) {
              e.preventDefault(); //IE以外 
          } else {
              e.returnValue = false; //IE  
          }
      }