;[表現為不同瀏覽器定義有差異,實作方式不同]3. window 是物件；
DOM（文件物件模型）是HTML 和XML 的應用程式介面（API）。 BOM 主要處理瀏覽器視窗和框架，不過通常瀏覽器特定的 JavaScript 擴充功能都被看做 BOM
的一部分。這些擴充功能包括：彈出新的瀏覽器視窗移動、關閉瀏覽器視窗以及調整視窗大小提供Web 屏幕
瀏覽器詳細資料的定位物件提供使用者螢幕解析度詳細資料的使用者螢幕螢幕物件對cookie 的支援

IE 扩展了 BOM，加入了ActiveXObject类，可以通过JavaScript实例化ActiveX对象

javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。其中
DOM包含：window

Window对象包含属性：document、location、navigator、screen、history、frames

Document根节点包含子节点：forms、location、anchors、images、links

从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。

区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口

1.1 DOM, DOCUMENT, BOM, WINDOW 区别

DOM 全称是 Document Object Model，也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础,就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如

這些標籤都看做一個對象，每個對像都叫做一個節點（node），節點可以理解為 DOM 中所有 Object 的父類。

DOM 有什麼用？就是為了操作HTML 中的元素，比如說我們要透過JS 把這個網頁的標題改了，直接這樣就可以了：

document.title = 'how to make love';

這個API 使得在網頁上被下載到瀏覽器之後改變網頁的內容成為可能。

document

當瀏覽器下載到一個網頁，通常是HTML，這個HTML 就叫document（當然，這也是DOM 樹中的一個node），從上圖可以看到，document 通常是整個DOM 樹的根節點。這個 document 包含了標題（document.title）、URL（document.URL）等屬性，可以直接在 JS 中存取。

在一個瀏覽器視窗中可能有多個 document，例如，透過 iframe 載入的頁面，每一個都是一個 document。

在JS 中，可以透過document 存取其子節點（其實任何節點都可以），如

document.body;document.getElementById('xxx');

BOMBOM

是

，比較Javascript中BOM與DOM區別與聯繫瀏覽器物件模型。

剛才說過 DOM 是為了操作文檔出現的接口，那 BOM 顧名思義其實就是為了控制瀏覽器的行為而出現的接口。

瀏覽器可以做什麼呢？例如跳到另一個頁面、前進、後退等等，程式還可能需要取得螢幕的大小之類的參數。

所以 BOM 就是為了解決這些事情出現的介面。例如我們要讓瀏覽器跳到另一個頁面，只要

location.href = "http://www.xxxx.com";

這個 location 就是 BOM 裡的一個物件。

window

window 也是 BOM 的一個對象，除去程式設計意義上的「兜底對象」之外，透過這個對象可以取得視窗位置、決定視窗大小、彈出對話框等等。例如我要關閉目前視窗：

window.close();

總結題主的問題：

DOM 是為了操作文檔出現的API，document 是其的一個物件；
DOM 是為了操作文件出現的API，document 是其的一個物件；

BOM 是為了操作瀏覽器出現的API，window 是其的一個物件。

歸DOM管的：

web開發人員嘔心瀝血寫出來的一個資料夾，裡面有index.html，CSS和JS什麼鬼的，部署在伺服器上，我們可以透過瀏覽器的地址欄輸入車將這個document加載到本地，瀏覽，右鍵查看原始碼等。。狀態列，顯示http狀態碼等） D

區（捲軸

scroll bar），前者是對瀏覽器本身進行操作，而後者是對瀏覽器（可看成容器）內的內容進行操作BOM

和

DOM

的結構關係示意圖

2.文件物件模型(DOM)

DOM節點樹模型（以HTML DOM樹為例）

HTML

文檔）看成一個樹狀結構，在DOM中，HTML

文檔的樹狀結構被表示為一個體形結構。

並以document物件表示該文件，樹的每個子節點表示HTML文件中的不同內容。每個載入瀏覽器的HTML 文件都會成為Document

物件

,Documentt物件,Document是探索的全域變數 document 可以存取Document物件 2.1認識DOM為DOM節點層級圖:

DOM透過創建樹來表示文檔，描述了處理網頁內容的方法和接口，從而使開發者對文檔的內容和結構具有空前的控制力，用DOM API可以輕鬆地刪除、添加和替換節點。

