DOM 的全名為 Document Object Model ，中文稱之為文件物件模型，這是 W3C 組織所推廣的標準。基本上 DOM 屬於 JavaScript 的介面標準，各種瀏覽器如 Firefox 、 Chrome 、 Opera 、 Safari 與 IE 等都依此標準建置實際的物件，使 JavaScript 程式可以直接利用。
其由來是網路剛蓬勃發展時，各家瀏覽器各自推出自己的物件，使得開發者一團亂，因此後來就由 W3C 制定共通的標準。大體上，目前各種瀏覽器都依 W3C 所堆廣的 DOM 標準，標準內大部分物件都有所支援，僅剩少數專屬於特定瀏覽器的物件種類。
我們在這份《HTML DOM 分類導覽》中以 HTML 5 元素為主要介紹，會納入一些 HTML 4.01 的 Deprecated 或 Obsolete 元素，其他同樣包括 document 、 window 、 navigator 、 screen 、 history 、 location 等通用物件的說明。
本文內容範例的執行環境為 Mac 平台的 FireFox 瀏覽器，利用其他平台的 FireFox 瀏覽器的執行結果並不會有所差異。若使用其他瀏覽器，如 Safari 、 Chrome 或 Opera 執行結果應該類似，而 Windows 平台的 IE 也應該類似，但沒有在 Windows 平台的 IE 上經過嚴格測試。
基本概念
文件物件 document
- 屬性
- document.activeElement
- document.alinkColor
- document.anchors
- document.bgColor
- document.cookie
- document.documentElement
- document.documentURI
- document.forms
- document.images
- document.inputEncoding
- document.lastModified
- document.lastStyleSheetSet
- document.linkColor
- document.links
- document.location
- document.plugins
- document.preferredStyleSheetSet
- document.readyState
- document.referrer
- document.selectedStyleSheetSet
- document.styleSheets
- document.styleSheetSets
- document.title
- document.URL
- document.vlinkColor
- 方法
- document.close()
- document.createAttribute(name_str)
- document.createElement(element_str)
- document.createTextNode(text_str)
- document.enableStyleSheetsForSet(ss_str)
- document.getElementById(id_str)
- document.getElementsByClassName(cn_str)
- document.getElementsByName(n_str)
- document.getElementsByTagName(tn_str)
- document.hasFocus()
- document.open()
- document.write(str)
- document.writeln(str)
元素物件 element
- 屬性
- Node.baseURI
- Node.childNodes
- Node.firstChild
- Node.lastChild
- Node.nextSibling
- Node.nodeName
- Node.nodeType
- Node.parentNode
- Node.previousSibling
- Node.textContent
- element.childElementCount
- element.children
- element.classList
- element.className
- element.clientHeight
- element.clientLeft
- element.clientTop
- element.clientWidth
- element.firstElementChild
- element.id
- element.innerHTML
- element.lastElementChild
- element.name
- element.nextElementSibling
- element.offsetHeight
- element.offsetLeft
- element.offsetParent
- element.offsetTop
- element.offsetWidth
- element.previousElementSibling
- element.scrollHeight
- element.scrollLeft
- element.scrollTop
- element.scrollWidth
- element.style
- element.title
- 方法
- element.addEventLisener(t_str, f, b)
- Node.appendChild(c)
- Node.cloneNode(b)
- Node.hasAttributes()
- Node.hasChildNodes()
- Node.insertBefore(n, r)
- Node.isEqualNode(a)
- Node.isSameNode()
- Node.removeChild(c)
- Node.replaceChild(c)
- getAttribute(n)
- getAttributeNode(n)
- getElementsByTagName(n)
- hasAttribute(n)
- removeAttribute(n)
- setAttribute(n, v)
事件物件 event
- 屬性
- event.altKey
- event.button
- event.cancelable
- event.charCode
- event.clientX
- event.clientY
- event.ctrlKey
- event.defaultPrevented
- event.detail
- event.keyCode
- event.layerX
- event.layerY
- event.metaKey
- event.screenX
- event.screenY
- event.shiftKey
- event.type
- event.view
- event.which
- 方法
HTML 元素的事件處理屬性
- 拷貝 oncopy
- 剪下 oncut
- 貼上 onpaste
- 離開焦點 onblur
- 更改 onchange
- 點擊 onclick
- 雙重點擊 ondbclick
- 按住按鍵 onkeydown
- 按按鍵 onkeypress
- 釋放按鍵 onkeyup
- 按住滑鼠 onmousedown
- 滑鼠移動 onmousemove
- 離開目標元素 onmouseout
- 進入目標元素 onmouseover
- 釋放滑鼠 onmouseup
- 滾動滑鼠滾輪 onmousewheel
- 調整瀏覽器視窗大小 onresize
- 使用滑鼠滾輪 onscroll
- 滑鼠「拖」 ondrag
- 滑鼠「放」 ondrop
- 載入網頁 onload
window 物件
- 屬性
- window.closed
- window.document
- window.frameElement
- window.frames
- window.history
- window.location
- window.innerHeight
- window.innerWidth
- window.length
- window.name
- window.navigator
- navigator.appCodeName
- navigator.appName
- navigator.appVersion
- navigator.buildID
- navigator.cookieEnabled
- navigator.language
- navigator.mimeTypes
- navigator.onLine
- navigator.oscpu
- navigator.platform
- navigator.plugins
- navigator.product
- navigator.userAgent
- navigator.vendor
- navigator.javaEnabled()
- window.opener
- window.outerHeight
- window.outerWidth
- window.pageXOffset
- window.pageYOffset
- window.parent
- window.screen
- window.screen.availTop
- window.screen.availLeft
- window.screen.availHeight
- window.screen.availWidth
- window.screen.colorDepth
- window.screen.height
- window.screen.left
- window.screen.pixelDepth
- window.screen.top
- window.screen.width
- window.screenX
- window.screenY
- window.scrollMaxX
- window.scrollMaxY
- window.scrollX
- window.scrollY
- window.self
- window.status
- window.top
- 方法
- window.close()
- window.open(sU, sN, sF)
- window.alert()
- window.back()
- window.blur()
- window.focus()
- window.clearInterval(id)
- window.setInterval(f, d)
- window.clearTimeout(id)
- window.setTimeout(f, d)
- window.confirm(m)
- window.escape(r)
- window.unescape(e)
- window.forward()
- window.getComputedStyle(e)
- window.home()
- window.moveBy(x, y)
- window.moveTo(x, y)
- window.print()
- window.prompt(t, v)
- window.resizeBy(x, y)
- window.resizeTo(x, y)
- window.scroll(x, y)
- window.scrollBy(x, y)
- window.scrollByLines(n)
- window.scrollByPages(n)
- window.scrollTo(x, y)
樣式設定物件 style
- 屬性
- 元素呈現方式 display
- 文字相關
- 字型顏色 color
- 字型種類 fontFamily
- 字型粗細 fontWeight
- 字型尺寸 fontSize
- 字型格式 fontStyle
- 字型變體 fontVariant
- 字型伸縮 fontStretch
- 字型大小 fontSizeAdjust
- 字型 font
- 文字縮排 textIndent
- 水平對齊 textAlign
- 文字行高 lineHeight
- 垂直對齊 verticalAlign
- 單字間距 wordSpacing
- 字元間距 letterSpacing
- 大小寫轉換 textTransform
- 文字裝飾 textDecoration
- 文字陰影 textShadow
- 空白字元 whiteSpace
- 文字方向 direction
- 區塊相關
- 寬度 width
- 高度 height
- 邊界 margin
- 左邊界 marginLeft
- 右邊界 marginRight
- 上邊界 marginTop
- 下邊界 marginBottom
- 邊距 padding
- 左邊距 paddingLeft
- 右邊距 paddingRight
- 上邊距 paddingTop
- 下邊距 paddingBottom
- 邊框格式 borderStyle
- 左邊框格式 borderLeftStyle
- 右邊框格式 borderRightStyle
- 上邊框格式 borderTopStyle
- 下邊框格式 borderBottomStyle
- 邊框粗細 borderWidth
- 左邊框粗細 borderLeftWidth
- 右邊框粗細 borderRightWidth
- 上邊框粗細 borderTopWidth
- 下邊框粗細 borderBottomWidth
- 邊框顏色 borderColor
- 左邊框顏色 borderLeftColor
- 右邊框顏色 borderRightColor
- 上邊框顏色 borderTopColor
- 下邊框顏色 borderBottomColor
- 邊框 border
- 左邊框 borderLeft
- 右邊框 borderRight
- 上邊框 borderTop
- 下邊框 borderBottom
- 背景相關
- 背景 background
- 背景顏色 backgroundColor
- 背景圖片 backgroundImage
- 重複背景圖片 backgroundRepeat
- 背景位置 backgroundPosition
- 背景固定 backgroundAttachment
- 定位相關
- 浮動 cssFloat
- 清除 clear
- 定位 position
- 對頂端位移 top
- 對右端位移 right
- 對底部位移 bottom
- 對左端位移 left
- 最小寬度 minWidth
- 最大寬度 maxWidth
- 最小高度 minHeight
- 最大高度 maxHeight
- 溢出 overflow
- 剪裁 clip
- 可見性 visibility
- 重疊順序 zIndex
- 表格
- 清單
- 自訂內容 content
- 引號 quotes
- 滑鼠游標 cursor
- 外框 outline
樣式設定物件 style
- 屬性
- 元素呈現方式 display
- 文字相關
- 字型顏色 color
- 字型種類 fontFamily
- 字型粗細 fontWeight
- 字型尺寸 fontSize
- 字型格式 fontStyle
- 字型變體 fontVariant
- 字型伸縮 fontStretch
- 字型大小 fontSizeAdjust
- 字型 font
- 文字縮排 textIndent
- 水平對齊 textAlign
- 文字行高 lineHeight
- 垂直對齊 verticalAlign
- 單字間距 wordSpacing
- 字元間距 letterSpacing
- 大小寫轉換 textTransform
- 文字裝飾 textDecoration
- 文字陰影 textShadow
- 空白字元 whiteSpace
- 文字方向 direction
- 區塊相關
- 寬度 width
- 高度 height
- 邊界 margin
- 左邊界 marginLeft
- 右邊界 marginRight
- 上邊界 marginTop
- 下邊界 marginBottom
- 邊距 padding
- 左邊距 paddingLeft
- 右邊距 paddingRight
- 上邊距 paddingTop
- 下邊距 paddingBottom
- 邊框格式 borderStyle
- 左邊框格式 borderLeftStyle
- 右邊框格式 borderRightStyle
- 上邊框格式 borderTopStyle
- 下邊框格式 borderBottomStyle
- 邊框粗細 borderWidth
- 左邊框粗細 borderLeftWidth
- 右邊框粗細 borderRightWidth
- 上邊框粗細 borderTopWidth
- 下邊框粗細 borderBottomWidth
- 邊框顏色 borderColor
- 左邊框顏色 borderLeftColor
- 右邊框顏色 borderRightColor
- 上邊框顏色 borderTopColor
- 下邊框顏色 borderBottomColor
- 邊框 border
- 左邊框 borderLeft
- 右邊框 borderRight
- 上邊框 borderTop
- 下邊框 borderBottom
- 背景相關
- 背景 background
- 背景顏色 backgroundColor
- 背景圖片 backgroundImage
- 重複背景圖片 backgroundRepeat
- 背景位置 backgroundPosition
- 背景固定 backgroundAttachment
- 定位相關
- 浮動 cssFloat
- 清除 clear
- 定位 position
- 對頂端位移 top
- 對右端位移 right
- 對底部位移 bottom
- 對左端位移 left
- 最小寬度 minWidth
- 最大寬度 maxWidth
- 最小高度 minHeight
- 最大高度 maxHeight
- 溢出 overflow
- 剪裁 clip
- 可見性 visibility
- 重疊順序 zIndex
- 表格
- 清單
- 自訂內容 content
- 引號 quotes
- 滑鼠游標 cursor
- 外框 outline
HTML 元素物件
- 根元素
- 文件資料元素
- <head> (HTMLHeadElement)
- <title> (HTMLTitleElement)
- <base> (HTMLBaseElement)
- <link> (HTMLLinkElement)
- <meta> (HTMLMetaElement)
- <style> (HTMLStyleElement)
- <script> (HTMLScriptElement)
- <noscript> (HTMLElement)
- 文件區域元素
- <body> (HTMLBodyElement)
- <section> (HTMLElement)
- <nav> (HTMLElement)
- <article> (HTMLElement)
- <aside> (HTMLElement)
- <h1> <h2> <h3> <h4> <h5> <h6> (HTMLHeadingElement)
- <hgroup> (HTMLElement)
- <header> (HTMLElement)
- <footer> (HTMLElement)
- <address> (HTMLElement)
- 群組元素
- <p> (HTMLParagraphElement)
- <hr> (HTMLHRElement)
- <pre> (HTMLPreElement)
- <blockquote> (HTMLQuoteElement)
- <ol> (HTMLOListElement)
- <ul> (HTMLUListElement)
- <li> (HTMLLIElement)
- <dl> (HTMLDListElement)
- <dt> (HTMLElement)
- <dd> (HTMLElement)
- <figure> (HTMLElement)
- <figcaption> (HTMLElement)
- <div> (HTMLDivElement)
- 文字層級元素
- <a> (HTMLAnchorElement)
- <em> (HTMLElement)
- <strong> (HTMLElement)
- <small> (HTMLElement)
- <s> (HTMLElement)
- <cite> (HTMLElement)
- <q> (HTMLQuoteElement)
- <dfn> (HTMLElement)
- <abbr> (HTMLElement)
- <data> (HTMLDataElement)
- <time> (HTMLTimeElement)
- <code> (HTMLElement)
- <var> (HTMLElement)
- <samp> (HTMLElement)
- <kbd> (HTMLElement)
- <sub> (HTMLElement)
- <sup> (HTMLElement)
- <i> (HTMLElement)
- <b> (HTMLElement)
- <u> (HTMLElement)
- <mark> (HTMLElement)
- <ruby> (HTMLElement)
- <rt> (HTMLElement)
- <rp> (HTMLElement)
- <bdi> (HTMLElement)
- <bdo> (HTMLElement)
- <span> (HTMLSpanElement)
- <br / > (HTMLBRElement)
- <wbr> (HTMLElement)
- 編修記錄元素
- 內嵌媒體元素
- <img> (HTMLImageElement)
- <iframe> (HTMLIFrameElement)
- <embed> (HTMLEmbedElement)
- <object> (HTMLObjectElement)
- <param> (HTMLParamElement)
- <video> (HTMLVideoElement)
- <audio> (HTMLAudioElement)
- <source> (HTMLSourceElement)
- <track> (HTMLTrackElement)
- <canvas> (HTMLCanvasElement)
- CanvasRenderingContext2D
- CanvasRenderingContext2D.canvas
- CanvasRenderingContext2D.save()
- CanvasRenderingContext2D.restore()
- CanvasRenderingContext2D.scale()
- CanvasRenderingContext2D.rotate()
- CanvasRenderingContext2D.translate()
- CanvasRenderingContext2D.transform()
- CanvasRenderingContext2D.setTransform()
- CanvasRenderingContext2D.globalAlpha
- CanvasRenderingContext2D.globalCompositeOperation
- CanvasRenderingContext2D.strokeStyle
- CanvasRenderingContext2D.fillStyle
- CanvasRenderingContext2D.createLinearGradient()
- CanvasRenderingContext2D.createRadialGradient()
- CanvasGradient 物件
- CanvasRenderingContext2D.createPattern()
- CanvasRenderingContext2D.lineWidth
- CanvasRenderingContext2D.lineCap
- CanvasRenderingContext2D.lineJoin
- CanvasRenderingContext2D.miterLimit
- CanvasRenderingContext2D.shadowOffsetX
- CanvasRenderingContext2D.shadowOffsetY
- CanvasRenderingContext2D.shadowBlur
- CanvasRenderingContext2D.shadowColor
- CanvasRenderingContext2D.clearRect()
- CanvasRenderingContext2D.fillRect()
- CanvasRenderingContext2D.strokeRect()
- CanvasRenderingContext2D.beginPath()
- CanvasRenderingContext2D.closePath()
- CanvasRenderingContext2D.moveTo()
- CanvasRenderingContext2D.lineTo()
- CanvasRenderingContext2D.quadraticCurveTo()
- CanvasRenderingContext2D.bezierCurveTo()
- CanvasRenderingContext2D.arcTo()
- CanvasRenderingContext2D.rect()
- CanvasRenderingContext2D.arc()
- CanvasRenderingContext2D.fill()
- CanvasRenderingContext2D.stroke()
- CanvasRenderingContext2D.drawSystemFocusRing()
- CanvasRenderingContext2D.drawCustomFocusRing()
- CanvasRenderingContext2D.scrollPathIntoView()
- CanvasRenderingContext2D.clip()
- CanvasRenderingContext2D.isPointInPath()
- CanvasRenderingContext2D.font
- CanvasRenderingContext2D.textAlign
- CanvasRenderingContext2D.textBaseline
- CanvasRenderingContext2D.fillText()
- CanvasRenderingContext2D.strokeText()
- CanvasRenderingContext2D.measureText()
- CanvasRenderingContext2D.drawImage()
- CanvasRenderingContext2D.createImageData()
- CanvasRenderingContext2D.getImageData()
- CanvasRenderingContext2D.putImageData()
- <map> (HTMLMapElement)
- <area> (HTMLAreaElement)
- <applet> (HTMLAppletElement)
- 表格元素
- <table> (HTMLTableElement)
- <caption> (HTMLTableCaptionElement)
- <colgroup> (HTMLTableColElement)
- <col> (HTMLTableColElement)
- <tbody> (HTMLTableSectionElement)
- <thead> (HTMLTableSectionElement)
- <tfoot> (HTMLTableSectionElement)
- <tr> (HTMLTableRowElement)
- <td> (HTMLTableDataCellElement)
- <th> (HTMLTableHeaderCellElement)
- 表單元素
- <form> (HTMLFormElement)
- <fieldset> (HTMLFieldSetElement)
- <legend> (HTMLLegendElement)
- <label> (HTMLLabelElement)
- <input> (HTMLInputElement)
- <button> (HTMLButtonElement)
- <select> (HTMLSelectElement)
- <datalist> (HTMLDataListElement)
- <optgroup> (HTMLOptGroupElement)
- <option> (HTMLOptionElement)
- <textarea> (HTMLTextAreaElement)
- <keygen> (HTMLKeygenElement)
- <output> (HTMLOutputElement)
- <progress> (HTMLProgressElement)
- <meter> (HTMLMeterElement)
- 互動式元素
參考資料
http://www.w3.org/standards/techs/dom#w3c_all
https://developer.mozilla.org/en/DOM
http://msdn.microsoft.com/en-us/ie/default
http://developer.apple.com/devcenter/safari/index.action
http://dev.chromium.org/
http://dev.opera.com/
相關連結
回 JavaScript 教材目錄
回首頁
沒有留言:
張貼留言