HTML DOM 樹?

?

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。

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

?

查找 HTML 元素

通常，通過 JavaScript，您需要操作 HTML 元素。

為了做到這件事情，您必須首先找到該元素。常用的有三種方法來做這件事：

• 通過 id 找到 HTML 元素????????? var x=document.getElementById("intro");
• 通過標簽名找到 HTML 元素??????? var y=x.getElementsByTagName("p");
• 通過類名找到 HTML 元素??????? var x=document.getElementsByClassName("intro");

可以組合查找，例如

查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

?

事件句柄　(Event Handlers)

屬性此事件發生在何時...

onabort	圖像的加載被中斷。
onblur	元素失去焦點。
onchange	域的內容被改變。
onclick	當用戶點擊某個對象時調用的事件句柄。
ondblclick	當用戶雙擊某個對象時調用的事件句柄。
onerror	在加載文檔或圖像時發生錯誤。
onfocus	元素獲得焦點。
onkeydown	某個鍵盤按鍵被按下。
onkeypress	某個鍵盤按鍵被按下并松開。
onkeyup	某個鍵盤按鍵被松開。
onload	一張頁面或一幅圖像完成加載。
onmousedown	鼠標按鈕被按下。
onmousemove	鼠標被移動。
onmouseout	鼠標從某元素移開。
onmouseover	鼠標移到某元素之上。
onmouseup	鼠標按鍵被松開。
onreset	重置按鈕被點擊。
onresize	窗口或框架被重新調整大小。
onselect	文本被選中。
onsubmit	確認按鈕被點擊。
onunload	用戶退出頁面。

?

鼠標 / 鍵盤屬性

屬性描述

altKey	返回當事件被觸發時，"ALT" 是否被按下。
button	返回當事件被觸發時，哪個鼠標按鈕被點擊。
clientX	返回當事件被觸發時，鼠標指針的水平坐標。
clientY	返回當事件被觸發時，鼠標指針的垂直坐標。
ctrlKey	返回當事件被觸發時，"CTRL" 鍵是否被按下。
metaKey	返回當事件被觸發時，"meta" 鍵是否被按下。
relatedTarget	返回與事件的目標節點相關的節點。
screenX	返回當某個事件被觸發時，鼠標指針的水平坐標。
screenY	返回當某個事件被觸發時，鼠標指針的垂直坐標。
shiftKey	返回當事件被觸發時，"SHIFT" 鍵是否被按下。

?

addEventListener() 方法

語法：element.addEventListener(event, function, useCapture);

useCapture默認值為 false, 即冒泡傳遞，當值為 true 時, 事件使用捕獲傳遞。

第一個參數是事件的類型 (如 "click" 或 "mousedown").，

?????????????????????? 注意:不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。

第二個參數是事件觸發后調用的函數。

第三個參數是個布爾值用于描述事件是冒泡還是捕獲。該參數是可選的。

???????????????????? addEventListener() 方法允許向同一個元素添加多個事件，且不會覆蓋已存在的事件

???????????????????? removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄

?

addEventListener瀏覽器支持

表格中的數字表示支持該方法的第一個瀏覽器的版本號。

注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，對于這類瀏覽器版本可以使用 detachEvent() 方法來移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

//跨瀏覽器解決辦法 var x = document.getElementById("myBtn"); if (x.addEventListener) { // 所有主流瀏覽器，除了 IE 8 及更早版本x.addEventListener("click", myFunction); } else if (x.attachEvent) { // IE 8 及更早版本x.attachEvent("onclick", myFunction); }

?

創建新的 HTML 元素 (節點) - appendChild()

<div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div><script> var para = document.createElement("p"); var node = document.createTextNode("這是一個新的段落。"); para.appendChild(node);var element = document.getElementById("div1"); element.appendChild(para); </script>

?

創建新的 HTML 元素 (節點) - insertBefore()

<div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div><script> var para = document.createElement("p"); var node = document.createTextNode("這是一個新的段落。"); para.appendChild(node);var element = document.getElementById("div1"); var child = document.getElementById("p1"); element.insertBefore(para, child); </script>

?

移除已存在的元素

<div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div><script> var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child); </script>

?

替換 HTML 元素 - replaceChild()

<div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div><script> var para = document.createElement("p"); var node = document.createTextNode("這是一個新的段落。"); para.appendChild(node);var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script>

?

HTMLCollection 對象

• getElementsByTagName() 方法返回 HTMLCollection 對象。
• HTMLCollection 對象類似包含 HTML 元素的一個數組。
• HTMLCollection 對象的 length 屬性定義了集合中元素的數量。
• HTMLCollection 不是一個數組！
• HTMLCollection 看起來可能是一個數組，但其實不是。
• 你可以像數組一樣，使用索引來獲取元素。
• HTMLCollection 無法使用數組的方法： valueOf(), pop(), push(), 或 join() 。

?

NodeList? JavaScript HTML DOM 節點列表

• NodeList 對象是一個從文檔中獲取的節點列表 (集合) 。
• NodeList 對象類似 HTMLCollection 對象。
• 一些舊版本瀏覽器中的方法（如：getElementsByClassName()）返回的是 NodeList 對象，而不是 HTMLCollection 對象。
• 所有瀏覽器的 childNodes 屬性返回的是 NodeList 對象。
• 大部分瀏覽器的 querySelectorAll() 返回 NodeList 對象。
• NodeList 對象 length 屬性定義了節點列表中元素的數量。

?

HTMLCollection 與 NodeList 的區別

• HTMLCollection 是 HTML 元素的集合。
• NodeList 是一個文檔節點的集合。
• NodeList 與 HTMLCollection 有很多類似的地方。
• NodeList 與 HTMLCollection 都與數組對象有點類似，可以使用索引 (0, 1, 2, 3, 4, ...) 來獲取元素。
• NodeList 與 HTMLCollection 都有 length 屬性。
• HTMLCollection 元素可以通過 name，id 或索引來獲取。
• NodeList 只能通過索引來獲取。
• 只有 NodeList 對象有包含屬性節點和文本節點。

節點列表不是一個數組！

節點列表看起來可能是一個數組，但其實不是。

你可以像數組一樣，使用索引來獲取元素。

節點列表無法使用數組的方法： valueOf(), pop(), push(), 或 join() 。

總結

以上是生活随笔為你收集整理的JavaScript 操作 HTML DOM (文档对象模型) 相关知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。