1）節點類型DOM

規定文件中的每個成分都是一個節點（

Node

）

,HTML

元素節點（

Element

）：上圖

、

>等。，即標籤。 2. 文字節點（Text）:向使用者展示的內容，如

...

向使用者展示的內容，如

...

Script DOM、CSS等文字。 3. 屬性節點（Attr）

元素屬性，元素才有屬性,如元素屬性，元素才有屬性,如＜ .baidu.com"。

1） DOM節點三大屬性（XML DOM）

1））1））

1）和#text的字串。 2）nodeType：元素節點、屬性節點、文字節點的nodeType值分別為1nodeType

、

3）nodeValue：元素節點、屬性節點、文字節點的回傳值分別為null

、屬性值、文字節點內容。

2.2 DOM常見操作

Node

為所有節點的父接口，其定義了一組公共的屬性和方法，如下：

節點

） ① 取得元素節點：透過document物件的三個方法取得

document.getElementById("ID")document.getElementByName("name")

document.getElementByName("name")

.A. ② 取得屬性節點：屬性節點附屬於元素節點，可透過元素節點的

getAttributeNode(attrName)方法取得屬性節點，也可透過getAttribute(attrName)直接取得屬性值。（與之相對的是Element介面的setAttribute(attrName , attrValue)方法，如果屬性不存在，則直接添加到元素節點上）

③ 取得文字節點：文字節點為元素節點的子節點，可透過元素節點（

Element介面）提供的childnodes()[index] 方法取得。

childNodes //NodeList，所有子節點的列表

firstChild //Node，指向在childNodes列表中的第一個節點

lastChild //Node，指向在childNodes列表中的最後一個節點

lastChild //Node，指向在childNodes？ /Node，指向父節點

previousSibling /Node，/指向前一個兄弟節點：如果這個節點是第一個節點，那麼該值為null

nextSibling //Node，指向後一個兄弟節點：如果這個節點就是最後一個節點，那麼值為null

