初識JavaScript及DOM

改變 HTML 輸出流
JavaScript 能夠創建動態的 HTML 內容：
今天的日期是： Thu Feb 18 2016 10:03:32 GMT+0800 (中國標準時間)
在 JavaScript 中，document.write() 可用於直接向 HTML 輸出流寫內容。

實例

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

絕對不要在文檔加載完成之後使用 document.write()。這會覆蓋該文檔。

改變 HTML 內容
修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。
如需改變 HTML 元素的內容，請使用這個語法：
document.getElementById(id).innerHTML=new HTML
本例改變了 p元素的內容：
實例

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

本例改變了 h1元素的內容：
實例

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

實例講解：
上面的 HTML 文檔含有 id=”header” 的 h1 元素
我們使用 HTML DOM 來獲得 id=”header” 的元素
JavaScript 更改此元素的內容 (innerHTML)
改變 HTML 屬性
如需改變 HTML 元素的屬性，請使用這個語法：
document.getElementById(id).attribute=new value
本例改變了 img>元素的 src 屬性：
實例

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

實例講解：
上面的 HTML 文檔含有 id=”image” 的 img 元素
我們使用 HTML DOM 來獲得 id=”image” 的元素
JavaScript 更改此元素的屬性（把 “smiley.gif” 改爲 “landscape.jpg”）

JavaScript HTML DOM - 改變CSS
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。
改變 HTML 樣式
如需改變 HTML 元素的樣式，請使用這個語法：
document.getElementById(id).style.property=new style
下面的例子會改變 p元素的樣式：
實例

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

<p>以上段落通過腳本修改。</p>

</body>
</html>

使用事件
HTML DOM 允許我們通過觸發事件來執行代碼。
比如以下事件：
1.元素被點擊。
2.頁面加載完成。
3.輸入框被修改。
4.……
在接下來的章節，你會學到更多關於事件的知識。
本例改變了 id=”id1” 的 HTML 元素的樣式，當用戶點擊按鈕時：
實例

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>

</body>
</html>

更多實例
Visibility
如何使元素不可見。您希望元素顯示或消失嗎？
實例：

<!DOCTYPE html>
<html>
<body>

<p id="p1">這是一個文本。 這是一個文本。 這是一個文本。 這是一個文本。 這是一個文本。 這是一個文本。 這是一個文本。</p>

<input type="button" value="隱藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="顯示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

</body>
</html>

JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應。
對事件做出反應
我們可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。
如需在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代碼：
onclick=JavaScript
HTML 事件的例子：

當用戶點擊鼠標時
當網頁已加載時
當圖像已加載時
當鼠標移動到元素上時
當輸入字段被改變時
當提交 HTML 表單時
當用戶觸發按鍵時

在本例中，當用戶在 h1元素上點擊時，會改變其內容：
實例

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">點擊文本!</h1>
</body>
</html>

本例從事件處理器調用一個函數：
實例

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>

HTML 事件屬性
如需向 HTML 元素分配事件，您可以使用事件屬性。
實例
向 button 元素分配 onclick 事件：

<button onclick="displayDate()">Try it</button>

在上面的例子中，名爲 displayDate 的函數將在按鈕被點擊時執行。
使用 HTML DOM 來分配事件
HTML DOM 允許您使用 JavaScript 來向 HTML 元素分配事件：
實例
向 button 元素分配 onclick 事件：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

在上面的例子中，名爲 displayDate 的函數被分配給 id=myButn” 的 HTML 元素。
按鈕點擊時Javascript函數將會被執行。

onload 和 onunload 事件
onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。
onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。
實例

<body onload="checkCookies()">

onchange 事件
onchange 事件常結合對輸入字段的驗證來使用。
下面是一個如何使用 onchange 的例子。當用戶改變輸入字段的內容時，會調用 upperCase() 函數。
實例

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用於在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。
實例
一個簡單的 onmouseover-onmouseout 實例：

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}

function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的所有部分。首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最後，當完成鼠標點擊時，會觸發 onclick 事件。

實例
onmousedown 和onmouseup
當用戶按下鼠標按鈕時，更換一幅圖像。

<!DOCTYPE html>
<html>
<head>
<script>
function lighton()
{
document.getElementById('myimage').src="bulbon.gif";
}
function lightoff()
{
document.getElementById('myimage').src="bulboff.gif";
}
</script>
</head>

<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>點擊不釋放鼠標燈將一直亮着!</p>
</body>
</html>

onload
當頁面完成加載時，顯示一個提示框。

<!DOCTYPE html>
<html>
<head>

<script>
function mymessage()
{
alert("消息在 onload 事件觸發後彈出。");
}
</script>
</head>

<body onload="mymessage()">
</body>

</html>

onfocus
當輸入字段獲得焦點時，改變其背景色。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body>

輸入你的名字: <input type="text" onfocus="myFunction(this)">

<p>當輸入框獲取焦點時，修改背景色（background-color屬性） 將被觸發。</p>

</body>
</html>

鼠標事件
當指針移動到元素上方時，改變其顏色；當指針移出文本後，會再次改變其顏色

<!DOCTYPE html>
<html>
<body>

<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
將鼠標移至文部上</h1>

</body>
</html>

JavaScript HTML DOM EventListener

addEventListener() 方法
實例
點用戶點擊按鈕時觸發監聽事件：

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法用於向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不會覆蓋已存在的事件句柄。
你可以向一個元素添加多個事件句柄。
你可以向同個元素添加多個同類型的事件句柄，如：兩個 “click” 事件。
你可以向任何 DOM 對象添加事件監聽，不僅僅是 HTML 元素。如： window 對象。
addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。
當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強，在沒有控制HTML標記時也可以添加事件監聽。
你可以使用 removeEventListener() 方法來移除事件的監聽。
語法

element.addEventListener(event, function, useCapture);

第一個參數是事件的類型 (如 “click” 或 “mousedown”).
第二個參數是事件觸發後調用的函數。
第三個參數是個布爾值用於描述事件是冒泡還是捕獲。該參數是可選的。
Note 注意:不要使用 “on” 前綴。例如，使用 “click” ,而不是使用 “onclick”。

向原元素添加事件句柄
實例
當用戶點擊元素時彈出 “Hello World!” :

element.addEventListener("click", function(){ alert("Hello World!"); });

你可以使用函數名，來引用外部函數:
實例
當用戶點擊元素時彈出 “Hello World!” :

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

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

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

你可以向同個元素添加不同類型的事件：
實例

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

向 Window 對象添加事件句柄
addEventListener() 方法允許你在 HTML DOM 對象添加事件監聽， HTML DOM 對象如： HTML 元素, HTML 文檔, window 對象。或者其他支出的事件對象如: xmlHttpRequest 對象。
實例
當用戶重置窗口大小時添加事件監聽：

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

傳遞參數
當傳遞參數值時，使用”匿名函數”調用帶參數的函數：
實例

element.addEventListener("click", function(){ myFunction(p1, p2); });

事件冒泡或事件捕獲？
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發的順序。如果你將 p元素插入到 div 元素中，用戶點擊 p 元素, 哪個元素的 “click” 事件先被觸發呢？
在冒泡中，內部元素的事件會先被觸發，然後再觸發外部元素，即： p元素的點擊事件先觸發，然後會觸發 div元素的點擊事件。
在捕獲中，外部元素的事件會先被觸發，然後纔會觸發內部元素的事件，即： div 元素的點擊事件先觸發，然後再觸發 p元素的點擊事件。
addEventListener() 方法可以指定 “useCapture” 參數來設置傳遞類型：
addEventListener(event, function, useCapture);
默認值爲 false, 即冒泡傳遞，當值爲 true 時, 事件使用捕獲傳遞。
實例

document.getElementById("myDiv").addEventListener("click", myFunction, true);

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

element.removeEventListener("mousemove", myFunction);

注意： 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 DOM 事件對象參考手冊
所有 HTML DOM 事件，可以查看我們完整的 HTML DOM Event 對象參考手冊。
HTML DOM 事件
HTML DOM 事件
HTML DOM 事件允許Javascript在HTML文檔元素中註冊不同事件處理程序。
事件通常與函數結合使用，函數不會在事件發生前被執行！ (如用戶點擊按鈕)。
提示：在 W3C 2 級 DOM 事件中規範了事件模型。
HTML DOM 事件
DOM：指明使用的 DOM 屬性級別。

