Javascript 高級程序設計--總結【三】

 ********************  Chapter 8 BOM ********************

BOM由瀏覽器提供商擴展 

window:

         既是js訪問瀏覽器窗口的接口，又是Global對象

         全局變量會成爲window 的屬性，可是定義全局變量和window屬性仍是有差異，在於可否經過delete刪除

                   var age = 10;//本質上來講，configurable 屬性設置爲false, 因此不能delete 刪除

        window.name = 'test';

                  

                   delete window.age;//false, IE<9 拋出錯誤           

        delete window.name;//true, IE<9 拋出錯誤

                  

                   console.log(window.age);//10

        console.log(window.name);//undefined

        

                   var n = window.a;//undefined  這裏不會拋出錯誤，至關因而一次屬性查詢

 

         窗口關係及框架：

                            window.frames.length；

                            top.frames[''];//最好使用 top 的方式，由於top始終指向最高層的框架window

                   parent：

                            表示當前框架的父框架

                            除非最高層的窗口是經過window.open()打開的，不然其window對象的name屬性不會包含任何值

                   self:

                            始終指向window

         窗口位置：

                   其餘：   screenLeft\screenTop

                   Firefox: screenX\screenY

                            var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX;

                            var leftPos = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY;

                   IE\Chrome: screenTop 表示的是可見區域的離屏幕頂端距離，也就是工具欄高度值

                            這兩個方法移動窗口，可是通常會被瀏覽器禁用

                            window.moveTo(10,10);//移動到指定位置  

                            window.moveBy(10,10);//移動指定像素距離

         窗口大小：

                            //獲取窗口視圖的大小

                            var pageW = window.innerWidth,

                                     pageH = window.innerHeight;//IE8及之前的版本不支持

                            if (typeof pageW != 'number') {

                                     if (document.compatMode == 'CSS1Compat') {

                                               pageW = document.documentElement.clientWidth;

                                               pageH = document.documentElement.clientHeight;

                                     } else {

                                               pageW = document.body.clientWidth;

                                               pageH = document.body.clientHeight;

                                     }

                            }

                            //調整窗口大小，可是通常會被瀏覽器禁用

                            window.resizeTo(100,100);

                            window.resizeBy(10,20);

         導航和打開窗口：

                            window.open('http://......',frameName);

                            window.open('http://......',_self);//_parent,_top,_blank

                           

                            第三個參數： fullscreen\height\left\location\menubar\resizable\scrollbars\status\toolbar\top\width

                           

                            var newWin = window.open('','','height=200,width=400,top=10,resizable=yes');

                            //對於新的打開窗口，能夠執行如下兩個方法

                            newWin.resizeTo(500,500);

                            newWin.moveTo(100,100);

                           

                            newWin.close();

                            newWin.closed;//獲取新窗口的關閉狀態

                           

                            newWin.opner;//調用 window.open() 的對象

         setTimeout\     setInterval:

                            var id = setTimeout(function(){},1000);

                            clearTimeout(id);

                            setTimeout(function(){},1000);       

                            setInterval(function(){},1000);

                  

                            //通常使用 setTimeout() 來替代setInterval()

                            var num = 0;

                            var max = 10;

                            function increment() {

                                     num++;

                                     if (num < max) {

                                               setTimeout(increment, 1000);

                                     } else {

                                               alert('OK');

                                     }

                            }

                            setTimeout(increment, 1000);        

         系統對話框：

                            alert()\confirm()\prompt()

                            window.print()

                            window.find()

location對象：

         window.location 和 document.location 引用的是同一個對象

         屬性：

                   hash  '#contents'

                   host   'www,google.com:80'

                   hostname  'www,google.com'

                   href   'http://www,google.com'

                   pathname  '/Login/'

                   prot   '80'

                   protocol  'http:'

                   search  '?name=test'

         查詢字符串參數：

                   //封裝獲取查詢字符串的方法

                   function getQuery() {

            var res = {};

            var sear = location.search.length > 0 ? location.search.substring(1) : "";

 

            var items = sear.length ? sear.split('&') : [];

            var len = items.length, item = null, key = null,value=null;

            for (var i = 0; i < len; i++) {

                item = items[i].split('=');

                key = decodeURIComponent(item[0]);

                value = decodeURIComponent(item[1]);

                if (key.length) {

                    res[key] = value;

                }

            }

            return res;

        }

                  

         url位置操做:

        //如下的方式都是等價的

        window.location.assign("http://www.baidu.com");

        window.location = 'http://www.baidu.com';

        location.href = 'http://www.baidu.com';

 

        //能夠動態修改地址參數

        location.hash = '#section';

        location.search = '?test=1';

                  

                   以上方式都會在瀏覽器產生歷史記錄，能夠在瀏覽器進行後退操做，可是若是使用replace()操做就不會產生歷史記錄。

                   location.replace("http://www.baidu.com");//沒有歷史記錄

                  

                   location.reload();//可能從緩存中加載

                   location.reload(true);//強制從服務器加載       