hasChildNodes()` //Boolean，當childNodes包含一個或多個節點時，傳回真值

① 改變屬性節點的值：可以透過屬性節點的nodeValue直接修改屬性值，也可透過元素節點的setAttribute()

方法改變。 ② 改變文字節點的值：透過文字節點的nodeValue直接修改。

在

HTML DOM中，取得並改變元素內容最簡單方法是使用元素的innerHTML

屬性（innerText 拓展:innerText、innerHTML、outerHTML、outerText

innerText: 表示起始标签和结束标签之间的文本

innerHTML: 表示元素的所有元素和文本的HTML代码

如：

Hello world

的innerText為Hello world，innerHTML為Hello world

outerText: 與前者的區別是替換的是整個目標節點，問題返回和innerText一樣的內容

outerHTML: 與前者的區別是替換的是整個目標節點，回傳元素完整的HTML程式碼，包含元素本身

一張圖片了解OUTHTML和innerText、innerHTML：

改變HTML 改變 color =「red」;

）刪除節點

3 ，需取得

A的父節點B，父節點可透過17.1.1中的方法取得，也可以直接透過A中的方法取得，也可以直接透過A中的方法取得的屬性。呼叫B的removeChild(A)即可刪除A節點。 ② 刪除屬性節點：可透過屬性節點所屬的元素節點的removeAttribute(attrName)或

removeAttributeNode(node)或removeAttributeNode(node)。

③ 清空文字節點：最簡單也是最常用的方法就是直接設定文字節點的

nameNode屬性為空白字串：textNode.nodeValue =」」。

混淆點:

🜎🜎

var p = document.getElementById('example');

p.nodeValue //null,p是元素節點，所以

nodeo

p.getAttributeNode('id').nodeValue //example

，這裡取得

p的id屬性

的

屬性 .childNodes[0].nodeValue //這是一段文字,p是含有兩個子節點的，插入的文字雖然沒有標籤，但它依然是一個節點。其型別是文字節點，其nodeValue是就是寫入在其中的字串，包含換行和縮排

p.innerHTML//這是一段文字>"

這裡

innerHTML返回了

p所包含的全部的節點的所包含的各種值了，以字符串的形式。

4）创建和添加节点

① 创建节点：通过document对象的createElement(eleName)、createTextNode(nodeValue)方法可分别创建元素节点和文本节点。属性节点也有自己的create方法，但是用的少，直接用元素节点的setAttribute()方法即可添加属性。

② 添加节点：两个重要的方法：appendChild()和insertBefore()，具体见Node接口中的方法。

扩展：上面的两个方法都是在已知父节点时用到的，也可以直接在兄弟节点后添加新节点：x.insertBefore(newNode)和x.appendChild(newNode)都可以向x后追加一个新的子节点。

5）替换节点

主要掌握replaceChild(newNode , oldNode) 替换元素节点。（属性节点和文本节点有更简单的方法）

2.3 DOM事件

DOM同时两种事件模型：冒泡型事件和捕获型事件

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发

Click Me

触发的顺序是：div、body、html(IE 6.0和Mozilla 1.0)、document、window(Mozilla 1.0)

捕获型事件：与冒泡事件相反的过程，事件从最不精确的对象开始触发，然后到最精确

上面例子触发的顺序是：document、div

DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

1）事件处理函数/监听函数

在JavaScript中：

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

oDiv.onclick = function(){ //onclick只能用小写

alert("Clicked!");

}

或者

var elem =document.getElementById(“id”)

elem.onmouseover=handleMouseOver //handleMouseOver 是函数名

Function handleMouseOve(e){...}

在HTML中：

//onclick大小寫任意

擴展:

IE事件處理程序attachEvent()和detachEvent()

在IE中，每個元素和window )和detachEvent()，這兩個方法接受兩個相同的參數，事件處理程序名稱和事件處理程序函數，如：

[object].attachEvent("name_of_event_handler","function_to_attach")

[object] .detachEvent("name_of_event_handler","function_to_remove")

var fnClick = function(){

alert("Clicked!");

}eg;處理函數

oDiv.attachEvent("onclick", fnClickAnother); // 可以加入多個事件處理函數

oDiv.detachEvent("onclick", fnClick); //移除事件處理函數

在使用)方法的情況下，事件處理程序會在全域作用域中運行，因此this等於window。

2）跨瀏覽器的事件處理程序

addHandler()和removeHandler()

addHandler()方法屬於一個叫EventUntil()的對象，這兩種方法均接受三個相同的參數，要操作的元素，事件名稱和事件處理程序函數。

3）事件類型

滑鼠事件：click、dbclick、mousedown、mouseup、mouseover、mouseout、mousemove

鍵盤事件：keydown、keypress、keyseup🜵

、change、submit、reset、resize、scroll、focus、blur

4）事件處理器

執行JavaScript 程式碼的程式在事件發生時會對事件做出回應。為了回應一個特定事件

而被執行的程式碼稱為事件處理器。

在HTML標籤中使用事件處理器的語法是：

5）事件處理程序

事件就是使用者或瀏覽器本身所執行的某種動作。例如click,mouseup,keydown,mouseover等都是事件的名字。就是onclick

6）

DOM 0

級事件處理程序DOM 0級事件處理程序：分配一個函數給一個事件的處理程序屬性

"tn2" id="ben2"/>

var btn2=document.getElementById('btn2');取得btn2按鈕物件

btn2.onclick 物件

btn2。

btn2.onclick=function(){

} //刪除onclick屬性

7）

DOM 2

級事件處理程序 DOM 2級事件定義了兩個方法，用於指定和刪除事件處理程序的操作。 ()和removeEventListener()用來指派和移除事件處理函數，與IE不同的是，這些方法需要三個參數：事件名稱，要指派的函數和處理函數是用於冒泡階段(false)還是捕獲階段(true)，預設為冒泡階段false

[object].addEventListener("name_of_event",fnhander,bcapture)

[object].removeEventListener("name_of_event",fnlick,bcapture); ){

alert("Clicked!");

}

oDiv.addEventListener("onclick", fnClick, false); //新增事件處理函數

oDiv. ; // 與IE一樣，可以新增多個事件處理函數

oDiv.removeEventListener("onclick", fnClick, false); //移除事件處理函數

如果使用addEventListener()將事件處理函數加入到捕獲階段，則必須在removeEventListener()中指明是捕獲階段，才能正確地將這個事件處理函數刪除

oDiv.onclick = fnClick;

oDiv.onclick = fnClickAnother; //使用直接賦值，後續的事件處理函數會覆寫前面的處理函數

oDiv.onclick = fnClick;

oDiv.addEventListener("onclick", fnClickAnother, false); //會依序調用，不會覆寫

Another, false); //會依序調用，不會覆寫

3.瀏覽器物件模型(BOM)

BOM的核心是window，而有雙重存取瀏覽器視窗的一個接口，又是一個Global（全域）物件。這意味著在網頁中定義的任何對象，變數和函數，都以window作為其global對象。

3.1Window對象

Window

Window 物件代表一個瀏覽器視窗或一個框架。

Window 物件會在

或

每次出現時被自動建立。

1）物件屬性window //窗戶本身, window=window.selfdow

可使用全域屬性存取

document 對Document

物件的唯讀引用。請參閱Document物件。 history 對 History 物件的唯讀引用。請參數History物件。

location 用於視窗或框架的 Location 物件。請參閱Location對象。

screen 對 Screen 物件的唯讀引用。請參數Screen物件。

navigator 對 Navigator 物件的唯讀引用。請參數Navigator物件。

defaultStatus 設定或傳回視窗狀態列中的預設文字。 innerheight 傳回視窗的文檔顯示區的高度。 innerwidth 傳回視窗的文件顯示區的寬度。 outerheight 傳回視窗的外部高度。

outerwidth 傳回視窗的外部寬度。

pageXOffset 設定或傳回目前頁面相對於視窗顯示區左上角的 X 位置。 pageYOffset 設定或傳回目前頁面相對於視窗顯示區左上角的 Y

位置。

name 設定或傳回視窗的名稱。

parent 返回父視窗。

top 傳回最頂層的先輩視窗。

status 設定視窗狀態列的文字。

window.location //URL位址，配備佈置這個屬性可以開啟新的頁面

2）物件方法window.close(); //關閉視窗

window.close(); //

關閉視窗

message"); //

彈出一個具有

按鈕的系統訊息框，顯示指定的文字

window.confirm("Are you sure?"); //彈出一個OK和Cancel按鈕的詢問對話框，返回一個布林值

name?", "Default"); //

提示使用者輸入訊息，接受兩個參數，即要顯示給使用者的文字和文字方塊中的預設值，將文字方塊中的值作為函數值傳回

window.status //

可以使狀態列的文字暫時改變

window.defaultStatus //

預設的狀態列訊息，可在使用者離開目前頁面前一直改變文字

window.setTimeout("alert(' xxx')", 1000); //

設定在指定的毫秒數後執行指定的程式碼，接受2個參數，要執行的程式碼和等待的毫秒數

window.clearTimeout("ID "); //

取消還未執行的暫停，將暫停ID傳遞給它

window.setInterval(function, 1000); //

無限次地每隔指定的時間段重複一次指定的程式碼，參數同setTimeout()一樣

window.clearInterval("ID"); //

取消時間間隔，將間隔ID. (-1); //訪問瀏覽器視窗的歷史，負數為後退，正數為前進

window.history.back(); //

同上

window.history.forward(); / /

同上

window.history.length //

可以查看歷史中的頁數

clearInterval() 取消

setInterval() 設定的Interval() 取消

setInterval()

設定的。 clearTimeout() 取消由 setTimeout() 方法設定的

timeout。 createPopup() 建立一個 pop-up 視窗。

moveBy() 可相對視窗的目前座標把它移動指定的像素。 moveTo() 把視窗的左上角移動到一個指定的座標。

open() 開啟一個新的瀏覽器視窗或尋找一個已命名的視窗。

print() 列印目前視窗的內容。

resizeBy() 依照指定的像素調整視窗的大小。

resizeTo() 把視窗的大小調整到指定的寬度和高度。

scrollBy() 依照指定的像素值來捲動內容。

scrollTo() 把內容捲到指定的座標。

setInterval() 依照指定的周期（以毫秒計）來呼叫函數或計算表達式。

setTimeout(

方法

秒數) 在指定的毫秒數後呼叫函數或計算表達式。 timeOutEvent = setTimeout("longPress('" + obj + "')",1500);定時器傳輸參數3）成員物件

window.eventoodow

. document物件詳情

window.history

window.screenwindow.navigatorWindow.external（

或

iframe

標籤），瀏覽器會為

HTML

文件建立一個window對象，並為每個框架建立一個額外的

window物件。 ② window.frames 返回視窗中所有命名的框架

③parent是父窗口（如果窗口是頂級窗口，那麼parent==self==top）

top是最高級的幾層窗口（是最高級視窗frameset或iframe）

self是當前窗（等價是用open方法開啟目前視窗的那個視窗

④與訊息框有關的方法：alert(String)、confirm(String)

setTimeout(code,latency) 和setInterval(code,period)

註：

setTimeout

自身再次呼叫setTimeout()；setInteval()

會不停地呼叫

code，直到clearInterval(code，直到clearInterval(code)被呼叫。 3.2 history物件　　window.history.length //. ward () //在瀏覽歷史前進一步　　history.go(i) //

到汗青詳細登記單的第

i位

㟎,i撤退退卻

　　------------------------------------ -------------- -------------------

3.3 screen

物件

screen物件：用於獲取某些關於用戶屏幕的信息，也可用window.screen引用它

window.screen.width //屏幕寬度. 　　window.screen.colorDepth //螢幕顏色深度

　　window.screen.availWidth

　　window.screen .availHeight //可用高度

(

除去任務欄的高度)　　

------------------------- ------------------------- -------------------

3.4 external

物件　　

window.external.AddFavorite("

位址","

標題

🜎

　　------------------------------------------------ -- -------------------

3.5 navigator物件

navigator`物件：包含大量有關Web瀏覽器的資訊物件：包含大量有關

