javascript組成：
1. ECMAScript 基本語法。
2. BOM （瀏覽器對象模型）
3. DOM （文檔對象模型）
一）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模式一起使用。