【JavaScript】Bom對象和Dom對象

BOM:Browser Object Model(浏覽器對象模型)

就是在JS代碼中可以直接使用的對象，但是對象都是和浏覽器有關的

Example:

<script>

window.close();

</script>

(1)Window:對象表示浏覽器中打開的視窗 最頂層對象（******）

window的方法都可以省略window

常用：

alert();   :彈出一個提示框.

confirm(); :彈出一個确認框

prompt();  :輸入框

setTimeout();定時 執行一次就ok了

setInterval();定時 循環執行

clearTimeout();清除定時

clearInterval();清除定時

open():打開一個新視窗

close():視窗關閉了.

(2)Navigator :浏覽器對象（擷取浏覽器=客戶機的資訊）

常用：

navigator.appName  浏覽器的名

(3)Screen: 螢幕對象

常用：

width

height

(4)History:浏覽器曆史對象

常用：

- 到通路的上一個頁面

history.back();

history.go(-1);

- 到通路的下一個頁面

history.forward();

history.go(1);

(5)Location:位址對象

常用：

location.href  url位址（可以擷取 或 設定）

Dom：document object model: 文檔對象模型

對象都是和文檔相關的（html / xml）

Dom首先對HTML的解析過程：

解析完就得到一個

代表整個HTML文檔的①document對象

而這些可以單獨存在的标簽（html / body / head / title / span）就叫做②标簽對象(element對象)

而屬性對象(id)和文本對象(文本)因為不能單獨存在，還是要依賴标簽對象，是以就沒有給它們專門的對象

而不管element對象還是屬性對象還是文本對象都是節點

是以③Node節點對象是這些對象的父對象

這個對象的用途：當标簽對象、屬性對象、文本對象找不到要的方法的時候，就去它們的父類Node節點對象去找（同java）

** Document常用方法

(1)write()方法：

向頁面輸出變量（值）

向頁面輸出html代碼

var str = "abc";

document.write(str);

document.write("<hr/>");

(2)getElementById();

通過id得到元素（标簽）

使用getElementById得到input标簽

(3)getElementsByName();

通過标簽的name的屬性值得到标簽

傳回的是一個集合（數組）          

(4)getElementsByTagName("标簽名稱");

通過标簽名稱得到元素

** Element常用方法

(1)getAttribute(“屬性的名”);  

獲得屬性的值

element.id 和 element.getAttribute("id")作用相同-->一般這麼用友善，但是對于某些關鍵字（class）就用不了了

(2)setAttribute(“屬性名”,”屬性值”);

添加和修改

(3)removeAttribute(“屬性名”);

移除屬性

不能删除value屬性

(4)在标簽下查找标簽

在标簽下查找标簽 隻有getElementsByTagName(); 是唯一有效的方法

childNodes：獲得所有的子節點.不是所有的浏覽器都相容（有些會把空格和換行也當做節點）

** Node常用方法

Node包括以下三種節點

元素節點(element)

nodeName：标簽名  

nodeType: 1 

nodeValue:沒有 null

屬性節點(element.getAttributeNode("屬性名"))

nodeName: 屬性名  

nodeType: 2  

nodeValue:屬性的值

文本節點(element.firstChild)

nodeName: #text  

nodeType: 3   

nodeValue:文本内容

PS：這裡的父節點、子節點隻針對元素（标簽）操作，屬性是另外來取的

比如在此html中<span id="spanid">haha</span>

var span = document.getElementById("spanid");

alert(span.firstChild.nodeValue);