Web

瀏覽器，在偵測瀏覽器及作業系統上非常有用　　

window.navigator.appCodeName //

瀏覽器代碼名稱　　

window. window .navigator.appMinorVersion //

瀏覽器補釘版本　　

window.navigator.cpuClass //cpu

類型.模式種win32

window.navigator.plugins　　window.navigator.opsProfile㟎dow〜〜『〜『起來navigator.systemLanguage //

客戶體系語言zh-cn

簡體中文

window.navigator.userLanguage //使用者語言

,同上. 包含體係版本)

　　window.navigator.userAgent//用戶代理頭的字串表示　　window.navigator.onLineo。　ookieEnabled //

瀏覽器是否撐持cookie　　window.navigator.mimeTypes

1）物件屬性

document.body//

提供對

元素的直接存取。對於定義了框架集的文檔，該屬性引用最外層的

。 document.cookie 傳回與目前文件有關的所有 cookie

。

document.title //

回傳文件標題等價於

HTML

的

title標籤

document.doscript 傳回目前的網域文件。

document.bgColor //回頁背景色

document.fgColor //回傳前景色(文字顏色＜)(

文字顏色

. document.alinkColor //啟動連結

(

焦點在此連結上)的顏色.vlink.v 設定

URL

屬性從而在同一視窗開啟另一網頁

