js_dom

原创 于 2018-02-26 13:24:29 发布 · 234 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

【1】浏览器渲染引擎                             

-----步骤：

1. 解析HTML，构建DOM树（构建DOM节点）；

2.  构建渲染树（解析样式信息，包括外部的css文件、style标签中的样式，按优先级解析）。渲染树由一些包含有各种属性的矩形组成，他们将会按照正确的顺序显示到屏幕上；         

3.  布局渲染树（布局DOM节点），执行布局的过程，将确定每个节点在屏幕上的确切坐标；     

4.  绘制渲染树（绘制DOM节点，即遍历渲染树），使用UI后端层来绘制每个节点。

【2】DOMReady :

1.  window.onload用以保证页面的所有资源都加载完毕后才执行当中的js代码，但是当页面存在大量图片或其他需要较长时间加载的资源时，显然让js等待这些资源加载完毕再执行是一个糟糕的用户体验。

2.  HTML是标记语言，它的本质就是告诉浏览器这里有什么节点，节点都是以树的形式组织，浏览器解析后才会变成DOM节点。 当页面上的所有HTML都转换为节点，就称为DOMReady

3.  DOMReady是在构建了DOM树之后就开始解析JS，而不是等待页面渲染完毕。

[html] view plain copy
  1. function myReady(fn) {    
  2.     
  3.     // 对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式    
  4.     if (document.addEventListener) { //通过能力检测区分    
  5.         document.addEventListener("DOMContentLoaded", fn, false);    
  6.     } else {    
  7.         IEContentLoaded(fn);    
  8.     }    
  9.     
  10.     // IE模拟DOMContentLoaded    
  11.     function IEContentLoaded(fn) {    
  12.         var d = window.document;    
  13.         var done = false;    
  14.     
  15.         // 只执行一次用户的回调函数init()    
  16.         var init = function() {    
  17.             if (!done) {    
  18.                 done = true;    
  19.                 fn();    
  20.             }    
  21.         };    
  22.     
  23.         (function() {    
  24.             try {    
  25.                 // DOM树未创建完之前调用doScroll会抛出错误    
  26.                 d.documentElement.doScroll('left');    
  27.             } catch (e) {    
  28.                 // 延迟在试一次    
  29.                 setTimeout(arguments.callee, 50);    
  30.                 return;    
  31.             }    
  32.             // 没有错误就表示DOM树创建完毕，然后立马执行用户回调    
  33.             init();    
  34.         })();    
  35.     
  36.         // 监听docuemnt的加载状态    
  37.         d.onreadystatechange = function() {    
  38.             // 如果用户是在domReady之后绑定的函数，就立马执行    
  39.             if (d.readyState == 'complete') {    
  40.                 d.onreadystatechange = null;    
  41.                 init();    
  42.             }    
  43.         }    
  44.     }    
  45. }   

【3】节点

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>      
  4.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  5.     <meta charset="utf-8">   
  6. </head>  
  7. <body>  
  8.     <!-- 注释节点的内容 -->  
  9.     <div id="container"> 元素节点的内容</div>  
  10.     <script>  
  11.       // 元素节点   输出：  1/DIV/null  
  12.       var dnode = document.getElementById('container');  
  13.       alert("节点类型："+dnode.nodeType+"/"+dnode.nodeName+"/"+dnode.nodeValue);  
  14.        
  15.       //属性节点   输出： 2/id/container  
  16.       var attrnode = dnode.attributes[0];  
  17.       alert("节点类型："+attrnode.nodeType+"/"+attrnode.nodeName+"/"+attrnode.nodeValue);   
  18.         
  19.       //文本节点  输出： 3/#text/ 元素节点的内容  
  20.        var textnode = dnode.childNodes[0];  
  21.       alert("节点类型："+textnode.nodeType+"/"+textnode.nodeName+"/"+textnode.nodeValue);  
  22.         
  23.       //注释节点  输出： 8/#comment/ 注释节点的内容   
  24.       var commentnode = document.body.childNodes[1];  
  25.       alert("节点类型："+commentnode.nodeType+"/"+commentnode.nodeName+"/"+commentnode.nodeValue);  
  26.         
  27.       //文档节点   输出： 10/html/nul  
  28.       alert("节点类型："+document.doctype.nodeType+"/"+document.doctype.nodeName+"/"+document.doctype.nodeValue);  
  29.         
  30.       //文档片段节点   输出： 11/#document-fragment/null  
  31.       var frag = document.createDocumentFragment();  
  32.       alert("节点类型："+frag.nodeType+"/"+frag.nodeName+"/"+frag.nodeValue);  
  33.     </script>  
  34. </body>  
  35. </html>  

【4】节点层次

                                 

【5】html嵌套规则

                        

1.   块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其他的内联元素

2.   块级元素不能放在<p>里面

3.   有几个特殊的块级元素只能包含内联元素，不能再包含块级元素，这几个特殊的标签是h1-h6 p dt