navigator對象：

                   navigator.appCodeName; //瀏覽器名稱：Mozilla

                   navigator.appName;//完整瀏覽器名稱  ：Netscape

                   navigator.userAgent;//瀏覽器的用戶代理字符串 

         檢測插件：

                   navigator.plugins

                  

                   //只能在非IE的環境中使用

        function hasPlugin(name) {

            name = name.toLowerCase();

            var len = navigator.plugins.length;

            for (var i = 0; i < len; i++) {

                if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {

                    return true;

                }

            }

            return false;

        }

        //對於IE的檢測方式，COM的方式實現，因此name表示插件的標識符

        //Flash 標識符  ShockwaveFlash.ShockwaveFlash

        function hasIEPlugin(name) {

            try {

                new ActiveXObject(name);

                return true;

            } catch (e) {

                return false;

            }

        }

        //測試

        function hasFlashPlugin() {

            var res = hasPlugin('Flash ');

            if (!res) {

                return hasIEPlugin(name);

            }

            return res;

        }

                  

                   //plugins 集合的refresh()方法更新集合，若是參數傳入 true,那麼會刷新全部的包含插件的頁面

                   navigator.plugins.refresh();

         註冊處理程序：

                   //將一個站點註冊爲Rss源

                   navigator.registerContentHandler('application/rss+xml','http://www.somereader.com?feed=%s','some reader');

                   navigator.registerProtocolHandler('mailto','http://www.somemailclient.com?cmd=%s','some mail client');

                  

screen 對象：

         screen.availLeft;//未被系統佔用的左側像素值

         screen.availTop        ;//未被系統佔用的上方像素值

         screen.colorDepth;//顏色位數

 

history對象:

         history.length;//歷史頁面數量

         history.back();//後退一頁

         history.forward();//前進一頁

         history.go(1);

                  

********************  Chapter 9 客戶端檢測 ********************             

//這裏研究過深，難度太大，而且實用性不強，後續有時間須要，能夠再研究          

 

                  

                  

                  

********************  Chapter 10 DOM ********************                 

IE中全部的DOM對象都是以COM對象的形式實現的。這些對象與原生的JavaScript對象的行爲或活動特色不一致。

 