document.fileCreatedDate //

檔案建立日期，只讀屬性

義號、修改檔案.

document.lastModified 傳回文件被最後修改的日期和時間。

document.fileSize //檔案大小，唯讀屬性

document.cookie //設定與讀取cookie

document.charsetsetset/T document.URL 傳回目前文件的URL。

document.referrer 傳回載入目前文件的文件的 URL。

document.styleSheets 返回樣式表的集合,

回傳值CSSStyleSheet[].名去掉連字,

2）常用物件方法document.write() //動態向頁面寫入內容

document.writeln() 方法。，不同的是在每個表達式之後寫一個換行符。

document.createElement() //

用指定標籤類型建立一個新的element

物件)

值的物件

document.getElementsByName(Name) //取得指定Name值的物件

getElementsByTagName() 傳回帶有指定標籤名稱的物件集合。 document.body.appendChild(oTag)—————————————————————

3）body-

主體子對象3）body-主體子對象

document.body //

指定文檔主體的開始和結束等價於

body>/body>

document.body.bgColor //設定或取得物件後面的背景顏色

docum //

未點擊過的連結顏色document.body.alink //啟動連結

(焦點在此連結上

)doc.已點選的連結顏色

document.body.text //文字色document.body.innerText //設定body>…body

設定body>

…body document.body.innerHTML //