鼠標事件

屬性  描述  DOM
onclick 當用戶點擊某個對象時調用的事件句柄。  2
oncontextmenu   在用戶點擊鼠標右鍵打開上下文菜單時觸發  
ondblclick  當用戶雙擊某個對象時調用的事件句柄。  2
onmousedown 鼠標按鈕被按下。    2
onmouseenter    當鼠標指針移動到元素上時觸發。 2
onmouseleave    當鼠標指針移出元素時觸發    2
onmousemove 鼠標被移動。  2
onmouseover 鼠標移到某元素之上。  2
onmouseout  鼠標從某元素移開。   2
onmouseup   鼠標按鍵被鬆開。    2

鍵盤事件

屬性  描述  DOM
onkeydown   某個鍵盤按鍵被按下。  2
onkeypress  某個鍵盤按鍵被按下並鬆開。   2
onkeyup 某個鍵盤按鍵被鬆開。  2

框架/對象（Frame/Object）事件

屬性  描述  DOM
onabort 圖像的加載被中斷。 ( <object>)   2
onbeforeunload  該事件在即將離開頁面（刷新或關閉）時觸發    2
onerror 在加載文檔或圖像時發生錯誤。 ( <object>, <body>和 <frameset>)   
onhashchange    該事件在當前 URL 的錨部分發生修改時觸發。  
onload  一張頁面或一幅圖像完成加載。  2
onpageshow  該事件在用戶訪問頁面時觸發   
onpagehide  該事件在用戶離開當前網頁跳轉到另外一個頁面時觸發    
onresize    窗口或框架被重新調整大小。   2
onscroll    當文檔被滾動時發生的事件。   2
onunload    用戶退出頁面。 ( <body> 和 <frameset>)  2

表單事件

屬性  描述  DOM
onblur  元素失去焦點時觸發   2
onchange    該事件在表單元素的內容改變時觸發( <input>, <keygen>, <select>, 和 <textarea>)    2
onfocus 元素獲取焦點時觸發   2
onfocusin   元素即將獲取焦點是觸發 2
onfocusout  元素即將失去焦點是觸發 2
oninput 元素獲取用戶輸入是觸發 3
onreset 表單重置時觸發 2
onsearch    用戶向搜索域輸入文本時觸發 ( <input="search">)    
onselect    用戶選取文本時觸發 ( <input> 和 <textarea>)   2
onsubmit    表單提交時觸發 2

剪貼板事件

屬性  描述  DOM
oncopy  該事件在用戶拷貝元素內容時觸發  
oncut   該事件在用戶剪切元素內容時觸發  
onpaste 該事件在用戶粘貼元素內容時觸發

打印事件

屬性  描述  DOM
onafterprint    該事件在頁面已經開始打印，或者打印窗口已經關閉時觸發   
onbeforeprint   該事件在頁面即將開始打印時觸發

拖動事件

事件  描述  DOM
ondrag  該事件在元素正在拖動時觸發    
ondragend   該事件在用戶完成元素的拖動時觸發     
ondragenter 該事件在拖動的元素進入放置目標時觸發   
ondragleave 該事件在拖動元素離開放置目標時觸發    
ondragover  該事件在拖動元素在放置目標上時觸發    
ondragstart 該事件在用戶開始拖動元素時觸發  
ondrop  該事件在拖動元素放置在目標區域時觸發

多媒體（Media）事件

事件  描述  DOM
onabort 事件在視頻/音頻（audio/video）終止加載時觸發。    
oncanplay   事件在用戶可以開始播放視頻/音頻（audio/video）時觸發。    
oncanplaythrough    事件在視頻/音頻（audio/video）可以正常播放且無需停頓和緩衝時觸發。  
ondurationchange    事件在視頻/音頻（audio/video）的時長髮生變化時觸發。     
onemptied   The event occurs when the current playlist is empty  
onended 事件在視頻/音頻（audio/video）播放結束時觸發。    
onerror 事件在視頻/音頻（audio/video）數據加載期間發生錯誤時觸發。  
onloadeddata    事件在瀏覽器加載視頻/音頻（audio/video）當前幀時觸發觸發。  
onloadedmetadata    事件在指定視頻/音頻（audio/video）的元數據加載後觸發。    
onloadstart 事件在瀏覽器開始尋找指定視頻/音頻（audio/video）觸發。    
onpause 事件在視頻/音頻（audio/video）暫停時觸發。  
onplay  事件在視頻/音頻（audio/video）開始播放時觸發。    
onplaying   事件在視頻/音頻（audio/video）暫停或者在緩衝後準備重新開始播放時觸發。    
onprogress  事件在瀏覽器下載指定的視頻/音頻（audio/video）時觸發。    
onratechange    事件在視頻/音頻（audio/video）的播放速度發送改變時觸發。   
onseeked    事件在用戶重新定位視頻/音頻（audio/video）的播放位置後觸發。     
onseeking   事件在用戶開始重新定位視頻/音頻（audio/video）時觸發。    
onstalled   事件在瀏覽器獲取媒體數據，但媒體數據不可用時觸發。    
onsuspend   事件在瀏覽器讀取媒體數據中止時觸發。   
ontimeupdate    事件在當前的播放位置發送改變時觸發。   
onvolumechange  事件在音量發生改變時觸發。    
onwaiting   事件在視頻由於要播放下一幀而需要緩衝時觸發。

動畫事件

事件  描述  DOM
animationend    該事件在 CSS 動畫結束播放時觸發   
animationiteration  該事件在 CSS 動畫重複播放時觸發   
animationstart  該事件在 CSS 動畫開始播放時觸發

過渡事件

事件  描述  DOM
transitionend   該事件在 CSS 完成過渡後觸發。

其他事件

事件  描述  DOM
onmessage   該事件通過或者從對象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時觸發   
onmousewheel    已廢棄。 使用 onwheel 事件替代     
ononline    該事件在瀏覽器開始在線工作時觸發。    
onoffline   該事件在瀏覽器開始離線工作時觸發。    
onpopstate  該事件在窗口的瀏覽歷史（history 對象）發生改變時觸發。 event occurs when the window's history changes   
onshow  該事件當 <menu> 元素在上下文菜單顯示時觸發    
onstorage   該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發     
ontoggle    該事件在用戶打開或關閉 <details> 元素時觸發  
onwheel 該事件在鼠標滾輪在元素上下滾動時觸發

事件對象
常量

靜態變量    描述  DOM
CAPTURING-PHASE 當前事件階段爲捕獲階段(3)  1
AT-TARGET   當前事件是目標階段,在評估目標事件(1)    2
BUBBLING-PHASE  當前的事件爲冒泡階段 (2)  3

屬性

屬性  描述  DOM
bubbles 返回布爾值，指示事件是否是起泡事件類型。    2
cancelable  返回布爾值，指示事件是否可擁可取消的默認動作。 2
currentTarget   返回其事件監聽器觸發該事件的元素。   2
eventPhase  返回事件傳播的當前階段。    2
target  返回觸發此事件的元素（事件的目標節點）。    2
timeStamp   返回事件生成的日期和時間。   2
type    返回當前 Event 對象表示的事件的名稱。  2

方法

方法  描述  DOM
initEvent() 初始化新創建的 Event 對象的屬性。    2
preventDefault()    通知瀏覽器不要執行與事件關聯的默認動作。    2
stopPropagation()   不再派發事件。 2

目標事件對象
方法

方法  描述  DOM
addEventListener()  允許在目標事件中註冊監聽事件(IE8 = attachEvent()) 2
dispatchEvent() 允許發送事件到監聽器上 (IE8 = fireEvent()) 2
removeEventListener()   運行一次註冊在事件目標上的監聽事件(IE8 = detachEvent())  2

事件監聽對象
方法

方法  描述  DOM
handleEvent()   把任意對象註冊爲事件處理程序  2

