javascript中的DOM

通過 HTML DOM(文檔對象模型)，可訪問 JavaScript HTML 文檔的所有元素。
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。
通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。
JavaScript 能夠改變頁面中的所有 HTML 元素。
JavaScript 能夠改變頁面中的所有 HTML 屬性。
JavaScript 能夠改變頁面中的所有 CSS 樣式。
JavaScript 能夠對頁面中的所有事件做出反應。
。。。。。。。。。。
查找 HTML 元素：
通常，通過 JavaScript，您需要操作 HTML 元素。
http://www.iis7.com/b/wzjk/
為了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：
通過 id 找到 HTML 元素。 getElementById，查找元素。
通過標簽名找到 HTML 元素。getElementsByTagName，查找元素中的子元素。
通過類名找到 HTML 元素。 getElementsByClassName，查找類名為class定義的元素。
在 DOM 中查找 HTML 元素的最簡單的方法，是通過使用元素的 id。如果找到該元素，則該方法將以對象的形式返回該元素，如果未找到該元素，則 # 將包含 null。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
JavaScript HTML DOM - 改變 HTML
HTML DOM 允許 JavaScript 改變 HTML 元素的內容。
在 JavaScript 中，document.write()：可用于直接向 HTML 輸出流寫內容，絕對不要在文檔(DOM)加載完成之后使用 document.write()。這會覆蓋該文檔。
改變 HTML 內容：
修改 HTML 內容的最簡單的方法是使用 innerHTML 屬性。
如需改變 HTML 元素的內容，請使用這個語法：document.getElementById(id).innerHTML=新的 HTML。
改變 HTML 屬性：
如需改變 HTML 元素的屬性，請使用這個語法：document.getElementById(id).attribute=新屬性值。
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
JavaScript HTML DOM - 改變CSS
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。
改變 HTML 樣式(style)：
如需改變 HTML 元素的樣式，請使用這個語法：document.getElementById(id).style(樣式).property(屬性)=新樣式。
。。。。。。。。。。
使用事件：HTML DOM 允許我們通過觸發事件來執行代碼。
比如以下事件：
元素被點擊。
頁面加載完成。
輸入框被修改。
。。。。。。。。。。。。。。。
JavaScript HTML DOM 事件：
HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應。
對事件做出反應：
我們可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。
如需在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代碼：
onclick=JavaScript。
HTML 事件的例子：
當用戶點擊鼠標時。
當網頁已加載時。
當圖像已加載時。
當鼠標移動到元素上時。
當輸入字段被改變時。
當提交 HTML 表單時。
當用戶觸發按鍵時。
。。。。。。。。。。。。。。
onload 和 onunload 事件：
onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。
onload 事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網頁的正確版本。
onload 和 onunload 事件可用于處理 cookie。
onchange 事件：onchange 事件常結合對輸入字段的驗證來使用。
onmouseover 和 onmouseout 事件：onmouseover 和 onmouseout 事件可用于在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。
onmousedown、onmouseup 以及 onclick 事件：
onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的所有部分。首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最后，當完成鼠標點擊時，會觸發 onclick 事件。
onfocus：當輸入字段獲得焦點時，改變其背景色。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
JavaScript HTML DOM EventListener(事件監聽器)
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不會覆蓋已存在的事件句柄。
你可以向一個元素添加多個事件句柄。
你可以向同個元素添加多個同類型的事件句柄，如：兩個 "click" 事件。
你可以向任何 DOM 對象添加事件監聽，不僅僅是 HTML 元素。如： window 對象。
addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。
當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強， 在沒有控制HTML標記時也可以添加事件監聽。
語法：element.addEventListener(event, function, useCapture)。
第一個參數是事件的類型 (如 "click" 或 "mousedown").
第二個參數是事件觸發后調用的函數。
第三個參數是個布爾值用于描述事件是冒泡還是捕獲。該參數是可選的。
注意:不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。
addEventListener() 方法允許你在 HTML DOM 對象添加事件監聽， HTML DOM 對象如： HTML 元素, HTML 文檔, window 對象。
當傳遞參數值時，使用"匿名函數"調用帶參數的函數。
事件冒泡或事件捕獲？：
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發的順序。 如果你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發呢？
在 "冒泡" 中，內部元素的事件會先被觸發，然后再觸發外部元素，即： <p> 元素的點擊事件先觸發，然后會觸發 <div> 元素的點擊事件。
在 "捕獲" 中，外部元素的事件會先被觸發，然后才會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發 ，然后再觸發 <p> 元素的點擊事件。
addEventListener() 方法可以指定 "useCapture" 參數來設置傳遞類型：addEventListener(event, function, useCapture);
默認值為 false, 即冒泡傳遞，當值為 true 時, 事件使用捕獲傳遞。
removeEventListener() 方法：removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄。
：
JavaScript HTML DOM 元素(節點)
創建新的 HTML 元素：如需向 HTML DOM 添加新元素，您必須首先創建該元素（元素節點），然后向一個已存在的元素追加該元素。
：
HTML DOM 教程
在我們的 JavaScript 教程的 HTML DOM 部分，您已經學到了：
如何改變 HTML 元素的內容 (innerHTML)
如何改變 HTML 元素的樣式 (CSS)
如何對 HTML DOM 事件作出反應
如何添加或刪除 HTML 元素