設定

body>…/body>之間的HTML.p

document.body.leftMargin //

頁面左邊距document.body.rightMargin //頁面右邊距document.body.bottomMargin //頁下邊document.body.bottomMargin //頁下邊. 背景圖片

document.body.appendChild(oTag) //動態產生一個

HTML

物件

4)。 )

”

老鼠指標點擊物件是觸發

document.body.onmouseover=”func()”//老鼠指標移到物件時觸發

.S.body //老鼠指標移出物件時觸發———————————————————————5）location-位置子物件

location物件：表示載入視窗的URL

，也可用

window.location引用它location.href引用它

http://www.somewhere.com/pictures/index.htm

location.portocol //URL中所使用的協議，即雙斜線之前的部分，如cationhttplo.host //

伺服器的名字，如

www.wrox.comlocation.hostname //

通常等於

host，有時會省略前面的UR聲明的請求的端口，預設情況下，大多數

URL

沒有端口信息，如8080location.pathname //URL中主機名後的部分，如

location.pathname //URL

中主機名後的部分，如 htmlocation.search //執行GET

請求的URL中的問號後的部分，又稱蟜/

如果

URL包含#，傳回該符號之後的內容，如#anchor1location.assign(#anchor1

location.href，新位址都會加入瀏覽器的歷史堆疊location.replace("http:www.baidu.com"); //同assign()，但新位址不會被加到瀏覽器的歷史堆疊中，不能透過back

和forward存取

location.reload(true | false); //

location.reload(true | false); //location.reload(true | false); //location.reload(true | false); //location.reload(true | false); //為當前頁，為重新載入

false

時從瀏覽器快取中重載，為true時從伺服器端重載，預設為falsedocument.lolocation.reloadument.loop.

6）selection-選區子物件

document.selection7）forms

) )

透過集合引用

document.forms //對應頁面上的form標籤document.forms.length //

對應頁上

/form/form

document.forms[0] //第1個/formform標籤

document.forms[i] //標籤5 標籤document.forms[i].length //第

i-1

個/formform中的控制數個/formform中的控件/

第

i-1個/formform中第j-1個控制項 formform name =」

Myform」>input name=」

myctrl」控制項名稱c)存取表單的屬性document.forms[i].name //對應form name>

屬性

. /formform action>屬性

document.forms[i].encoding //

對應/formform enctype>

屬性 /formform target>屬性document.forms[i].appendChild(oTag) //

動態插入一個控制項

document.all.oDiviv圖。 all.oDiv.style.display=” //

圖層設定為可視document.all.oDiv.style.display=層設定為隱藏

document.getElementId(

”oDiv”) oDiv

” ).style=

”document.getElementId(”

oDiv”).display= all表示

document

中所有物件的集合只有ie支援此屬性，因此也用來判斷瀏覽器的種類*/

....*/.... HTML DOM 節點

在HTML DOM （文檔物件模型）中，每個部分都是節點：

1.文檔本身是文檔節點

2.元素是所有資料 3.所有

HTML

屬性是屬性節點4.HTML 元素內的文字是文字節點

5.在HTML DOM

中，

Element

物件表示

HTML元素。

Element 物件可以擁有類型為元素節點、文字節點、註解節點的子節點。 NodeList 物件表示節點列表，例如 HTML元素的子節點集合。元素也可以擁有屬性。屬性是屬性節點

取得document.getElementById(ID) //

取得指定

ID值的物件document.getElementsByName() 所獲得的物件

Name

getElementsByTagName() 傳回帶有指定標籤名的物件集合。

屬性和方法方法裡有a,b

的參數只是為了加深說明, .add()為元素新增指定的類別

element.accessKey 設定或傳回元素的快速鍵。

element.appendChild() 將新的子節點，作為最後一個子節點。 element.attributes 傳回元素屬性的集合。

element.childNodes 傳回元素子節點的 NodeList。 element.className 設定或傳回元素的 class 屬性。 element.clientHeight 傳回元素的可見高度。

element.clientWidth 傳回元素的可見寬度。 element.cloneNode() 克隆元素。