文檔事件對象
方法
方法描述 DOM
createEvent() 2
鼠標/鍵盤事件對象
屬性

屬性  描述  DOM
altKey  返回當事件被觸發時，"ALT" 是否被按下。  2
button  返回當事件被觸發時，哪個鼠標按鈕被點擊。    2
clientX 返回當事件被觸發時，鼠標指針的水平座標。    2
clientY 返回當事件被觸發時，鼠標指針的垂直座標。    2
ctrlKey 返回當事件被觸發時，"CTRL" 鍵是否被按下。    2
Location    返回按鍵在設備上的位置 3
charCode    返回onkeypress事件觸發鍵值的字母代碼。    2
key 在按下按鍵時返回按鍵的標識符。 3
keyCode 返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。   2
which   返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。   2
metaKey 返回當事件被觸發時，"meta" 鍵是否被按下。    2
relatedTarget   返回與事件的目標節點相關的節點。    2
screenX 返回當某個事件被觸發時，鼠標指針的水平座標。  2
screenY 返回當某個事件被觸發時，鼠標指針的垂直座標。  2
shiftKey    返回當事件被觸發時，"SHIFT" 鍵是否被按下。   2

方法

方法  描述  W3C
initMouseEvent()    初始化鼠標事件對象的值 2
initKeyboardEvent() 初始化鍵盤事件對象的值 3

JavaScript HTML DOM 元素(節點)
創建新的 HTML 元素
創建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必須首先創建該元素（元素節點），然後向一個已存在的元素追加該元素。
實例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

例子解析：
這段代碼創建新的

元素：

var para=document.createElement("p");

如需向 p 元素添加文本，您必須首先創建文本節點。這段代碼創建了一個文本節點：
var node=document.createTextNode(“This is a new paragraph.”);
然後您必須向 p元素追加這個文本節點：

para.appendChild(node);

最後您必須向一個已有的元素追加這個新元素。
這段代碼找到一個已有的元素：

var element=document.getElementById("div1");

以下代碼在已存在的元素後添加新元素：

element.appendChild(para);

刪除已有的 HTML 元素
這段代碼向這個已有的元素追加新元素：
實例

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

實例解析
這個 HTML 文檔含有擁有兩個子節點（兩個

元素）的

元素：

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

找到 id=”div1” 的元素：

var parent=document.getElementById("div1");

找到 id=”p1” 的 p元素：

var child=document.getElementById("p1");

從父元素中刪除子元素：

parent.removeChild(child);

如果能夠在不引用父元素的情況下刪除某個元素，就太好了。
不過很遺憾。DOM 需要清楚您需要刪除的元素，以及它的父元素。
這是常用的解決方案：找到您希望刪除的子元素，然後使用其 parentNode 屬性來找到父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

HTML DOM 教程
在我們的 JavaScript 教程的 HTML DOM 部分，您已經學到了：
如何改變 HTML 元素的內容 (innerHTML)
如何改變 HTML 元素的樣式 (CSS)
如何對 HTML DOM 事件作出反應
如何添加或刪除 HTML 元素
如果您希望學到更多有關使用 JavaScript 訪問 HTML DOM 的知識，請訪問我們完整的 HTML DOM 教程。

JavaScript 和 HTML DOM 參考手冊
所有內置的JavaScript對象
所有瀏覽器對象
所有HTML DOM對象
JavaScript Objects 參考手冊
參考手冊描述了每個對象的屬性和方法，並提供了在線實例。
Array 對象

Array 對象
Array 對象用於在變量中存儲多個值:
var cars = [“Saab”, “Volvo”, “BMW”];
第一個數組元素的索引值爲 0，第二個索引值爲 1，以此類推。
更多有關JavaScript Array參考手冊請參考 JavaScript Array 對象手冊。
Array 對象屬性

方法  描述
concat()    連接兩個或更多的數組，並返回結果。
every() 檢測數值元素的每個元素是否都符合條件。
filter()    檢測數值元素，並返回符合條件所有元素的數組。
indexOf()   搜索數組中的元素，並返回它所在的位置。
join()  把數組的所有元素放入一個字符串。
lastIndexOf()   返回一個指定的字符串值最後出現的位置，在一個字符串中的指定位置從後向前搜索。
map()   通過指定函數處理數組的每個元素，並返回處理後的數組。
pop()   刪除數組的最後一個元素並返回刪除的元素。
push()  向數組的末尾添加一個或更多元素，並返回新的長度。
reverse()   反轉數組的元素順序。
shift() 刪除並返回數組的第一個元素。
slice() 選取數組的的一部分，並返回一個新數組。
some()  檢測數組元素中是否有元素符合指定條件。
sort()  對數組的元素進行排序。
splice()    從數組中添加或刪除元素。
toString()  把數組轉換爲字符串，並返回結果。
unshift()   向數組的開頭添加一個或更多元素，並返回新的長度。
valueOf()   返回數組對象的原始值。

Boolean 對象

Boolean 對象
Boolean 對象用於轉換一個不是 Boolean 類型的值轉換爲 Boolean 類型值 (true 或者false).
Boolean 對象完整教程, 請訪問 JavaScript Boolean 對象教程。
Boolean 對象屬性

屬性  描述
constructor 返回對創建此對象的 Boolean 函數的引用
prototype   使您有能力向對象添加屬性和方法。
Boolean 對象方法
方法  描述
toString()  把布爾值轉換爲字符串，並返回結果。
valueOf()   返回 Boolean 對象的原始值。

**重點內容**Date 對象

Date 對象用於處理日期與實際。
創建 Date 對象： new Date().
以上四種方法同樣可以創建 Date 對象：

var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

更完整的日期與實際教程請參照 JavaScript Date 對象教程。
Date 對象屬性

屬性  描述
constructor 返回對創建此對象的 Date 函數的引用。
prototype   使您有能力向對象添加屬性和方法。
Date 對象方法
方法  描述
getDate()   從 Date 對象返回一個月中的某一天 (1 ~ 31)。
getDay()    從 Date 對象返回一週中的某一天 (0 ~ 6)。
getFullYear()   從 Date 對象以四位數字返回年份。
getHours()  返回 Date 對象的小時 (0 ~ 23)。
getMilliseconds()   返回 Date 對象的毫秒(0 ~ 999)。
getMinutes()    返回 Date 對象的分鐘 (0 ~ 59)。
getMonth()  從 Date 對象返回月份 (0 ~ 11)。
getSeconds()    返回 Date 對象的秒數 (0 ~ 59)。
getTime()   返回 1970 年 1 月 1 日至今的毫秒數。
getTimezoneOffset() 返回本地時間與格林威治標準時間 (GMT) 的分鐘差。
getUTCDate()    根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。
getUTCDay() 根據世界時從 Date 對象返回週中的一天 (0 ~ 6)。
getUTCFullYear()    根據世界時從 Date 對象返回四位數的年份。
getUTCHours()   根據世界時返回 Date 對象的小時 (0 ~ 23)。
getUTCMilliseconds()    根據世界時返回 Date 對象的毫秒(0 ~ 999)。
getUTCMinutes() 根據世界時返回 Date 對象的分鐘 (0 ~ 59)。
getUTCMonth()   根據世界時從 Date 對象返回月份 (0 ~ 11)。
getUTCSeconds() 根據世界時返回 Date 對象的秒鐘 (0 ~ 59)。
getYear()   已廢棄。 請使用 getFullYear() 方法代替。
parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒數。
setDate()   設置 Date 對象中月的某一天 (1 ~ 31)。
setFullYear()   設置 Date 對象中的年份（四位數字）。
setHours()  設置 Date 對象中的小時 (0 ~ 23)。
setMilliseconds()   設置 Date 對象中的毫秒 (0 ~ 999)。
setMinutes()    設置 Date 對象中的分鐘 (0 ~ 59)。
setMonth()  設置 Date 對象中月份 (0 ~ 11)。
setSeconds()    設置 Date 對象中的秒鐘 (0 ~ 59)。
setTime()   setTime() 方法以毫秒設置 Date 對象。
setUTCDate()    根據世界時設置 Date 對象中月份的一天 (1 ~ 31)。
setUTCFullYear()    根據世界時設置 Date 對象中的年份（四位數字）。
setUTCHours()   根據世界時設置 Date 對象中的小時 (0 ~ 23)。
setUTCMilliseconds()    根據世界時設置 Date 對象中的毫秒 (0 ~ 999)。
setUTCMinutes() 根據世界時設置 Date 對象中的分鐘 (0 ~ 59)。
setUTCMonth()   根據世界時設置 Date 對象中的月份 (0 ~ 11)。
setUTCSeconds() setUTCSeconds() 方法用於根據世界時 (UTC) 設置指定時間的秒字段。
setYear()   已廢棄。請使用 setFullYear() 方法代替。
toDateString()  把 Date 對象的日期部分轉換爲字符串。
toGMTString()   已廢棄。請使用 toUTCString() 方法代替。
toISOString()   使用 ISO 標準返回字符串的日期格式。
toJSON()    以 JSON 數據格式返回日期字符串。
toLocaleDateString()    根據本地時間格式，把 Date 對象的日期部分轉換爲字符串。
toLocaleTimeString()    根據本地時間格式，把 Date 對象的時間部分轉換爲字符串。
toLocaleString()    據本地時間格式，把 Date 對象轉換爲字符串。
toString()  把 Date 對象轉換爲字符串。
toTimeString()  把 Date 對象的時間部分轉換爲字符串。
toUTCString()   根據世界時，把 Date 對象轉換爲字符串。
UTC()   根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數。
valueOf()   返回 Date 對象的原始值。

