DOM 以及JS中的事件

Posted 李佳阳

tags:

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


[DOM树节点]
 DOM节点分为三大节点:元素节点,文本节点,属性节点。
 文本节点,属性节点为元素节点的两个子节点
通过getElment系列方法,可以去到元素节点


             [查看节点]
 1 document.getElementById("div1")  通过ID获取唯一的节点  多个同名ID只会取到第一个
 2 getElmentsName   通过Name取到一个数组,包含1到多个节点
   使用方式   通过循环,取到每一个节点  循环次数从0开始,<数组 length

     [查看和设置属性节点]
              1 查看属性节点    getAttribute("属性名")
              2设置属性节点    setAttribute("属性名","属性值")
              [JS修改样式总结]
              1   .className:为元素设置一个新的class名字
                  div。className = "class1"
              2    .style :为元素设置一个新的样式,注意驼峰命名法
                  div.style.backgroungColor="red";
              3     .style.cssText:为元素修改多个属性
                  div.style.cssText = "width:100px;height:100px;"
              [查看节点]
              1  tagName属性:获取节点的标签名;
              2  innerhtml:设置或者获取节点内部所有的HTML代码;
              3  innerText:设置或者获取节点内部所有文字;
 
            window.onload  =  function(){
                
                var  div1 = document.getElementById("div1")
                console.log(div1.tagName);
                window.getComputedStyle(div1,null).width;
                console.log(div1.currentStyle);
            }
            var num = 0 ;
            function getById(){
                num++;
                var  divStyle = document.getElementById("div1");
                if(num%2==1){
                     取到元素节点的样式属性节点
                divStyle.style.backgroundColor = "blue"  所有节点属性。一律驼峰命名法
                 取到元素节点
                var  div = document.getElementById("div1");
                console.log(div.innerHTML)
                div.innerHTML = "jiangHao"   重置修改div中的HTML代码
                }else  {
                    divStyle.style.backgroundColor = "red"
                }
            }
            
            function  getByName(){
                var div = document.getElementsByName("div1");
                   div[0].style.backgroundColor = "blue";
                }
            function getByTagName(){
                var div = document.getElementsByTagName("div1")
                div[0].style.backgroundColor = "gold";
            }
            function getByClassName(){
                var div = document.getElementsByClassName("div1")
                div[1].style.backgroundColor = "gold";
            
            }
            
            function getArr(){
                var img1 = document.getElementById("img1");
                alert(img1.getAttribute("src"));
            }
            function getArr(){
                var img1 = document.getElementById("img1");
                img1.setAttribute("src","../../京东/jdimg/floor-tit.png");
                img1.setAttribute("title","");
                img1.setAttribute("style","width: 100px;height: 100px;");
            }


                 [获取层次节点的常用属性]
                 1  .childNodes:(数组)获取元素的所有子节点
                 2  .firstchild:获取元素的第一个节点
                 3  .lastChild:  获取元素最后一个子节点
                 4  .ownerDocument: 获取当前文档根节点,在HTML文档中,为document节点
                 5  .parentNodes: 获取当前节点的父节点;
                 6  .previousSibling:获取当前节点的前一个兄弟节点
                 7  .nextSibling: 获取当前节点的后一个兄弟节点
                
                 注:上述属性均会获得所有的元素节点和文本节点   如果只需要元素节点,需要使用对应的Elemen属性  例如:firstchild  >>>>firstElementChild
                
                
                 8  .attributes: 获取当前元素节点的所有属性节点
                
                
             
                var ul1 =  document.getElementById("ul1");
                var lis =   ul1.getElementsByTagName("li");   获取ul里面的所有li
                  var lis =   document.getElementsByTagName("li");  文档中取
               
               
                console.log(ul1.attributes);//获取ul里面的子节点包含元素节点    文本结点
            
            }
            
            
           [创建并新增节点]
             1  createElement: 创建一个新的节点   需要配合setAttribute()方法设置新节点的相关属性
             2  .appendChild(节点名):在某元素的最后追加一个新节点
             3  .insertBefore(新节点名,目标节点名):将新节点插入到目标节点之前
             4      克隆对象,.cloneNode(true/false);需要克隆谁,就用谁去调用克隆对象,
                                  传递参数可以为true或false
                       true表示        克隆当前节点以及所有子节点   
                       false表示      只克隆当前节点,不克隆子节点
            [删除/替换节点]
            1   .removechild(需删除节点):从父容器中,删除指定节点.
            2   .replaceChild(新节点,替换节点):用新节点替换指定节点,如果新节点为页面中已有节点,会将此节点删除后,替换到指定节点。
 
            function appendImg(){
                1    创建一个图片节点
              var img = document.createElement("img");
              2  给img节点设置属性
              img.setAttribute("src","../../京东/img/57edc0ffNfda9b21c.jpg!q70.jpg");
             3  将设置好的img节点,追加到body最后
              document.body.appendChild(img);
              img.setAttribute("style","width: 100px; height: 100px;")
              
            }
            function insertImg(){
                1  创建一个图片节点
              var img = document.createElement("img");
              2  给img节点设置属性
              img.setAttribute("src","../../京东/img/57edc0ffNfda9b21c.jpg!q70.jpg");
              3   在两个ul之间插入图片
              var ul2 = document.getElementById("ul2");
              document.body.insertBefore(img,ul2);
               img.setAttribute("style","width: 100px; height: 100px;")
            }
            function copy(){
                var ul2 = document.getElementById("ul2");
               克隆ul2的节点
                var ul2Clone  =    ul2.cloneNode(true);
               取到按钮节点
                var btn = ul2.nextElementSibling;
                在ul节点之前,插入新克隆节点
               document.body.insertBefore(ul2Clone,ul2)
                
                var ul1 = document.getElementById("ul1");
                
                var ul1Clone = ul1.cloneNode(true)
                var btn = ul1.nextElementSibling;
                document.body.insertBefore(ul1Clone,ul2)
                
            }
            
            function dellUl1(){
                       //取到ul1
               var ul1 =document.getElementById("ul1");
               console.log(ul1)  
                  if(ul1){
                   //从ul1的父容器body中删除ul1的节点
                 document.body.removeChild(ul1)
                  }else {
                     alert("别删了")
                  }

[表格对象]
          
           1  rows属性:返回表格中的所有数组,行
           2  insertRow(Index):  在表格的第index+1行,插入一个新行
           3  deleteRow(Index) : 删除表格的第index+1行

           [表格的行对象]
           1  cells属性:返回当前行中的所有单元,数组
           2  rowIndex属性:返回当前行,在表格中的索引顺序,从0开始
           3  insertCell(index):在当前的第inde+1处插入一个<td>
           4  deleteCell(index):  删除当前行的第inde+1个<td>

           [表格的单元格对象]
           1   cellIndex属性  返回单元格在该行的索引循序 从0开始
           2  innerHTML属性 :返回或设置当前单元格中的HTML代码
           3 align属性:设置当前单元格的水平对齐方式
           4  className属性:设置单元格的class名称;

[js中的事件分类]
            
              1  鼠标事件
                  click/dblclick/mouseover/mousedown/mouseout/mouseup/
              2键盘事件
                  keydown:键盘按下去触发
                  keypress:键盘按下并松开的瞬间触发
                  keyup 键盘抬起时触发
                 [注意事项:(了解)]
                 ① 执行顺序 :keydown——keypress——keyup
                 ②  长按时 会循环不断执行keydown——keypress
                 ③  有keydown事件是不一定有keyup事件,(事件触发过程中,如果鼠标移走,可能就没有keyup事件)
                 ④   keypress事件只能捕获字母,数字,符号键,不能捕获功能键,keydown/keyup基本上可以捕获所有的功能键
                 ⑤   ksypress区分大小写,keydown/keyup不区分
                 ⑥   keydown/keyup可以区分主键盘和小键盘,keypress不能区分
             
                  [确定键盘触发按键]
                 ①再触发函数中,传入参数额e,代表按键时间
                 ②通过e.keyCode   通过按键Ascli码值,进而确定按键
                 ③兼容所有浏览器系统的写法(一般不必要)
                  var evn = e||event;// 取到键盘事件
                var code = evn.keyCode||evn.which||evn.charCode;//取到按键编码             

[jS中的DOM0事件模型]
            
              1 内联模型:直接将函数名作为HTML标签的某个事件属性的属性值
                rg:<button  onclick="func()"></button>
                 缺点 违反了W3C关于HTML与javasript分离的基本原则
              2 脚本模型   在js的脚本中通过事件属性进行绑定
                 rg:window.onload = function(){};
              局限性:同一节点只能绑定一个同类型事件;
             
             
             
              [JS中的DOM2事件模型]
              1 添加事件绑定
                 IE10之前,btn1.attachEvent("onclick",函数);
                  其他浏览器:btn1.addEventListener("click",函数,true/false);
                       参数三:false(默认)  表示事件冒泡   true  表示事件捕获
                  兼容写法:  if(btn1.attachEvent){
                                  btn1.attachEvent
                               }else {
                                   btn1.addEventListener();
                                }
                 优点:同一节点,可以添加多个同类型事件的监听器
               2 取消事件类型
                注:如果要取消事件绑定,那么在绑定事件时,回调函数必须使用有名函数,而不是匿名函数,因为在取消事件绑定时,要输入函数名
                .removeEventListener("click",函数名);
                .detachEvent("onclick",函数名);
 

[js中的事件流]
        
          1  事件冒泡    当某DOM元素触发某事件时,会从当前DOM元素开始,逐个触发其祖先元素的同类型事件,直到DOM根节点
             DOM模型 均为事件冒泡
             IE中使用  attachEvent()添加的事件 均为冒泡
               其他浏览器  .addEventListener添加的事件   当第三个参数为false时,为冒泡
          2 事件捕获:当某个dom元素触发某事件时,会从dom根节点开始,逐个触发其祖先元素的同类型事件,直到出发到当前元素为止。
             只有使用addEventListener添加事件,并设置第三个参数为true时,才进行捕获;
         
             ↓   当前元素      ↑
             ↓              ↑
             冒      父元素         捕
             ↓    父元素         ↑
             ↓              ↑
             泡      爷爷元素    获
             ↓              ↑
                 DOM根节点
          3 阻止事件冒泡
            IE浏览器中,将e.cancelbubble属性设为true
            其他浏览器:调用e.stopPropagation();方法
          兼容方法 :function myParagraphEventHandler(e) {
            e = e || window.event;
            if (e.stopPropagation) {
                e.stopPropagation();    IE以外
            } else {
                e.cancelBubble = true;   IE
            }
        }
             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     
                            }
                        }
        }

 








































































































































































































































































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

js中的Dom事件模型以及表格方面等内容

js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

JavaScript的事件DOM模型事件流模型以及内置对象详解

话话js中的事件监听

JavaScipt 中的事件循环机制,以及微任务 和宏任务的概念

JS中的DOM操作和事件