element.compareDocumentPosition() 比較兩個元素的文檔位置。

element.contentEditable 設定或傳回元素的文字方向。

element.dir 設定或傳回元素的文字方向。

element.firstChild 傳回元素的首個子。 element.getAttribute() 傳回元素節點的指定屬性值。 element.getAttributeNode() 傳回指定的屬性節點。

element.getElementsByTagName() 傳回擁有指定標籤名的所有子元素的集合。 element.getFeature() 傳回實作了指定特性的 API

的某個物件。

element.getUserData() 傳回關聯元素上鍵的物件。

Element.hidden

取得或設定

hidden

屬性的存在狀態

element.hasAttribute() 如果元素擁有指定屬性，則傳回

element.hasAttributes() 如果元素擁有屬性，則傳回

true

，否則傳回false。

element.hasChildNodes() 如果元素擁有子節點，則傳回

true，否則false。

element.id 設定或傳回元素的 id。 element.innerHTML 設定或傳回元素的內容。

element.insertBefore(,) 在指定的已有的子節點之前插入新節點。 A插到b前

element.isContentEditable 設定或傳回元素的內容。

element.isDefaultNamespace() 如果指定的 namespaceURI是默認的，則返回true，否則返回false。

element.isEqualNode() 檢查a元素是否與目前元素相等。

element.isSameNode(a) 檢查指定元素是否為當前元素.

element.isSupported() 如果元素支援指定特性，則傳回 true。

element.lang 設定或傳回元素的語言代碼。

element.lastChild 傳回元素的最後一個子元素。

element.namespaceURI 傳回元素的 namespace URI。

element.nextSibling 傳回目前元素之後的兄弟元素

element.nodeName 傳回元素的名稱。

element.nodeType 傳回元素的節點類型。

element.nodeValue 設定或傳回元素值。

element.normalize() 合併元素中相鄰的文字節點，並移除空的文字節點。

element.offsetHeight 傳回元素的高度。

element.offsetWidth 傳回元素的寬度。

element.offsetLeft 傳回元素的水平偏移位置。

element.offsetParent 傳回元素的偏移容器。

element.offsetTop 傳回元素的垂直偏移位置。

element.ownerDocument 傳回元素的根元素（文檔物件）。

element.parentNode 傳回元素的父節點。

element.previousSibling 傳回目前元素之前的兄弟元素

Element.remove() 從元素移除指定的類別

element.removeAttribute() 從元素中移除指定屬性。

element.removeAttributeNode() 移除指定的屬性節點，並傳回被移除的節點。

element.removeChild(a) 從元素中移除子節點。

element.replaceChild(a,b) 取代元素中的子節點。

element.scrollHeight 傳回元素的整體高度。

element.scrollLeft 傳回元素左邊緣與視圖之間的距離。

element.scrollTop 傳回元素上邊緣與視圖之間的距離。

element.scrollWidth 傳回元素的整體寬度。

element.setAttribute() 把指定屬性設定或改為指定值。

element.setAttributeNode() 設定或更改指定屬性節點。

element.setIdAttribute()

element.setIdAttributeNode()

element.setUserData() 把物件關聯到元素上的鍵。

element.style 設定或傳回元素的 style 屬性。

Element.toggle()如果類別不存在就添加它存在就移除它

element.tabIndex 設定或傳回元素的 tab 鍵控制次序。

element.tagName 傳回元素的標籤名稱。

element.textContent 設定或傳回節點及其後代的文字內容。

element.title 設定或傳回元素的 title 屬性。

element.toString() 把元素轉換為字串。

nodelist.item() 傳回 NodeList 中位於指定下標的節點。

nodelist.length 傳回 NodeList 中的節點數。

element.addEventListener(event, function, useCapture)

必須。字串，指定事件名。注意


: 不要使用	"on" 前綴。例如，使用 "click" ,而不是使用"onclick"。提示：所有 HTML DOM 事件，可以查看我們完整的HTML DOM Event物件參考手冊。
function	必須。指定要事件觸發時執行的函數。當事件物件會作為第一個參數傳入函數。事件物件的類型取決於特定的事件。例如， "click" 事件屬於 MouseEvent(滑鼠事件)物件。
useCapture	可選。布林值，指定事件是否在捕獲或冒泡階段執行。可能值: true - 事件句柄在捕獲階段執行 false- false- 預設。事件句柄在冒泡階段執行

