DOM&BOM
javascript組成：
1. ECMAScript 基本語法。
2. BOM （瀏覽器對象模型）
3. DOM （文檔對象模型）
關於dom&bom的概念的起源
文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標誌語言的標準編程接口。在網頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，用來表示文檔中對象的標準模型就稱為DOM。Document Object Model的歷史可以追溯至1990年代後期微軟與Netscape的“瀏覽器大戰”，雙方為了在JS與Jscript一決生死，於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，既有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的傑作。
BOM(Browser Object Model) 是指瀏覽器對象模型，是用於描述這種對象與對象之間層次關系的模型，瀏覽器對象模型提供了獨立於內容的、可以與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
Methods&Content&Application
一）BOM（borwser Object Model）
瀏覽器對象模型：使用對象描述了瀏覽器的各個部分的內容。
1）window :當前的窗口
window常用的方法：
open() 打開一個新的資源。
moveTo() 將窗口左上角的屏幕位置移動到指定的 x 和 y 位置。
moveBy() 相對於當前的窗口移動指定的 x 和 y 偏移值(左上角)。
setInterval() 每隔指定的毫秒數指定指定的代碼。
setTimeout（） 經過指定毫秒數指定一次指定的代碼。
A）
open()方法接收4個參數，分別是 打開資源名；打開方式；打開的窗口大小位置；資源找不到是否用其他代替。
下面是一個例子：
function openImage()
{
window.open("image.html","_blank","height = 500pt,width = 350pt,top = 50pt,left = 450pt",false);
}
其中第三個參數設置各種屬性，我們用逗號分割開。
B）其它方法示例：
window.moveTo(100,100);
window.moveBy(30,0);
傳入的參數都是移動的數值，知識參考的原點不同。
C）setInterval() 每隔指定的毫秒數指定指定的代碼。循環執行
例子： var id = window.setInterval("showImage()",2000);
我們可以通過window.clearInterval(id); 來停止上面的執行循環。
setTimeout（） 經過指定毫秒數指定一次指定的代碼。只執行一次
例子：window.setTimeout("showImage()",2000);
2）地址欄對象
location （url地址欄對象）
常用方法有
href: 設置或獲取整個 URL 為字符串。
reload() ：重新加載頁面地址。
示例：
document.write("當前地址欄的地址："+location.href); 獲取地址欄地址
location.href = "http://www.baidu.com"; 設置地址欄地址
location.reload(); 重新加載地址欄地址
3）屏幕對象
Screen(屏幕對象)：獲取電腦的屏幕的一些數據。
常用方法：
availHeight 獲取系統屏幕的工作區域高度，排除 Microsoft? Windows? 任務欄。
availWidth 獲取系統屏幕的工作區域寬度，排除 Windows 任務欄。
height 獲取屏幕的垂直分辨率。
width 獲取屏幕的垂直分辨率。
示例：
document.write("排除任務欄的高度："+ screen.availHeight+"<br/>");
document.write("排除任務欄的寬度："+ screen.availWidth+"<br/>");
document.write("包括任務欄的高度："+ screen.height+"<br/>");
document.write("包括任務欄的高度："+ screen.width+"<br/>");
二）Dom編程( Document Object Model )
文檔對象模型:當一個html頁面加載到瀏覽器的時候,那麽瀏覽器會為每個標簽都創建一個對應的對象描述該標簽的所有信息，那麽我們看到的網頁信息實際上就是看到了這些標簽對象的信息、 如果我們需要操作頁面的數據，那麽我們就可以通過這些標簽對象進行操作。
那麽現在我們利用裏面提供的方法來的到頁面的節點：
var elements = document.all; //獲取頁面上所有節點
for(var index = 0 ; index<elements.length ; index++)
{
alert("節點名字:"+elements[index].nodeName); // nodeName節點的名字
}
通過document.all返回一個頁面所有便簽對象的數組，然後遍歷數組輸出節點名字。
也可以獲取某個標簽的節點集合：
var images = document.images; // images 獲取一個頁面的所有img節點。
A)幾種得到標簽節點的方法：
1）通過標簽的屬性找節點
我們可以使用以下方法：
a)通過標簽的ID：document.getElementById("html元素的id")
示例:
var imageNode = document.getElementById("iamge1");
imageNode.src = "1.jpg";
得到一個id為iamge1的節點對象，並設置的它src屬性值。
b)通過標簽名: document.getElementsByTagName("標簽名")
示例：
var divs = document.getElementsByTagName("div"); //根據標簽名字找節點，註意：返回的是一個數組。
for(var index = 0 ; index<divs.length ; index++){
divs[index].innerHTML = "我是div".fontcolor("red");
}
c）通過元素的NAME屬性：document.getElementsByName("html元素的name")
示例：
var buttons = document.getElementsByName("button"); //根據name的屬性值找對象，註意返回的也是一個數組對象
for(var index = 0 ; index<buttons.length ; index++){
buttons[index].value="按鈕的文本";
}
2）通過關系找節點
document中還有幾個方法，可以通過一個節點，來獲得與它有關系的那些節點：
parentNode 獲取當前元素的父節點。
childNodes 獲取當前元素的所有下一級子元素
firstChild 獲取當前節點的第一個子節點。
lastChild 獲取當前節點的最後一個子節點。
nextSibling 獲取當前節點的下一個節點。（兄節點）
previousSibling 獲取當前節點的上一個節點。（弟節點）
有以下html代碼：
<form id="myForm"><input type="text" id="username" /><input type="text" id="pass" /><br /></form><img src="#" id=myImage>
註意標簽和標簽之間不留空。
通過關系獲得節點：
var a = document.getElementById("myImage");
var b = a.previousSibling;
alert("previousSibling is：" + b.nodeName);
上面示例使用了previousSibling方法，要註意： 找子節點的時候瀏覽器會把空文本的內容也當成了子節點。
那麽如果找子節點的時候，如果只想要標簽節點，其他的節點不需要，那麽可以通過節點的類型進行篩選。
節點的類型：
標簽節點的類型是 1.
空文本的節點類型：3
註釋的節點類型：8
那麽如何判斷一個節點類型，我們可以使用nodeType 方法。
對於上述代碼如果我們想要<form>下的所有標簽節點，我們可以這樣寫：
var a = document.getElementById("myForm");
var b = a.childNodes;
for(var index = 0; index < b.length; index++)
{
if(b[index].nodeType == 1)
{alert("名字："+ b[index].nodeName+" 類型:" + b[index].nodeType)};
}
B)創建、刪除、 插入節點
我們可以通過下面方法來實現： (elt為一個節點對象)
document.createElement("標簽名") 創建新元素節點
elt.setAttribute("屬性名", "屬性值") 設置節點的屬性
elt.appendChild(e) 添加元素到elt中最後的位置
elt.insertBefore(newNOde, child); 添加到elt中，child之前。
註意：elt對象必須是child節點的直接父節點
elt.removeChild(eChild) 刪除指定的子節
註意： elt必須是child的直接父節點
示例：
//創建一個tr對象
var trNode = document.createElement("tr");//創建tr標簽節點
var tdNode1 = document.createElement("td");
var tdNode2 = document.createElement("td");
tdNode1.innerHTML = "<input type=‘file‘/>";//設置td標簽內的屬性
tdNode2.innerHTML = "<a href=‘#‘ onclick=‘delFile(this)‘ >刪除附件</a>"
//把td添加到tr上面
trNode.appendChild(tdNode1);
trNode.appendChild(tdNode2);
var tbody = document.getElementsByTagName("tbody")[0]; //註意： tr的 直接父節點是tbody而不是table.
var lastTr = document.getElementById("lastTr");
tbody.insertBefore(trNode , lastTr); // 第一個參數是新節點， 第二個參數是已經存在節點。
var trNode = aNode.parentNode.parentNode;
var tbody = document.getElementsByTagName("tbody")[0];
tbody.removeChild(trNode);//刪除目標節點
三）利用節點實現標簽間的互動
實現標簽間的互動，我們可以在一個標簽內添加一個時間，然後改時間觸發一個函數，這個函數內部修改其它便簽的屬性或內容。
下面是一個例子實現： 選擇一個年份下拉欄的內容時，月份下拉欄出現選項供我們選擇。
html代碼,為年份註冊一個onchange事件，觸發getMyMouth()函數。
<select id="myYear" onchange="getMyMouth()"><option>請選擇年份</option></select>
<select id="myMouth" ><option>請選擇月份</option></select>
利用標簽節點，來添加選擇即可：
function getMyMouth()
{
var myMouth = document.getElementById("myMouth");
//刪除月份信息
var oldMouth = myMouth.childNodes;
for(var i = 1; i < oldMouth.length;)
{
myMouth.removeChild(oldMouth[i]);
}
myMouth.options.length = 1;//剩下一個默認選項
//添加月份信息
for(var i = 1; i < 13 ; i++)
{
var newOption = document.createElement("option");
newOption.innerHTML = i;
myMouth.appendChild(newOption);
}
}
四）利用節點操作CSS代碼
得到目標標簽的節點之後，我們還可以通過style屬性來修改它的css樣式。下面是一些例子：
var span =document.getElementById("code");
//操作span的css樣式。
span.style.color="red";
span.style.fontSize="30px";
span.style.fontWeight="bold";
span.style.backgroundColor="gray";
span.style.textDecoration="line-through";
五）正則表達式
在JavaScrip中，正則創建的方式 有：
方式1：
re = /正則的代碼.../模式
方式 2：
re = new RegExp("正則的代碼","模式");
常用的模式有：
g （全文查找出現的所有 pattern）
i （忽略大小寫）
正則對象常用的方法：
test() 判斷字符串的內容是否符合正則所定義的規則
exec() 查找指定的字符串是否存在符合規則的子串
例子一：
var str = "HEllo123";
var reg = /^[a-z0-9]+$/i; //註意： javascript如果沒有加上邊界匹配器，那麽只要全文中 存在符合規則的字符串，那麽就返回true.
document.write("符合規則嗎？"+reg.test(str));
結果為：true
如果要精確判斷整個字符串，需要加上邊界匹配器 開頭^ 與 結尾$ 。
例子二：
var str = "jin wang yao tuo tang da jia gao xing ma";
//要找出三個字母組成的單詞。
var reg = /\b[a-z]{3}\b/gi; // 如果沒有加上模式g，那麽每次都是從字符串的開始位置尋找
var line = "";
while((line = reg.exec(str))){
document.write(line+",");
}
結果為 ：jin,yao,tuo,jia,gao,
\b代表字與字中間那個看不見的東西,如 here is a word 那麽,這句中有好幾個\b, 每個單詞的前後都有一個\b. 。
exec方法會不斷重開頭第一個單詞查找，第一個不匹配，又會重新開頭查找，這樣會進入死循環，只有當正則模式中加入g模式後，才會進行一次重頭到尾的查找。所以exec方法常常與g模式一起使用。
DOM&BOM