HTML DOM 快速導覽 - HTML 元素物件

每一種 HTML 元素 (element) 都可以用 JavaScript 進行操控，因為每一種 HTML 元素都有其相關的 DOM 介面。如下列表

HTML 元素物件
分類名稱DOM 介面
htmlHTMLHtmlElement
文件資料元素headHTMLHeadElement
titleHTMLTitleElement
baseHTMLBaseElement
linkHTMLLinkElement
metaHTMLMetaElement
styleHTMLStyleElement
scriptHTMLScriptElement
noscriptHTMLElement
區域元素bodyHTMLBodyElement
sectionHTMLElement
navHTMLElement
articleHTMLElement
asideHTMLElement
h1 h2 h3 h4 h5 h6HTMLHeadingElement
hgroupHTMLElement
headerHTMLElement
footerHTMLElement
addressHTMLElement
群組元素pHTMLParagraphElement
hrHTMLHRElement
preHTMLPreElement
blockquoteHTMLQuoteElement
olHTMLOListElement
ulHTMLUListElement
liHTMLLIElement
dlHTMLDListElement
dtHTMLElement
ddHTMLElement
figureHTMLElement
figcaptionHTMLElement
divHTMLDivElement
文字階層元素aHTMLAnchorElement
emHTMLElement
strongHTMLElement
smallHTMLElement
sHTMLElement
citeHTMLElement
qHTMLQuoteElement
dfnHTMLElement
abbrHTMLElement
dataHTMLDataElement
timeHTMLTimeElement
codeHTMLElement
varHTMLElement
sampHTMLElement
kbdHTMLElement
subHTMLElement
supHTMLElement
iHTMLElement
bHTMLElement
uHTMLElement
markHTMLElement
rubyHTMLElement
rtHTMLElement
rpHTMLElement
bdiHTMLElement
bdoHTMLElement
spanHTMLSpanElement
brHTMLBRElement
wbrHTMLElement
編訂元素insHTMLModElement
delHTMLModElement
內嵌元素imgHTMLImageElement
iframeHTMLIFrameElement
embedHTMLEmbedElement
objectHTMLObjectElement
paramHTMLParamElement
videoHTMLVideoElement
audioHTMLAudioElement
sourceHTMLSourceElement
trackHTMLTrackElement
canvasHTMLCanvasElement
mapHTMLMapElement
areaHTMLAreaElement
appletHTMLAppletElement
表格元素tableHTMLTableElement
captionHTMLTableCaptionElement
colgroupHTMLTableColElement
colHTMLTableColElement
tbodyHTMLTableSectionElement
theadHTMLTableSectionElement
tfootHTMLTableSectionElement
trHTMLTableRowElement
tdHTMLTableDataCellElement
thHTMLTableHeaderCellElement
表單元素formHTMLFormElement
fieldsetHTMLFieldSetElement
legendHTMLLegendElement
labelHTMLLabelElement
inputHTMLInputElement
buttonHTMLButtonElement
selectHTMLSelectElement
datalistHTMLDataListElement
optgroupHTMLOptGroupElement
optionHTMLOptionElement
textareaHTMLTextAreaElement
keygenHTMLKeygenElement
outputHTMLOutputElement
progressHTMLProgressElement
meterHTMLMeterElement
互動式元素detailsHTMLDetailsElement
summaryHTMLElement
commandHTMLCommandElement
menuHTMLMenuElement


其中，取得 <canvas> 的元素物件 (object) 後，利用 HTMLCanvasElement 物件的 getContext() 方法會回傳 CanvasRenderingContext2D 物件，其用於 <canvas> 的繪圖，有以下的屬性 (attribute) 與方法 (method)
類型名稱說明
參考canvas對 <canvas> 物件的參考
狀態save()儲存目前的繪圖狀態
restore()回復 save() 所儲存的繪圖狀態
變形scale()縮放圖形
rotate()旋轉圖形
translate()位移圖形
transform()利用矩陣使圖片變形
setTransform()重新設置單位矩陣，然後呼叫 transform() 使圖片變形
合成globalAlpha設置圖片的透明度
globalCompositeOperation設置圖形的重疊規則
顏色與樣式strokeStyle設定線條顏色
fillStyle設定填滿形狀的顏色
createLinearGradient()回傳 CanvasGradient 物件，用來設定線狀的漸層顏色
createRadialGradient()回傳 CanvasGradient 物件，用來設定圓形的漸層顏色
CanvasGradient.addColorStop()CanvasGradient 物件設定顏色的方法
createPattern()設定圖形的填充式樣
線條樣式lineWidth設定路徑線條的寬度
lineCap設定路徑線條頂點的樣式
lineJoin設定路徑線條相接的樣式
miterLimit回傳路徑線條的斜接長度
陰影shadowOffsetX設定文字水平方向的陰影
shadowOffsetY設定文字垂直方向的陰影
shadowBlur設定陰影文字的模糊度
shadowColor設定陰影文字的顏色
長方形clearRect()清空指定的長方形區域
fillRect()畫出填滿顏色的長方形
strokeRect()畫出長方形區域的外框
路徑beginPath()啟動繪製路徑的程序
closePath()連結路徑的起點與終點，然後關閉繪製路徑的程序
moveTo()移動目前繪圖路徑到指定座標
lineTo()畫出直線到指定座標
quadraticCurveTo()畫出二次方貝茲曲線
bezierCurveTo()畫出三次方貝茲曲線
arcTo()畫出弧線
rect()畫出矩形
arc()畫出弧線
fill()填滿顏色
stroke()畫出路徑筆劃的顏色
drawSystemFocusRing()
drawCustomFocusRing()
scrollPathIntoView()
clip()剪裁指定的路徑或區域
isPointInPath()
文字font設定文字字型
textAlign設定文字水平對齊方式
textBaseline設定文字基線對齊方式
fillText()畫出文字
strokeText()畫出鏤空字型
measureText()回傳記錄文字度量值的 TextMetrics 物件
圖檔drawImage()畫出圖片檔案
畫素處理createImageData()回傳 ImageData 物件，用以對圖像進行畫素等級的處理動作
getImageData()回傳 ImageData 物件，用以對圖像進行畫素等級的處理動作
putImageData()將 ImageData 物件放回 CanvasRenderingContext2D 之中


茲舉一例如下
function run() {
    var d = document.getElementsByTagName("canvas");
    var c = d[0].getContext("2d");
    c.font = "20px Courier";
    var t = "There is no spoon.";
    c.strokeText(t, 10, 30);
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：htmldemo111.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 */


此例用 document 物件的 getElementsByTagName() 方法，取得標籤名稱為 canvas 的 HTMLCollection 物件，文件的第一個 <canvas> 元素亦即該 HTMLCollection 索引值為 0 的物件
var d = document.getElementsByTagName("canvas");
var c = d[0].getContext("2d");


接著設定文字字型、文字顏色，最後呼叫 strokeText() 畫出文字外框
c.font = "20px Courier";
var t = "There is no spoon.";
c.strokeText(t, 10, 30);


我們以下面的 HTML 文件載入
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="htmldemo111.js" type="text/javascript"></script>
</head>
<body onload="run();">
<canvas id="demo" width="250" height="180"></canvas>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：htmldemo111.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器 (browser) 開啟如下



中英文術語對照
元素element
物件object
屬性attribute
方法method
瀏覽器browser


您可以繼續參考
HTML 5 範例

HTML 元素物件


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/Gecko_DOM_Reference
http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#semantics
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)