Math 對象

Math 對象用於執行數學任務。
Math 對象並不像 Date 和 String 那樣是對象的類，因此沒有構造函數 Math()。
語法

var x = Math.PI; // 返回PI
var y = Math.sqrt(16); // 返回16的平方根

Math 對象教程，請參照本站的JavaScript Math 對象教程。
Math 對象屬性

屬性  描述
E   返回算術常量 e，即自然對數的底數（約等於2.718）。
LN2 返回 2 的自然對數（約等於0.693）。
LN10    返回 10 的自然對數（約等於2.302）。
LOG2E   返回以 2 爲底的 e 的對數（約等於 1.414）。
LOG10E  返回以 10 爲底的 e 的對數（約等於0.434）。
PI  返回圓周率（約等於3.14159）。
SQRT1_2 返回返回 2 的平方根的倒數（約等於 0.707）。
SQRT2   返回 2 的平方根（約等於 1.414）。

Math 對象方法

方法  描述
abs(x)  返回 x 的絕對值。
acos(x) 返回 x 的反餘弦值。
asin(x) 返回 x 的反正弦值。
atan(x) 以介於 -PI/2 與 PI/2 弧度之間的數值來返回 x 的反正切值。
atan2(y,x)  返回從 x 軸到點 (x,y) 的角度（介於 -PI/2 與 PI/2 弧度之間）。
ceil(x) 對數進行上舍入。
cos(x)  返回數的餘弦。
exp(x)  返回 Ex 的指數。
floor(x)    對 x 進行下舍入。
log(x)  返回數的自然對數（底爲e）。
max(x,y,z,...,n)    返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n)    返回 x,y,z,...,n中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四捨五入爲最接近的整數。
sin(x)  返回數的正弦。
sqrt(x) 返回數的平方根。
tan(x)  返回角的正切。

Number 對象

Number 對象是原始數值的包裝對象。
Number 創建方式 new Number()。
語法
var num = new Number(value);
注意：如果一個參數值不能轉換爲一個數字將返回 NaN (非數字值)。
Number 對象屬性

屬性  描述
constructor 返回對創建此對象的 Number 函數的引用。
MAX_VALUE   可表示的最大的數。
MIN_VALUE   可表示的最小的數。
NEGATIVE_INFINITY   負無窮大，溢出時返回該值。
NaN 非數字值。
POSITIVE_INFINITY   正無窮大，溢出時返回該值。
prototype   允許您有能力向對象添加屬性和方法。
Number 對象方法
方法  描述
toExponential(x)    把對象的值轉換爲指數計數法。
toFixed(x)  把數字轉換爲字符串，結果的小數點後有指定位數的數字。
toPrecision(x)  把數字格式化爲指定的長度。
toString()  把數字轉換爲字符串，使用指定的基數。
valueOf()   返回一個 Number 對象的基本數字值。

String 對象

String 對象用於處理文本（字符串）。
String 對象創建方法： new String().
語法
var txt = new String(“string”);
或者更簡單方式：
var txt = “string”;
瞭解 String 對象教程，請查看 JavaScript String 對象教程。
String 對象屬性

屬性  描述
constructor 對創建該對象的函數的引用
length  字符串的長度
prototype   允許您向對象添加屬性和方法
String 對象方法
方法  描述
charAt()    返回在指定位置的字符。
charCodeAt()    返回在指定的位置的字符的 Unicode 編碼。
concat()    連接兩個或更多字符串，並返回新的字符串。
fromCharCode()  將 Unicode 編碼轉爲字符。
indexOf()   返回某個指定的字符串值在字符串中首次出現的位置。
lastIndexOf()   從後向前搜索字符串。
match() 查找找到一個或多個正則表達式的匹配。
replace()   在字符串中查找匹配的子串， 並替換與正則表達式匹配的子串。
search()    查找與正則表達式相匹配的值。
slice() 提取字符串的片斷，並在新的字符串中返回被提取的部分。
split() 把字符串分割爲字符串數組。
substr()    從起始索引號提取字符串中指定數目的字符。
substring() 提取字符串中兩個指定的索引號之間的字符。
toLowerCase()   把字符串轉換爲小寫。
toUpperCase()   把字符串轉換爲大寫。
trim()  去除字符串兩邊的空白
valueOf()   返回某個字符串對象的原始值。
String HTML 包裝方法
HTML 包裝方法返回加入了適當HTML標籤的字符串。
方法  描述
anchor()    創建 HTML 錨。
big()   用大號字體顯示字符串。
blink() 顯示閃動字符串。
bold()  使用粗體顯示字符串。
fixed() 以打字機文本顯示字符串。
fontcolor() 使用指定的顏色來顯示字符串。
fontsize()  使用指定的尺寸來顯示字符串。
italics()   使用斜體顯示字符串。
link()  將字符串顯示爲鏈接。
small() 使用小字號來顯示字符串。
strike()    使用小字號來顯示字符串。
sub()   把字符串顯示爲下標。
sup()   把字符串顯示爲上標。

RegExp 對象

正則表達式是描述字符模式的對象。
正則表達式用於對字符串模式匹配及檢索替換，是對字符串執行模式匹配的強大工具。
語法
var patt=new RegExp(pattern,modifiers);

或者更簡單的方式:

var patt=/pattern/modifiers;
pattern（模式）描述了表達式的模式
modifiers(修飾符) 用於指定全局匹配、區分大小寫的匹配和多行匹配
注意：當使用構造函數創造正則對象時，需要常規的字符轉義規則（在前面加反斜槓 \）。比如，以下是等價的：
var re = new RegExp(“\w+”);
var re = /\w+/;
更多關於 RegExp 對象請閱讀我們的 JavaScript RegExp 對象教程。
修飾符
修飾符用於執行區分大小寫和全局匹配:

修飾符 描述
i   執行對大小寫不敏感的匹配。
g   執行全局匹配（查找所有匹配而非在找到第一個匹配後停止）。
m   執行多行匹配。

方括號
方括號用於查找某個範圍內的字符：

表達式 描述
[abc]   查找方括號之間的任何字符。
[^abc]  查找任何不在方括號之間的字符。
[0-9]   查找任何從 0 至 9 的數字。
[a-z]   查找任何從小寫 a 到小寫 z 的字符。
[A-Z]   查找任何從大寫 A 到大寫 Z 的字符。
[A-z]   查找任何從大寫 A 到小寫 z 的字符。
[adgk]  查找給定集合內的任何字符。
[^adgk] 查找給定集合外的任何字符。
(red|blue|green)    查找任何指定的選項。

元字符
元字符（Metacharacter）是擁有特殊含義的字符：