節點層次

         Node類型：//除IE以外均可以訪問的類型

                   Node.ELEMENT_NODE(1);

                   Node.ATTRIBUTE_NODE(2);

                   Node.TEXT_NODE(3);

                   Node.CDATE_SECTION_NODE(4);

                   Node.ENTITY_REFRENCE_NODE(5);

                   Node.ENTITY_NODE(6);

                   Node.PROCESSING_INSTRUCTION_NODE(7);

                   Node.COMMIT_NODE(8);

                   Node.DOCUMENT_NODE(9);

                   Node.DOCUMENT_TYPE_NODE(10);

                   Node.DOCUMENT_FRAGMENT_NODE(11);

                   Node.NOTATION_NODE(12);

        

        var ele = document.getElementById('test');

        if (ele.nodeType == Node.ELEMENT_NODE) {//IE沒有公開Node類型的構造函數，這裏會報錯

            if (window.console) {

                console.log("node is an element");

            }

        }

                   //適用於全部的瀏覽器

                   if (ele.nodeType == 1) {}

                  

         NodeList:

                   根據實際DOM狀況變化的對象

                   var chil = ele.childNodes[0];

       　　　  chil = ele.childNodes.item(0);

                  

                   //將NodeList轉換爲數組，可是IE8及如下的瀏覽器不支持，由於都是COM對象

        Array.prototype.slice.call(ele.childNodes, 0);

        //更加通用的方式

        function toArray(nodes) {

            var arr = null;

            try {

                arr = Array.prototype.slice.call(nodes, 0);

            } catch (e) {

                arr = new Array();

                for (var i = 0, len = nodes.length; i < len ; i++) {

                    arr.push(node[i]);

                }

            }

        }

                  

                   //nextElementSibling 和 previousSibling

                   if (ele.nextElementSibling == null) {

            console.log("this is last one");

        } else if (ele.previousSibling == null) {

            console.log("this is first one....");

        }

                   //parentNode

                   //hasChildNodes

                   if (ele.hasChildNodes()) {

            console.log('has children...');

        }

                   //ownerDocument 表示整個文檔的文檔節點

                   ele.ownerDocument;

         節點操做：

                   var ele = document.getElementById("test");

                   //返回新增的節點，若是node已是文檔的一部分，那麼就是移動到新的節點位置的效果

                   var newNode = ele.appendChild(node);

                   //若是第二個參數爲null,那麼效果就是appendChild()

                   ele.insertBefore(node,null);

                   ele.insertBefore(node,ele.firstChild);//插入後成爲第一個節點

 

                   //替換最後一個節點

                   var retNode = ele.replaceChild(newNode,ele.lastChild);

                   //移除最後一個節點並返回

                   var lNode = ele.removeChild(ele.lastChild);

                  

 

                   //深拷貝，包括後代元素

                   ele.cloneNode(true);

 

                   //淺拷貝，不包括後代元素

                   ele.cloneNode(true);

 

                   //處理文本節點，刪除後代空文本節點，合併相鄰文本節點

                   ele.normalize();

                  

         Document類型：

                   document 是HTMLDocument的實例；

                   nodeType: 9;

                   nodeName: '#document';

                   //訪問子節點

                   document.documentElement;//始終指向HTML元素 <html>

                   document.childNodes;

                   //獲取 body 元素

                   document.body;

                   //獲取文檔結構

                   document.doctype;

                   不一樣的瀏覽器對document.doctype 的支持差異很大

 

                   document.title;

                   document.URL;

                   document.referrer;

        document.domain;

                   //若是原地址是 www.baidu.com， 那麼只能設置 baidu.com

        document.domain = 'baidu.com';

        document.domain = 'sina.com';//這樣設置爲出錯的

                   //對於含有內嵌框架的頁面頗有用，由於不一樣子域的頁面沒法經過JavaScript通訊的，可是若是把document.domain 都設置成相同的值，那麼就能夠通訊了

                   一樣若是一開始設置爲了 鬆散的，就不能設置爲緊繃的

                   document.domain = 'baidu.com';

        document.domain = 'www.baidu.com';//不能再設置回緊繃的

                  

                   //namedItem

                   var ps = document.getElementsByTagName("p");//NodeList

        //尋找結果集中的 name=p1 的項

        console.log(ps.namedItem('p1'));//ps['p1']

                  

                   document.getElementsByName('');//

                  

                   特殊集合：

                            document.anchors;// 帶有name 的<a>

                            document.forms;

                            document.images;

                            document.links;//帶有 href 的<a>

                   DOM一致性檢測：

                            //通常不使用這種方式，並不許確，仍是使用能力檢測

                            document.implementation.hasFeature('XML','1.0');

                           

                   //注意轉義

        document.write("<script type='' src=''><\/script>");

        //多一個換行符

        document.writeln("<script type='' src=''><\/script>");

                   //重寫整個頁面

                   window.onload = function () {

            document.write("onload 以後重寫整個頁面");

        }

                  

                   open()和close() 分別用於打開的關閉網頁輸出流

                  

         Element 類型

                   nodeType: 1

                  

                   tagName 等價於 nodeName

                   ele.id;

                   ele.title;

                   ele.className;

                   ele.lang;

                   ele.dir;//左右對齊方式

                  

                   ele.getAttribute('id');

                   ele.getAttribute('class');

                   html5 規範： 自定義特性添加 data- 前綴

                  

                   setAttribute('id','test');

                   removeAttribute('class');

                  

                   DOM元素自己屬性的訪問：

                            div.id;

                            div.align;

                           

                            var atrs = ele.attributes;

                            var id = atrs.getNamedItem('id');

                            atrs.removeNamedItem('class');

                            atrs.setNamedItem(newatr);

                  

                   function getAttrs(ele) {

            var name, val, arr = new Array();

            for (var i = 0, len = ele.attributes.length; i < len; i++) {

                //specified 表示是否設置了該屬性，爲了兼容IE7

                if (ele.attributes[i].specified) {

                    name = ele.attributes[i].nodeName;

                    val = ele.attributes[i].nodeValue;

                    arr.push(name + "=" + val);

                }

            }

            return arr.join(" ");

        }

                   createElement():

                            //這種方式對於IE7 是有問題的

                            var div = document.createElement("div");

                            div.id = 'a';

                           

                            IE7問題總結：

                                     不能設置動態建立的 iframe 的name特性；

                                     不能經過表單的reset() 方法重設動態建立的 input 元素

                                     動態建立的 type='reset' 重設不了表單

                                     動態建立的一批name 相同的單選按鈕彼此毫無關係

                           

                            子節點操做：

                            for (var i = 0, len = ele.childNodes.length; i < len; i++) {

                                     if (ele.childNodes[i].nodeType == 1) {

                                               //執行元素操做

                                     }

                            }

         Text類型：

                   nodeType: 3

                   nodeName: '#text'

                   nodeValue(date): 文本值

                  

                   normalize:

                            var ele = document.getElementById("div1");

                            //建立文本節點

                            var txt = document.createTextNode('text');

                            ele.appendChild(txt);

                            //同一個元素能夠添加多個文本節點

                            var txt1 = document.createTextNode('txt2');

                            ele.appendChild(txt1);

 

                            console.log(ele.childNodes.length);//3

                            //合併元素中全部的文本節點

                            ele.normalize();

                            console.log(ele.childNodes.length);//1

                  

                   splitText:

                            var div = document.createElement('div');

                            var txt = document.createTextNode('this is good!');

                            div.appendChild(txt);

                            document.body.appendChild(div);

                            console.log(div.childNodes.length);//1

                            //分割子節點， 返回4以前的節點

                            var before = div.firstChild.splitText(4);

                            console.log(div.firstChild.nodeValue);//this

                            console.log(before.nodeValue);//is good

                            console.log(div.childNodes.length);//2

