DOM 以及JS中的事件

Posted 2020-09-11 李佳阳

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