一、BOM

　　BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行“對話”

1.window對象　　

　　客戶端JavaScript最高層對象之一，由於window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，可以省略window對象的引用。

window.document.write();
// 簡寫
document.write();

　　瀏覽器都支持 window 對象，它表示瀏覽器窗口，如果文檔包含框架（frame 或 iframe 標簽），瀏覽器會為 HTML 文檔創建一個 window 對象，並為每個框架創建一個額外的 window 對象

　　沒有應用於 window 對象的公開標準，不過所有瀏覽器都支持該對象。所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。全局變量是 window 對象的屬性。全局函數是 window 對象的方法

window.innerHeight　　　　瀏覽器窗口的內部高度
window.innerWidth　　　　 瀏覽器窗口的內部寬度
window.open()　　　　　　　打開新窗口
window.close()　　　　　　 關閉當前窗口

2.window子對象

　　1）navigator對象

　　瀏覽器對象，判定用戶所使用的瀏覽器

navigator.appName　　   //
 
 Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字符串
navigator.userAgent　　 // 客戶端絕大部分信息
navigator.platform　　　// 瀏覽器運行所在的操作系統

　　2）screen對象

　　屏幕對象，獲取屏幕的寬度、高度

screen.availWidth　　// 可用的屏幕寬度
screen.availHeight  // 可用的屏幕高度

　　3）location對象---重要

location.href       // 獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload()   // 重新加載頁面

　　4）彈出框

　　　　警告框

alert("這是一個警告框");

　　　　確認框　

/*
確認框用於使用戶可以驗證或者接受某些信息，當確認框出現後，用戶需要點擊確定或者取消按鈕才能繼續
進行操作，如果用戶點擊確認，那麽返回值為 true；如果用戶點擊取消，那麽返回值為 false*/
confirm("是否確定？")

　　　　提示框

/*提示框經常用於提示用戶在進入頁面前輸入某個值，當提示框出現後，用戶需要輸入某個值，然後點擊確
認或取消按鈕才能繼續操縱，如果用戶點擊確認，那麽返回值為輸入的值。如果用戶點擊取消，那麽返回值
為 null
*/
prompt("請在下方輸入","你的答案");

　　5）計時器

　　定時執行相關代碼，而不是在函數被調用後再執行，稱為計時事件

　　setTimeout()

var t=setTimeout("JS語句",毫秒);

　　setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變量中。假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它

　　setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert(‘5 seconds!‘)"，或者對函數的調用，諸如 alertMsg()"；第二個參數指示從當前起多少毫秒後執行第一個參數（1000 毫秒等於一秒)

　　clearTimeout()

clearTimeout(setTimeout_variable);

// 在指定時間之後執行一次相應函數
var timer = setTimeout(function(){
  alert("時間到了！");
}, 3000);

// 取消setTimeout設置
clearTimeout(timer);

　　setInterval()

/*setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉
由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數*/
setInterval("JS語句",時間間隔)

　　clearInterval()

/*clearInterval() 方法可取消由 setInterval() 設置的 timeout
clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值*/
clearInterval(setinterval返回的ID值)

// 每隔一段時間就執行一次相應函數
var timer = setInterval(function(){
  console.log("時間到了！");
}, 3000);

// 取消setInterval設置
clearInterval(timer);

二、DOM

　　DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法，當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model），HTML DOM 模型被構造為對象的樹

1.HTML DOM

　　DOM標準規定HTML文檔中的每個成分都是一個節點(node)

文檔節點(document對象)              代表整個文檔
元素節點(element 對象)              代表一個元素（標簽）
文本節點(text對象)                  代表元素（標簽）中的文本
屬性節點(attribute對象)             代表一個屬性，元素（標簽）才有屬性
註釋是註釋節點(comment對象)    

　　JavaScript 可以通過DOM創建動態的 HTML

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應

2.查找標簽

　　1）直接查找

document.getElementById           根據ID獲取一個標簽
document.getElementsByClassName   根據class屬性獲取
document.getElementsByTagName     根據標簽名獲取標簽合集

　　2）間接查找

parentElement            父節點標簽元素
children                 所有子標簽
firstElementChild        第一個子標簽元素
lastElementChild         最後一個子標簽元素
nextElementSibling       下一個兄弟標簽元素
previousElementSibling   上一個兄弟標簽元素

3.節點操作

　　1）創建節點

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

　　2）添加節點

追加一個子節點（作為最後的子節點）
somenode.appendChild(newnode)；
把增加的節點放到某個節點的前邊。
somenode.insertBefore(newnode,某個節點);

var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

　　3）刪除節點

　　獲得要刪除的元素，通過父元素調用刪除

removeChild(要刪除的節點);

　　4）替換節點

somenode.replaceChild(newnode, 某個節點);

　　5）屬性節點

　　獲取文本節點的值

var divEle = document.getElementById("d1");
divEle.innerText;
divEle.innerHTML;

　　設置本節點的值

var divEle = document.getElementById("d1");
divEle.innerText="1";
divEle.innerHTML="<p>2</p>";

　　attribute

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自帶的屬性還可以直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."

`　　6）獲取值操作

　　語法：

　　elementNode.value

　　適用於input、select、textarea標簽

var iEle = document.getElementById("i1");
console.log(iEle.value);

　　7）class操作

className                 獲取所有樣式類名(字符串)

classList.remove(cls)     刪除指定類
classList.add(cls)        添加類
classList.contains(cls)   存在返回true，否則返回false
classList.toggle(cls)     存在就刪除，否則添加

　　8）指定CSS操作

obj.style.backgroundColor="red"

　　JS操作CSS屬性的規律

　　對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

　　對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫即可

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

4.事件

　　使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素獲得焦點。               // 練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變。             應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並松開。
onkeyup        某個鍵盤按鍵被松開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。

onselect      在文本框中的文本被選中時發生。
onsubmit      確認按鈕被點擊，使用的對象是form。

5.綁定方法

　　方法一

<div id="d1" onclick="changeColor(this);">點我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

註意：

　　this是實參，表示觸發時間到額當前元素，函數定義過程中的ths為形參

　　方式二

<div id="d2">點我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

前端-BOM和DOM