元字符 描述
.   查找單個字符，除了換行和行結束符。
\w  查找單詞字符。
\W  查找非單詞字符。
\d  查找數字。
\D  查找非數字字符。
\s  查找空白字符。
\S  查找非空白字符。
\b  匹配單詞邊界。
\B  匹配非單詞邊界。
\0  查找 NUL 字符。
\n  查找換行符。
\f  查找換頁符。
\r  查找回車符。
\t  查找製表符。
\v  查找垂直製表符。
\xxx    查找以八進制數 xxx 規定的字符。
\xdd    查找以十六進制數 dd 規定的字符。
\uxxxx  查找以十六進制數 xxxx 規定的 Unicode 字符。

量詞

量詞  描述
n+  匹配任何包含至少一個 n 的字符串。
n*  匹配任何包含零個或多個 n 的字符串。
n?  匹配任何包含零個或一個 n 的字符串。
n{X}    匹配包含 X 個 n 的序列的字符串。
n{X,Y}  匹配包含 X 或 Y 個 n 的序列的字符串。
n{X,}   匹配包含至少 X 個 n 的序列的字符串。
n$ 匹配任何結尾爲 n 的字符串。
^n  匹配任何開頭爲 n 的字符串。
?=n 匹配任何其後緊接指定字符串 n 的字符串。
?!n 匹配任何其後沒有緊接指定字符串 n 的字符串。

RegExp 對象方法

方法  描述  FF  IE
compile 編譯正則表達式。    1   4
exec    檢索字符串中指定的值。返回找到的值，並確定其位置。   1   4
test    檢索字符串中指定的值。返回 true 或 false。 1   4
支持正則表達式的 String 對象的方法
方法  描述  FF  IE
search  檢索與正則表達式相匹配的值。  1   4
match   找到一個或多個正則表達式的匹配。    1   4
replace 替換與正則表達式匹配的子串。  1   4
split   把字符串分割爲字符串數組。   1   4

全局屬性和函數

JavaScript 全局屬性和方法可用於創建Javascript對象。
JavaScript 全局屬性

屬性  描述
Infinity    代表正的無窮大的數值。
NaN 指示某個值是不是數字值。
undefined   指示未定義的值。
JavaScript 全局函數

函數  描述
decodeURI() 解碼某個編碼的 URI。
decodeURIComponent()    解碼一個編碼的 URI 組件。
encodeURI() 把字符串編碼爲 URI。
encodeURIComponent()    把字符串編碼爲 URI 組件。
escape()    對字符串進行編碼。
eval()  計算 JavaScript 字符串，並把它作爲腳本代碼來執行。
isFinite()  檢查某個值是否爲有窮大的數。
isNaN() 檢查某個值是否是數字。
Number()    把對象的值轉換爲數字。
parseFloat()    解析一個字符串並返回一個浮點數。
parseInt()  解析一個字符串並返回一個整數。
String()    把對象的值轉換爲字符串。
unescape()  對由 escape() 編碼的字符串進行解碼。

Browser Objects 參考手冊
參考手冊描述了每個對象的屬性和方法，並提供了在線實例。

Window 對象
Window 對象表示瀏覽器中打開的窗口。
如果文檔包含框架（frame 或 iframe 標籤），瀏覽器會爲 HTML 文檔創建一個 window 對象，併爲每個框架創建一個額外的 window 對象。
Note注意：沒有應用於 window 對象的公開標準，不過所有瀏覽器都支持該對象。
Window 對象屬性

屬性  描述
closed  返回窗口是否已被關閉。
defaultStatus   設置或返回窗口狀態欄中的默認文本。
document    對 Document 對象的只讀引用。(請參閱對象)
frames  返回窗口中所有命名的框架。該集合是 Window 對象的數組，每個 Window 對象在窗口中含有一個框架。
history 對 History 對象的只讀引用。請參數 History 對象。
innerHeight 返回窗口的文檔顯示區的高度。
innerWidth  返回窗口的文檔顯示區的寬度。
length  設置或返回窗口中的框架數量。
location    用於窗口或框架的 Location 對象。請參閱 Location 對象。
name    設置或返回窗口的名稱。
navigator   對 Navigator 對象的只讀引用。請參數 Navigator 對象。
opener  返回對創建此窗口的窗口的引用。
outerHeight 返回窗口的外部高度，包含工具條與滾動條。
outerWidth  返回窗口的外部寬度，包含工具條與滾動條。
pageXOffset 設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。
pageYOffset 設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。
parent  返回父窗口。
screen  對 Screen 對象的只讀引用。請參數 Screen 對象。
screenLeft  返回相對於屏幕窗口的x座標
screenTop   返回相對於屏幕窗口的y座標
screenX 返回相對於屏幕窗口的x座標
screenY 返回相對於屏幕窗口的y座標
self    返回對當前窗口的引用。等價於 Window 屬性。
status  設置窗口狀態欄的文本。
top 返回最頂層的父窗口。

Window 對象方法

方法  描述
alert() 顯示帶有一段消息和一個確認按鈕的警告框。
blur()  把鍵盤焦點從頂層窗口移開。
clearInterval() 取消由 setInterval() 設置的 timeout。
clearTimeout()  取消由 setTimeout() 方法設置的 timeout。
close() 關閉瀏覽器窗口。
confirm()   顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
createPopup()   創建一個 pop-up 窗口。
focus() 把鍵盤焦點給予一個窗口。
moveBy()    可相對窗口的當前座標把它移動指定的像素。
moveTo()    把窗口的左上角移動到一個指定的座標。
open()  打開一個新的瀏覽器窗口或查找一個已命名的窗口。
print() 打印當前窗口的內容。
prompt()    顯示可提示用戶輸入的對話框。
resizeBy()  按照指定的像素調整窗口的大小。
resizeTo()  把窗口的大小調整到指定的寬度和高度。
scroll()     
scrollBy()  按照指定的像素值來滾動內容。
scrollTo()  把內容滾動到指定的座標。
setInterval()   按照指定的週期（以毫秒計）來調用函數或計算表達式。
setTimeout()    在指定的毫秒數後調用函數或計算表達式。

Navigator 對象

Navigator 對象
Navigator 對象包含有關瀏覽器的信息。
Note注意：沒有應用於 navigator 對象的公開標準，不過所有瀏覽器都支持該對象。
Navigator 對象屬性

屬性  說明
appCodeName 返回瀏覽器的代碼名
appName 返回瀏覽器的名稱
appVersion  返回瀏覽器的平臺和版本信息
cookieEnabled   返回指明瀏覽器中是否啓用 cookie 的布爾值
platform    返回運行瀏覽器的操作系統平臺
userAgent   返回由客戶機發送服務器的user-agent 頭部的值

Navigator 對象方法

方法  描述
javaEnabled()   指定是否在瀏覽器中啓用Java
taintEnabled()  規定瀏覽器是否啓用數據污點(data tainting)

Screen 對象

Screen 對象
Screen 對象包含有關客戶端顯示屏幕的信息。
Note注意：沒有應用於 screen 對象的公開標準，不過所有瀏覽器都支持該對象。
Screen 對象屬性

屬性  說明
availHeight 返回屏幕的高度（不包括Windows任務欄）
availWidth  返回屏幕的寬度（不包括Windows任務欄）
colorDepth  返回目標設備或緩衝器上的調色板的比特深度
height  返回屏幕的總高度
pixelDepth  返回屏幕的顏色分辨率（每象素的位數）
width   返回屏幕的總寬度

History 對象

History 對象
History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
History 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問。
Note注意：沒有應用於History對象的公開標準，不過所有瀏覽器都支持該對象。
History 對象屬性

屬性  說明
length  返回歷史列表中的網址數

History 對象方法

方法  說明
back()  加載 history 列表中的前一個 URL
forward()   加載 history 列表中的下一個 URL
go()    加載 history 列表中的某個具體頁面

Location 對象

Location 對象
Location 對象包含有關當前 URL 的信息。
Location 對象是 window 對象的一部分，可通過 window.Location 屬性對其進行訪問。
Note注意：沒有應用於Location對象的公開標準，不過所有瀏覽器都支持該對象。
Location 對象屬性