4.   li内可以包含div标签

5.   块级元素与块级元素并列，内联元素与内联元素并列

【6】事件

事件流定义：事件流描述的是从页面中接受事件的顺序；

——1.  事件冒泡流：

事件最开始由罪具体的元素接收，然后逐级向上传播至最不具体的那个节点

——2.  事件捕获流：

与事件冒泡流相反

——3.  html事件处理程序

<input type="button" id = "btn1" onclick="funt( );">

——4.  DOM 0级事件处理程序

<input type="button"id = "btn2">

var btn2 = document.getElementById('btn2');

           btn2.onclick = funtcion(){

           alert("这是DOM 0级事件处理程序 ");

}

——5.  DOM 2级事件处理程序

用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener()

参数：要处理的事件名、作为事件处理程序的函数和布尔值。

<input type="button"id = "btn3">

var btn3 = document.getElementById('btn3');

    btn3.addEventListener('click',funt,false);

    btn3.removeEventListener('click',funt,false); // 参数与addEventListener(）相同

——6.  I E 的事件处理程序

    btn3.attachEvent('click',funt);

    btn3.detachEvent('click',funt);

——7.  跨浏览器的事件处理程序

能力检测：目标不是识别特定的浏览器，而是识别浏览器的能力，浏览器有这个功能实现

跨浏览器 :

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>      
  4.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  5.     <meta charset="utf-8">   
  6. </head>  
  7. <body>  
  8.     <input type="button" id = "btn3" value="按钮">      
  9.     <script>   
  10.      var btn3 = document.getElementById('btn3');  
  11.      function funt(){  
  12.          alert("事件处理程序");  
  13.      }  
  14.        // 添加句柄  
  15.         var eventUtil = {  
  16.             addHandler:function(element,type,handler){  
  17.                 if(element.addEventListener){  
  18.                     //DOM 2级事件处理程序  
  19.                     element.addEventListener(type,handler,false);  
  20.                 }else if(element.attachEvent){  
  21.                     // I E 的事件处理程序  
  22.                     element.attachEvent('on'+type,handler);  
  23.                 }else{  
  24.                    //  DOM 0级事件处理程序  
  25.                     element['on'+type]  = handler;  
  26.                 }  
  27.             },  
  28.          // 删除句柄   
  29.             removeHandler:function(element,type,handler){  
  30.                 if(element.addEventListener){  
  31.                     //DOM 2级事件处理程序  
  32.                     element.removeEventListener(type,handler,false);  
  33.                 }else if(element.attachEvent){  
  34.                     // I E 的事件处理程序  
  35.                     element.detachEvent('on'+type,handler);  
  36.                 }else{  
  37.                    //  DOM 0级事件处理程序  
  38.                     element['on'+type]  = null;  
  39.                 }  
  40.             }  
  41.         };  
  42.         eventUtil.addHandler(btn3,'click',funt); // 添加事件的元素、添加的动作、添加的事件  
  43.         </script>  
  44. </body>  
  45. </html>  

联系：

DOM 0级不能给元素添加多个事件，如果添加了多个事件，则只会执行最后添加的那个事件；

DOM 2级可以给元素添加多个事件，而且会按顺序进行

【7】事件对象

 什么是事件对象？在触发DOM上的事件时都会产生一个对象事件对象 event

——1.   DOM中的事件对象属性

（1）type属性用于获取事件类型

（2）target属性用于获取事件目标 

（3）stopPropagation()方法 用于阻止事件冒泡

（4）preventDefault() 方法 阻止事件的默认行为

——2.   IE中的事件对象

（1）type 属性 用于获取事件类型

（2）srcElement 属性 用于获取事件目标

（3）cancelBubble 属性 用于阻止/取消事件冒泡，设置为true表示阻止冒泡 设置为false表示不阻止冒泡

（4）returnValue 属性 用于阻止事件的默认行为，设置为false表示阻止事件的默认行

兼容代码：

[html] view plain copy
  1. //获取事件  
  2.    getEvent:function(event){  
  3.        return event ? event:window.event;   
  4.    },  
  5. //获取事件的类型  
  6.    getType:function(event){   
  7.        return event.type;  
  8.    },  
  9. //获取事件来自于哪个元素  
  10.    getElement:function(event){  
  11.        return event.target || event.srcElement;  
  12.    },  
  13. //阻止或取消事件的默认行为  
  14.    preventDefault:function(event){  
  15.       if(event.preventDefault){  
  16.           event.preventDefault();  
  17.       }else{  
  18.           event.returnValue = false;  
  19.       }  
  20.    },  
  21. //阻止事件冒泡  
  22.    stopPropagation:function(event){  
  23.        if(event.stopPropagation){  
  24.            event.stopPropagation();  
  25.        }else{  
  26.            event.cancelBubble = true;  
  27.        }  
  28.    }  


丸子嘻嘻
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值