contentWindow 屬性

如果文件裡有iframe

rows 集合回傳表格中所有行（

TableRow>的一個物件foot>

和

中定義的所有行TableRow 物件TableRow 對象TableRow 。

在 HTML 文檔中

標籤每出現一次，一個 TableRow對象就會被創建。

TableRow 物件集合

FOW3C

包含行中所有單元格的一個陣列。

cells 集合回傳表格中所有

或

元素。

TableCell 物件代表一個HTML 表格單元格。

在一個HTML 文件中

標籤每出現一次，一個TableCell. 1 ）Event物件的常用屬性

名稱

說明target

2）Window 事件屬性

(沒加藍的都是h 5新事件)h 5

對針對

) 標籤）：屬性

onafterprint 文件列印之後執行的腳本。

onbeforeprint 文件列印之前執行的腳本。

onbeforeunload 文件卸載先前執行的腳本。

onerror 在錯誤發生時運行的腳本。

onhaschange 當文件已變更時執行的腳本。

onload

頁面結束載入之後觸發。

onmessage 在訊息被觸發時運行的腳本。

可以使用呼叫

postMessage

()向主執行緒發送訊息,在某些場景下，業務呼叫方可能需要主動跟定位元件通訊,可以透過html55 postMessage的方式主動與定位組件啟動通訊onoffline 當文件離線時執行的腳本。

ononline 當文件上線時執行的腳本。

onpagehide 當視窗隱藏時執行的腳本。

onpageshow 當視窗成為可見時執行的腳本。

onpopstate 當視窗歷史記錄改變時執行的腳本。

onredo 當文件執行撤銷（

redo

）時執行的腳本。 onresize 當瀏覽器視窗被調整大小時觸發。

onstorage 在

Web Storage

區域更新後執行的腳本。 onundo 在文件執行

undo

時運行的腳本。

onunload

一旦頁面已下載時觸發（或瀏覽器視窗已關閉）。

3）Form

事件由

HTML

表單內的動作觸發的事件（應用到幾乎所有HTML表單內的動作觸發的事件（應用到幾乎所有HTML 屬性onblur

元素失去焦點時執行的腳本。

onchange在元素值被改變時運行的腳本。

oncontextmenu 當上下文選單被觸發時運行的腳本。

onfocus

當元素失去焦點時執行的腳本。

onformchange 在表單改變時執行的腳本。

onforminput 當表單獲得使用者輸入時執行的腳本。

oninput 當元素獲得使用者輸入時執行的腳本。

oninvalid 當元素無效時執行的腳本。

onreset

當表單中的重置按鈕被點擊時觸發。

HTML5

中不支援。 onselect 在元素中文字被選取後觸發。

onsubmit 在提交表單時觸發。

4）oninput,onpropertychange,onchange

的用法

oninput:

oninput

oninput:

oninput 事件在使用者輸入時觸發。

該事件在或元素的值改變時觸發。

提示：事件類似於 onchange 事件。不同之處在於oninput事件在元素值發生變化是立即觸發，onchange在元素失去焦點時觸發。另外一點不同是onchange事件也可以作用於和元素。

onchange

onchange 事件會在網域的內容改變時發生。

onchange 事件也可用於單選框與複選框改變後觸發的事件。

onchange觸發事件必須滿足兩個條件：

a）當前物件屬性改變，並且是由鍵盤或滑鼠事件激發的（腳本觸發無效）

）失去焦點(onblur)；

onpropertychange的話，只要當前物件屬性改變，都會觸發事件，但是它是IE 的非

瀏覽器版本，支援firefox和opera等瀏覽器，但當有一點不同，它綁定於物件時，並非該物件都能改變物件它只在物件value值改變時奏效。在textarea中，如果想捕獲用戶的鍵盤輸入，用onkeyup檢查事件就可以了，但是onkeyup並不支援複製和粘貼，因此需要動態監測textarea中值的變化，這就需要onpropertychange （用在IE瀏覽器）和oninput（非IE瀏覽器）結合在一起使用了。

5）行動端觸控事件 ontouchstart

、

ontouchmove