屬性  描述
hash    返回一個URL的錨部分
host    返回一個URL的主機名和端口
hostname    返回URL的主機名
href    返回完整的URL
pathname    返回的URL路徑名。
port    返回一個URL服務器使用的端口號
protocol    返回一個URL協議
search  返回一個URL的查詢部分

Location 對象方法

方法  說明
assign()    載入一個新的文檔
reload()    重新載入當前文檔
replace()   用新的文檔替換當前文檔

HTML DOM 參考手冊
參考手冊描述了 HTML DOM 的屬性和方法，並提供在線實例。
HTML Document

HTML DOM 節點
在 HTML DOM (Document Object Model) 中 , 每一個元素都是節點:
文檔是一個文檔。
所有的HTML元素都是元素節點。
所有 HTML 屬性都是屬性節點。
文本插入到 HTML 元素是文本節點。are text nodes。
註釋是註釋節點。
Document 對象
當瀏覽器載入 HTML 文檔, 它就會成爲 document 對象。
document 對象是HTML文檔的根節點與所有其他節點（元素節點，文本節點，屬性節點, 註釋節點）。
Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。
提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。
瀏覽器支持
Internet ExplorerFirefoxOperaGoogle ChromeSafari
所有主要瀏覽器都支持 Document 對象。
Document 對象屬性和方法
HTML文檔中可以使用以上屬性和方法:
屬性 / 方法描述
document.activeElement 返回當前獲取焦點元素
document.addEventListener() 向文檔添加句柄
document.adoptNode(node) 從另外一個文檔返回 adapded 節點到當前文檔。
document.anchors 返回對文檔中所有 Anchor 對象的引用。
document.applets 返回對文檔中所有 Applet 對象的引用。
document.baseURI 返回文檔的絕對基礎 URI
document.body 返回文檔的body元素
document.close() 關閉用 document.open() 方法打開的輸出流，並顯示選定的數據。
document.cookie 設置或返回與當前文檔有關的所有 cookie。
document.createAttribute() 創建一個屬性節點
document.createComment() createComment() 方法可創建註釋節點。
document.createDocumentFragment() 創建空的 DocumentFragment 對象，並返回此對象。
document.createElement() 創建元素節點。
document.createTextNode() 創建文本節點。
document.doctype 返回與文檔相關的文檔類型聲明 (DTD)。
document.documentElement 返回文檔的根節點
document.documentMode 返回用於通過瀏覽器渲染文檔的模式
document.documentURI 設置或返回文檔的位置
document.domain 返回當前文檔的域名。
document.domConfig 返回normalizeDocument()被調用時所使用的配置
document.embeds 返回文檔中所有嵌入的內容（embed）集合
document.forms 返回對文檔中所有 Form 對象引用。
document. getElementsByClassName() 返回文檔中所有指定類名的元素集合，作爲 NodeList 對象。
document.getElementById() 返回對擁有指定 id 的第一個對象的引用。
document.getElementsByName() 返回帶有指定名稱的對象集合。
document.getElementsByTagName() 返回帶有指定標籤名的對象集合。
document.images 返回對文檔中所有 Image 對象引用。
document.implementation 返回處理該文檔的 DOMImplementation 對象。
document.importNode() 把一個節點從另一個文檔複製到該文檔以便應用。
document.inputEncoding 返回用於文檔的編碼方式（在解析時）。
document.lastModified 返回文檔被最後修改的日期和時間。
document.links 返回對文檔中所有 Area 和 Link 對象引用。
document.normalize() 刪除空文本節點，並連接相鄰節點
document.normalizeDocument() 刪除空文本節點，並連接相鄰節點的
document.open() 打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出。
document.querySelector() 返回文檔中匹配指定的CSS選擇器的第一元素
document.querySelectorAll() document.querySelectorAll() 是 HTML5中引入的新方法，返回文檔中匹配的CSS選擇器的所有元素節點列表
document.readyState 返回文檔狀態 (載入中……)
document.referrer 返回載入當前文檔的文檔的 URL。
document.removeEventListener() 移除文檔中的事件句柄(由 addEventListener() 方法添加)
document.renameNode() 重命名元素或者屬性節點。
document.scripts 返回頁面中所有腳本的集合。
document.strictErrorChecking 設置或返回是否強制進行錯誤檢查。
document.title 返回當前文檔的標題。
document.URL 返回文檔完整的URL
document.write() 向文檔寫 HTML 表達式或 JavaScript 代碼。
document.writeln() 等同於 write() 方法，不同的是在每個表達式之後寫一個換行符。

警告 !!!
在 W3C DOM核心，文檔對象繼承節點對象的所有屬性和方法。
很多屬性和方法在文檔中是沒有意義的。
HTML 文檔對象可以避免使用這些節點對象和屬性：
屬性 / 方法避免的原因
document.attributes 文檔沒有該屬性
document.hasAttributes() 文檔沒有該屬性
document.nextSibling 文檔沒有下一節點
document.nodeName 這個通常是 #document
document.nodeType 這個通常是 9(DOCUMENT_NODE)
document.nodeValue 文檔沒有一個節點值
document.ownerDocument 文檔沒有主文檔
document.ownerElement 文檔沒有自己的節點
document.parentNode 文檔沒有父節點
document.previousSibling 文檔沒有兄弟節點
document.textContent 文檔沒有文本節點

HTML Element

HTML DOM 節點
在 HTML DOM (Document Object Model) 中, 每個東西都是節點 :
文檔本身就是一個文檔對象
所有 HTML 元素都是元素節點
所有 HTML 屬性都是屬性節點
插入到 HTML 元素文本是文本節點
註釋是註釋節點
元素對象
在 HTML DOM 中, 元素對象代表着一個 HTML 元素。
元素對象的子節點可以是, 可以是元素節點，文本節點，註釋節點。
NodeList 對象代表了節點列表，類似於 HTML元素的子節點集合。
元素可以有屬性。屬性屬於屬性節點（查看下一章節）。
瀏覽器支持
Internet ExplorerFirefoxOperaGoogle ChromeSafari
所有主流瀏覽器都支持元素對象和 NodeList 對象。.
屬性和方法
以上屬性和方法可適用於所有 HTML 元素：