Comment 類型：

                   noteType:8

                   nodeName:'#comment'

 

                   //建立

                   var comment =document.createComment("this is commnet");

 

         CDATASection 類型: 主要是針對XML文檔

                   nodeType:4

                   nodeName:'#cdata-section'

 

                   //在XML文檔中能夠以下建立

                   document.createCDataSection()

 

         DocumentType 類型： Firefox\Safari\Opera 支持

                   nodType:10

 

                   document.doctype.name;      

                   IE及更早版本不支持DocumentType,會被解釋爲註釋

 

         DocumentFragment 類型：

                   nodeType；11

                   nodeName:'#document-fragment'

 

                   文檔片斷不會再文檔中顯示，至關於一個‘倉庫’來使用，也不佔用資源，把文檔片斷能夠添加到文檔中，可是隻會將文檔片斷的子節點添加到文檔中去

 

 

                   //經過fragment 的方式屢次添加元素，可讓頁面少許的渲染

                   var frag = document.createDocumentFragment();

                   var li = null;

 

                   for(var i =0;i<3;i++){

                            li = document.createElement("li");

                            li.appendChild(document.createTextNode('hello '+i));

                            frag.appendChild(li);

                   }

                   document.getElementById("ul").appendChild(frag);

         Attr 類型：

                   nodeType: 11

 

                   屬性：name\value\specified

                            var attr = document.createAttribute('align');

                            attr.value='left';

                            ele.setAttributeNode(attr);

                            console.log(ele.attributes['align'].value);//left

                            console.log(ele.getAttributeNode('align').value);//left

                            console.log(ele.getAttribute('align'));//left

 

DOM 操做技術：

         動態腳本：

                   function loadJs(url){

                            var script = document.createElement('script');

                            script.type='text/javascript';

                            script.src=url;

                            document.body.appendChild(script);

                   }

                   //直接加載js 代碼的方式，考慮IE的兼容性

                   function loadjsText(txt){

                            var script = document.createElement("script");

                            script.type='text/javascript';

                            try

                            {

                                     script.appendChild(document.createTextNode(txt)

                            }catch(e){

                                     //IE 是不容許 script 節點訪問子節點的，因此上面進行異常捕捉

                                     script.text=txt;

                            }

                            document.body.appendChild(script);

                   }

 

         動態樣式：

                   function loadStyle(){

                            var link = document.createElement('link');

                            link.rel='stylesheet';

                            link.type='text/css';

                            link.href='style.css';

                            var head = document.getElementsByTagName('head')[0];

                            head.appenChild(link);

                   }

 

                   function loadStyleText(txt){

                            var style = document.createElement('style');

                            style.type='text/css';

                            try{

                                     style.appenChild(document.createTextNode(txt));

                            }catch(e){

                                     //重用設置styleSheet.cssText 或者設置爲空字符串，容易讓IE崩潰

                                     style.styleSheet.cssText = txt;

                            }

 

                            var head = document.getElementsByTagName('head')[0];

                            head.appenChild(style);

                   }

         操做表格：

                   var tb = document.createElement('table');

                   var body = document.createElement('body');

                   tb.appenChild(body);

 

                   body.insertRow(0);

                   body.rows[0].insertCell(0)

                   body.rows[0].cells[0].appenChild(document.createTextNode('testTb'));

 

                   document.body.appendChild(tb);

        

         使用NodeList:

                   這是動態改變的，應當儘可能減小對NodeList 的訪問

 

                   var divs = document.getElementsByTagName('div'),t;

                   //因爲divs.length 是動態更新的，因此這裏會形成無限循環

                   for(var i=0; i < divs.length; i++){

                            t = document.createElement('div');

                            document.body.appendChild(t);

                   }

                   //這樣在使用，保存在臨時變量中

                   for(var i=0, len = divs.length; i < len; i++){

                            t = document.createElement('div');

                            document.body.appendChild(t);

                   }