JavaScript之 Bom+Dom

1：BOM概念

BOM：Browser  Object  Model。

window對象是BOM中全部對象的核心。

 

 

2：window對象

屬性

self：self表明本身，至關於window。

parent：返回父窗口。

方法

3：window方法

1.window.open(url, name);

url：一個可選的字符串，聲明瞭要在新窗口中顯示的文檔的 URL。若是省略了這個參數，或者它的值是空字符串，那麼新窗口就不會顯示任何文檔。

name：一個可選的字符串，該字符串是一個由逗號分隔的特徵列表，其中包括數字、字母和下劃線，該字符聲明瞭新窗口的名稱。

谷歌默認會把系統自動打開的新網頁阻止掉，但不阻止經過事件打開新的網頁。

2.close：關閉瀏覽器。（火狐不支持！）

3.alert(顯示的文本)：彈出窗。

 

4 confirm示的文字)：該方法有返回值，點擊肯定返回true，點擊取消返回false。

5.prompt(提示信息)：輸入框。點擊肯定返回字符串，點擊取消返回null。

4：history對象

該對象包含瀏覽器訪問過的url。

1.屬性

length  返回瀏覽器歷史記錄的數量：//console.log(history.length);//瀏覽器歷史記錄的數量

2.方法

back() 後退，加載前一個url。history.back();

forward() 前進。

go(number)  若是參數是正數，那麼就是前進相應的數目，若是是負數那麼反之，若是是0那麼就是刷新。

//回退到倒數第2個: history.go(-2);

//前進到下1個頁面：history.go(1);

5：location對象

包含有當前url的相關信息，而history對象不能具體反應url的相關信息。

屬性：

href：設置或返回完整的url。能夠爲相對路徑，也能夠爲絕對路徑。

 

search：返回url?後面的查詢部分。

 

hash ：是一個可讀可寫的字符串，該字符串是 URL 的錨部分（從 # 號開始的部分）。

方法：

assign(url)：加載新的文檔。

reload(boolean)：從新加載文檔，當參數是true，任什麼時候候都會從新加載，false的時候，只有在文檔改變的時候纔會加載，不然直接讀取內存當中的。

replace(url)：用新的文檔代替當前的文檔。但不會在 History 對象中生成一個新的記錄。當使用該方法時，新的 URL 將覆蓋 History 對象中的當前記錄。

6：navigator對象

appName：瀏覽器名稱。 

 

appVersion：瀏覽器版本。

platform：操做系統。

userAgent：用戶代理信息，經過該屬性可獲取瀏覽器及操做系統信息。

 

====è

 

 

應用：

 

1：廣告彈出窗（自動關閉）。

 

 

7：window事件

onload：加載事件網頁加載完畢後執行。

onscroll：滾動事件。

window.onscroll = function () {
    var div = document.getElementById('div');
    div.innerHTML = '頁面滾動';
    console.log(document.body.scrollTop || document.documentElement.scrollTop);
}

<div id="div" style="width: 200px;height: 1120px;background: darkred;"></div>

 

onresize：窗口縮放事件。

window.onresize = function () {
    console.log(22);
    console.log(document.documentElement.clientWidth);
    console.log(document.documentElement.clientHeight);
}

<div id="div" style="width: 200px;height: 1120px;background: darkred;"></div>

 

// 獲取瀏覽器視窗寬度/高度

document.documentElement.clientWidth;

document.documentElement.clientHeight; 

 

// 獲取瀏覽器滾動條 隱藏的 寬度/高度

chrome(body)、火狐、IE(documentElement)

document.documentElement.scrollLeft || document.body.scrollLeft;

document.documentElement.scrollTop || document.body.scrollTop;

 

8：DOM的概念和做用

DOM：Document  Object  Model。

document對象是DOM核心對象。

做用：對html中的內容，屬性，樣式進行操做。

 

根據 DOM規定，HTML 文檔中的每一個成分都是一個節點。

DOM 是這樣規定的：

    整個文檔是一個文檔節點。

    每一個 HTML 標籤是一個元素節點。

    包含在 HTML 元素中的文本是文本節點。

    每個 HTML 屬性是一個屬性節點。

註釋屬於註釋節點。

 

節點樹中節點之間的關係：父子，兄弟。

9：DOM經常使用屬性

title：返回或設置當前文檔的標題。讀標題寫標題

 

 

 

all：返回全部元素的集合。有兼容性問題。不適用於火狐。

 

 

 

10：DOM查詢方法 （如何獲取DOM節點）

1.getElementById(id)：返回擁有指定id的（第一個）對象的引用。

2.getElementsByTagName(tagName)：返回有指定標籤名的對象集合。

               

 

 

注：上面兩個方法沒有兼容性問題。

3.getElementsByName(name)：返回帶有指定name指定名稱的對象的集合。有兼容性問題。

           

 

 

 

在IE9及其如下，若是該對象的標準屬性包含有name,（好比說input，在input中name是input的默認屬性，因此能夠正常使用，可是在div中name並非div的默認屬性，因此不能正常顯示），那麼能夠正確的使用。不然不可使用。在火狐中，該方法能夠適用於任何狀況。

結論： getElementsByName(name)主要是適用於表單。

4.write：輸出內容到頁面。

5.getElementsByClassName()：返回帶有指定className指定名稱的對象的集合。有兼容性問題，適用於火狐瀏覽器，在IE瀏覽器中不可用（IE8及如下不可用）。  

 

 

 

 練習：封裝獲取className值的DOM節點的兼容性的函數。

à 

 

11：操做內容

innerHTML：用來設置或獲取對象起始和結束標籤內 。<div><p>aaa</p></div>

 

 

12：DOM增刪改

一：建立節點（註釋和文檔節點通常不須要建立）

    1：建立元素節點  //document.createElement(‘元素標籤名’);

        document.createElement("元素標籤名");

    2：建立屬性節點 //document.creatAttribute(‘屬性名’);

        var oAttr = document.createAttribute(「屬性名」);（不經常使用）

  oAttr.value = "attr-name";

  oDiv.setAttributeNode(oAttr);

        對象.屬性=屬性值;（經常使用）

    3：建立文本節點  //document.createTextNode(‘文本’)

        對象.innerHTML = "";

        var oText = document.createTextNode(「文本」);  // 文本中的HTML標籤實體化（不經常使用）

  oDiv.appendChild(oText);

二：追加到頁面當中

    父對象.appendChild(newNode)  // 插入到父對象最後。  appendChild() //插入到父對象最後

    父對象.insertBefore(newNode, existsNode)   // 插入到什麼對象以前。  insertBefore(new,exeists) //插入到存在的對象以前；

三：修改(替換)節點

    父對象.replaceChild(newNode,existsNode);  // 前面的替換後面的    replaceChild(new,exists) //替換節點

四：刪除節點

    父對象.removeChild(oldNode);  //removeChild(old) //刪除節點

     若是肯定要刪除節點，最好也清空內存  對象=null;

應用：

1：頂部懸浮。

2：回到頂部。

3：動態建立表格。

綜合應用：

1：表格刪除。