屬性 / 方法 描述
element.accessKey   設置或返回accesskey一個元素
element.addEventListener()  向指定元素添加事件句柄
element.appendChild()   爲元素添加一個新的子元素
element.attributes  返回一個元素的屬性數組
element.childNodes  返回元素的一個子節點的數組
element.classlist   返回元素的類名，作爲 DOMTokenList 對象。
element.className   設置或返回元素的class屬性
element.clientHeight    在頁面上返回內容的可視高度（不包括邊框，邊距或滾動條）
element.clientWidth 在頁面上返回內容的可視寬度（不包括邊框，邊距或滾動條）
element.cloneNode() 克隆某個元素
element.compareDocumentPosition()   比較兩個元素的文檔位置。
element.contentEditable 設置或返回元素的內容是否可編輯
element.dir 設置或返回一個元素中的文本方向
element.firstChild  返回元素的第一個子節點
element.focus() 設置文檔或元素獲取焦點
element.getAttribute()  返回指定元素的屬性值
element.getAttributeNode()  返回指定屬性節點
element.getElementsByTagName()  返回指定標籤名的所有子元素集合。
element. getElementsByClassName()   返回文檔中所有指定類名的元素集合，作爲 NodeList 對象。
element.getFeature()    返回指定特徵的執行APIs對象。
element.getUserData()   返回一個元素中關聯鍵值的對象。
element.hasAttribute()  如果元素中存在指定的屬性返回 true，否則返回false。
element.hasAttributes() 如果元素有任何屬性返回ture，否則返回false。
element.hasChildNodes() 返回一個元素是否具有任何子元素
element.hasfocus()  返回布爾值，檢測文檔或元素是否獲取焦點
element.id  設置或者返回元素的 id。
element.innerHTML   設置或者返回元素的內容。
element.insertBefore()  現有的子元素之前插入一個新的子元素
element.isContentEditable   如果元素內容可編輯返回 true，否則返回false
element.isDefaultNamespace()    如果指定了namespaceURI 返回 true，否則返回 false。
element.isEqualNode()   檢查兩個元素是否相等
element.isSameNode()    檢查兩個元素所有有相同節點。
element.isSupported()   如果在元素中支持指定特徵返回 true。
element.lang    設置或者返回一個元素的語言。
element.lastChild   返回的最後一個子元素
element.namespaceURI    返回命名空間的 URI。
element.nextSibling 返回該元素緊跟的一個元素
element.nodeName    返回元素的標記名（大寫）
element.nodeType    Returns the node type of an element
element.nodeValue   返回元素的類型
element.normalize() 使得此成爲一個"normal"的形式，其中只有結構（如元素，註釋，處理指令，CDATA節和實體引用）隔開Text節點，即元素（包括屬性）下面的所有文本節點，既沒有相鄰的文本節點也沒有空的文本節點
element.offsetHeight    返回，任何一個元素的高度包括邊框和填充，但不是邊距
element.offsetWidth 返回元素的寬度，包括邊框和填充，但不是邊距
element.offsetLeft  返回當前元素的相對水平偏移位置的偏移容器
element.offsetParent    返回元素的偏移容器
element.offsetTop   返回當前元素的相對垂直偏移位置的偏移容器
element.ownerDocument   返回元素的根元素（文檔對象）
element.parentNode  返回元素的父節點
element.previousSibling 返回某個元素緊接之前元素
element.querySelector() 返回匹配指定 CSS 選擇器元素的第一個子元素
document.querySelectorAll() 返回匹配指定 CSS 選擇器元素的所有子元素節點列表
element.removeAttribute()   從元素中刪除指定的屬性
element.removeAttributeNode()   刪除指定屬性節點並返回移除後的節點。
element.removeChild()   刪除一個子元素
element.removeEventListener()   移除由 addEventListener() 方法添加的事件句柄
element.replaceChild()  替換一個子元素
element.scrollHeight    返回整個元素的高度（包括帶滾動條的隱蔽的地方）
element.scrollLeft  返回當前視圖中的實際元素的左邊緣和左邊緣之間的距離
element.scrollTop   返回當前視圖中的實際元素的頂部邊緣和頂部邊緣之間的距離
element.scrollWidth 返回元素的整個寬度（包括帶滾動條的隱蔽的地方）
element.setAttribute()  設置或者改變指定屬性並指定值。
element.setAttributeNode()  設置或者改變指定屬性節點。
element.setIdAttribute()    
element.setIdAttributeNode()    
element.setUserData()   在元素中爲指定鍵值關聯對象。
element.style   設置或返回元素的樣式屬性
element.tabIndex    設置或返回元素的標籤順序。
element.tagName 作爲一個字符串返回某個元素的標記名（大寫）
element.textContent 設置或返回一個節點和它的文本內容
element.title   設置或返回元素的title屬性
element.toString()  一個元素轉換成字符串

nodelist.item() 返回某個元素基於文檔樹的索引
nodelist.length 返回節點列表的節點數目。

HTML Attributes

Attr 對象
在 HTML DOM 中, Attr 對象代表一個 HTML 屬性。
HTML屬性總是屬於HTML元素。
NamedNodeMap 對象
在 HTML DOM 中, the NamedNodeMap 對象表示一個無順序的節點列表。
我們可通過節點名稱來訪問 NamedNodeMap 中的節點。
瀏覽器支持
Internet ExplorerFirefoxOperaGoogle ChromeSafari
所有主流瀏覽器都支持 Attr 對象和 NamedNodeMap 對象。

屬性 / 方法 描述
attr.isId   Returns true if the attribute is of type Id, otherwise it returns false
attr.name   返回屬性名稱
attr.value  設置或者返回屬性值
attr.specified  如果屬性被指定返回 true ，否則返回 false

nodemap.getNamedItem()  從節點列表中返回的指定屬性節點。Returns a specified attribute node from a NamedNodeMap.
nodemap.item()  返回節點列表中處於指定索引號的節點。
nodemap.length  返回節點列表的節點數目。
nodemap.removeNamedItem()   刪除指定屬性節點
nodemap.setNamedItem()  設置指定屬性節點(通過名稱)

DOM 4 警告 !!!
在 W3C DOM 內核中, Attr (屬性) 對象繼承節點對象的所有屬性和方法。
在 DOM 4 中, Attr (屬性) 對象不再從節點對象中繼承。
從長遠的代碼質量來考慮，在屬性對象中你需要避免使用節點對象屬性和方法:

屬性 / 方法 避免原因
attr.appendChild()  屬性沒有子節點
attr.attributes 屬性沒有屬性
attr.baseURI    使用 document.baseURI 替代
attr.childNodes 屬性沒有子節點
attr.cloneNode()    使用 attr.value 替代
attr.firstChild 屬性沒有子節點
attr.hasAttributes()    屬性沒有屬性Attributes don't have attributes
attr.hasChildNodes  屬性沒有子節點Attributes don't have child nodes
attr.insertBefore() 屬性沒有子節點
attr.isEqualNode()  沒有意義
attr.isSameNode()   沒有意義
attr.isSupported()  通常爲 true
attr.lastChild  屬性沒有子節點
attr.nextSibling    屬性沒有兄弟節點
attr.nodeName   使用 attr.name 替代
attr.nodeType   通常爲 2 (ATTRIBUTE-NODE)
attr.nodeValue  使用 attr.value 替代
attr.normalize()    屬性沒有規範
attr.ownerDocument  通常爲你的 HTML 文檔
attr.ownerElement   你用來訪問屬性的 HTML 元素
attr.parentNode 你用來訪問屬性的 HTML 元素
attr.previousSibling    屬性沒有兄弟節點
attr.removeChild    屬性沒有子節點
attr.replaceChild   屬性沒有子節點
attr.textContent    使用 attr.value 替代

HTML Events**重點內容**

HTML DOM 事件
DOM：指明使用的 DOM 屬性級別。
鼠標事件

屬性  描述  DOM
onclick 當用戶點擊某個對象時調用的事件句柄。  2
oncontextmenu   在用戶點擊鼠標右鍵打開上下文菜單時觸發  
ondblclick  當用戶雙擊某個對象時調用的事件句柄。  2
onmousedown 鼠標按鈕被按下。    2
onmouseenter    當鼠標指針移動到元素上時觸發。 2
onmouseleave    當鼠標指針移出元素時觸發    2
onmousemove 鼠標被移動。  2
onmouseover 鼠標移到某元素之上。  2
onmouseout  鼠標從某元素移開。   2
onmouseup   鼠標按鍵被鬆開。    2

鍵盤事件

屬性  描述  DOM
onkeydown   某個鍵盤按鍵被按下。  2
onkeypress  某個鍵盤按鍵被按下並鬆開。   2
onkeyup 某個鍵盤按鍵被鬆開。  2

框架/對象（Frame/Object）事件

屬性  描述  DOM
onabort 圖像的加載被中斷。 ( <object>)   2
onbeforeunload  該事件在即將離開頁面（刷新或關閉）時觸發    2
onerror 在加載文檔或圖像時發生錯誤。 ( <object>, <body>和 <frameset>)   
onhashchange    該事件在當前 URL 的錨部分發生修改時觸發。  
onload  一張頁面或一幅圖像完成加載。  2
onpageshow  該事件在用戶訪問頁面時觸發   
onpagehide  該事件在用戶離開當前網頁跳轉到另外一個頁面時觸發    
onresize    窗口或框架被重新調整大小。   2
onscroll    當文檔被滾動時發生的事件。   2
onunload    用戶退出頁面。 ( <body> 和 <frameset>)  2

表單事件
屬性描述 DOM

onblur  元素失去焦點時觸發   2
onchange    該事件在表單元素的內容改變時觸發( <input>, <keygen>, <select>, 和 <textarea>)    2
onfocus 元素獲取焦點時觸發   2
onfocusin   元素即將獲取焦點是觸發 2
onfocusout  元素即將失去焦點是觸發 2
oninput 元素獲取用戶輸入是觸發 3
onreset 表單重置時觸發 2
onsearch    用戶向搜索域輸入文本時觸發 ( <input="search">)    
onselect    用戶選取文本時觸發 ( <input> 和 <textarea>)   2
onsubmit    表單提交時觸發 2

剪貼板事件

屬性  描述  DOM
oncopy  該事件在用戶拷貝元素內容時觸發  
oncut   該事件在用戶剪切元素內容時觸發  
onpaste 該事件在用戶粘貼元素內容時觸發

打印事件

屬性  描述  DOM
onafterprint    該事件在頁面已經開始打印，或者打印窗口已經關閉時觸發   
onbeforeprint   該事件在頁面即將開始打印時觸發

拖動事件

事件  描述  DOM
ondrag  該事件在元素正在拖動時觸發    
ondragend   該事件在用戶完成元素的拖動時觸發     
ondragenter 該事件在拖動的元素進入放置目標時觸發   
ondragleave 該事件在拖動元素離開放置目標時觸發    
ondragover  該事件在拖動元素在放置目標上時觸發    
ondragstart 該事件在用戶開始拖動元素時觸發  
ondrop  該事件在拖動元素放置在目標區域時觸發

多媒體（Media）事件

事件  描述  DOM
onabort 事件在視頻/音頻（audio/video）終止加載時觸發。    
oncanplay   事件在用戶可以開始播放視頻/音頻（audio/video）時觸發。    
oncanplaythrough    事件在視頻/音頻（audio/video）可以正常播放且無需停頓和緩衝時觸發。  
ondurationchange    事件在視頻/音頻（audio/video）的時長髮生變化時觸發。     
onemptied   The event occurs when the current playlist is empty  
onended 事件在視頻/音頻（audio/video）播放結束時觸發。    
onerror 事件在視頻/音頻（audio/video）數據加載期間發生錯誤時觸發。  
onloadeddata    事件在瀏覽器加載視頻/音頻（audio/video）當前幀時觸發觸發。  
onloadedmetadata    事件在指定視頻/音頻（audio/video）的元數據加載後觸發。    
onloadstart 事件在瀏覽器開始尋找指定視頻/音頻（audio/video）觸發。    
onpause 事件在視頻/音頻（audio/video）暫停時觸發。  
onplay  事件在視頻/音頻（audio/video）開始播放時觸發。    
onplaying   事件在視頻/音頻（audio/video）暫停或者在緩衝後準備重新開始播放時觸發。    
onprogress  事件在瀏覽器下載指定的視頻/音頻（audio/video）時觸發。    
onratechange    事件在視頻/音頻（audio/video）的播放速度發送改變時觸發。   
onseeked    事件在用戶重新定位視頻/音頻（audio/video）的播放位置後觸發。     
onseeking   事件在用戶開始重新定位視頻/音頻（audio/video）時觸發。    
onstalled   事件在瀏覽器獲取媒體數據，但媒體數據不可用時觸發。    
onsuspend   事件在瀏覽器讀取媒體數據中止時觸發。   
ontimeupdate    事件在當前的播放位置發送改變時觸發。   
onvolumechange  事件在音量發生改變時觸發。    
onwaiting   事件在視頻由於要播放下一幀而需要緩衝時觸發。

動畫事件

事件  描述  DOM
animationend    該事件在 CSS 動畫結束播放時觸發   
animationiteration  該事件在 CSS 動畫重複播放時觸發   
animationstart  該事件在 CSS 動畫開始播放時觸發

過渡事件

事件  描述  DOM
transitionend   該事件在 CSS 完成過渡後觸發。

其他事件

事件  描述  DOM
onmessage   該事件通過或者從對象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時觸發   
onmousewheel    已廢棄。 使用 onwheel 事件替代     
ononline    該事件在瀏覽器開始在線工作時觸發。    
onoffline   該事件在瀏覽器開始離線工作時觸發。    
onpopstate  該事件在窗口的瀏覽歷史（history 對象）發生改變時觸發。 event occurs when the window's history changes   
onshow  該事件當 <menu> 元素在上下文菜單顯示時觸發    
onstorage   該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發     
ontoggle    該事件在用戶打開或關閉 <details> 元素時觸發  
onwheel 該事件在鼠標滾輪在元素上下滾動時觸發

事件對象
常量

靜態變量    描述  DOM
CAPTURING-PHASE 當前事件階段爲捕獲階段(3)  1
AT-TARGET   當前事件是目標階段,在評估目標事件(1)    2
BUBBLING-PHASE  當前的事件爲冒泡階段 (2)  3

屬性

屬性  描述  DOM
bubbles 返回布爾值，指示事件是否是起泡事件類型。    2
cancelable  返回布爾值，指示事件是否可擁可取消的默認動作。 2
currentTarget   返回其事件監聽器觸發該事件的元素。   2
eventPhase  返回事件傳播的當前階段。    2
target  返回觸發此事件的元素（事件的目標節點）。    2
timeStamp   返回事件生成的日期和時間。   2
type    返回當前 Event 對象表示的事件的名稱。  2

方法

方法  描述  DOM
initEvent() 初始化新創建的 Event 對象的屬性。    2
preventDefault()    通知瀏覽器不要執行與事件關聯的默認動作。    2
stopPropagation()   不再派發事件。 2

目標事件對象
方法

方法  描述  DOM
addEventListener()  允許在目標事件中註冊監聽事件(IE8 = attachEvent()) 2
dispatchEvent() 允許發送事件到監聽器上 (IE8 = fireEvent()) 2
removeEventListener()   運行一次註冊在事件目標上的監聽事件(IE8 = detachEvent())  2

事件監聽對象
方法

方法  描述  DOM
handleEvent()   把任意對象註冊爲事件處理程序  2

文檔事件對象
方法

方法  描述  DOM
createEvent()       2

鼠標/鍵盤事件對象
屬性

屬性  描述  DOM
altKey  返回當事件被觸發時，"ALT" 是否被按下。  2
button  返回當事件被觸發時，哪個鼠標按鈕被點擊。    2
clientX 返回當事件被觸發時，鼠標指針的水平座標。    2
clientY 返回當事件被觸發時，鼠標指針的垂直座標。    2
ctrlKey 返回當事件被觸發時，"CTRL" 鍵是否被按下。    2
Location    返回按鍵在設備上的位置 3
charCode    返回onkeypress事件觸發鍵值的字母代碼。    2
key 在按下按鍵時返回按鍵的標識符。 3
keyCode 返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。   2
which   返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。   2
metaKey 返回當事件被觸發時，"meta" 鍵是否被按下。    2
relatedTarget   返回與事件的目標節點相關的節點。    2
screenX 返回當某個事件被觸發時，鼠標指針的水平座標。  2
screenY 返回當某個事件被觸發時，鼠標指針的垂直座標。  2
shiftKey    返回當事件被觸發時，"SHIFT" 鍵是否被按下。   2

方法

方法  描述  W3C
initMouseEvent()    初始化鼠標事件對象的值 2
initKeyboardEvent() 初始化鍵盤事件對象的值 3

HTML DOM Element Objects 參考手冊
參考手冊描述了每個對象的屬性和方法，並提供了在線實例。
Anchor 對象
Area 對象
Base 對象
Body 對象
Button 對象
Form 對象
Frame/IFrame 對象
Frameset 對象
Image 對象
Input Button 對象
Input Checkbox 對象
Input File 對象
Input Hidden 對象
Input Password 對象
Input Radio 對象
Input Reset 對象
Input Submit 對象
Input Text 對象
Link 對象
Meta 對象
Object 對象
Option 對象
Select 對象
Style 對象
Table 對象
td / th 對象
tr 對象
Textarea 對象

以上內容均分享自這裏，次網站內容很詳細，這裏我把重點的一些內容整合在一個頁面，方便自己或者大家查閱

初識JavaScript及DOM

如何使用 JS 判斷用戶是否處於活躍狀態

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

TCP連接通信過程及網絡管理

H5新春賀卡之筆記

數據庫管理視圖:查看視圖定義

初識Linux-系統安裝，系統信息查看，馬哥初印象

文本編輯器專輯之—Vim

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結