方法
add 向 areas, controlRange 或 options 集合中添加一個元素。 add 創建一個新的 namespace 對象並將其添加到集合中。 addBehavior 給元素附加一個行爲。 AddChannel 顯示一個對話框，答應用戶輸入指定的頻道，或當已安裝時更改頻道的 URL。 AddDesktopComponent 向 Microsoft® 活動桌面® 中添加 Web 站點或圖像。 AddFavorite 出現一個對話框提示用戶將指定的 URL 添加到收藏夾內。 addImport 爲指定樣式表向 imports 集合中添加樣式表。 addPageRule 爲樣式表創建新的 page 對象。 addReadRequest 向讀取需求隊列中添加項。 addRule 爲樣式表創建新規則。 alert 顯示包含由應用程序自定義消息的對話框。 appendChild 給對象追加一個子元素。 appendData 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
向對象末尾添加新的字符串。 applyElement 使得元素成爲其它元素的子元素或父元素。 assign 裝入新的 HTML 文檔。 attachEvent 將指定函數綁定到事件，以便每當該事件在對象上觸發時都調用該函數。 AutoCompleteSaveForm 將指定表單保存到自動完成數據存儲中。 AutoScan 通過完成模板傳遞指定查詢試圖連接到 Web 服務器。 back 從歷史列表中裝入前一個 URL。 blur 使元素失去焦點並觸發 onblur 事件。 ChooseColorDlg 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
打開系統顏色選擇對話框。 clear 清除選中區的內容。 clear 目前尚未支持。 clearAttributes 從對象中刪除全部標籤屬性和值。 clearData 通過 dataTransfer 或 clipboardData 對象從剪貼板刪除一種或多種數據格式。 clearInterval 使用 setInterval 方法取消先前開始的間隔事件。 clearRequest 清除讀取需求隊列中的全部需求，以便預備一個新的配置信息需求。 clearTimeout 取消先前用 setTimeout 方法設置的超時事件。 click 觸發 onclick 事件來模擬單擊。 cloneNode 從文檔層次中複製對對象的引用。 close 關閉當前瀏覽器窗口或 HTML 應用程序(HTA)。 close 關閉輸出流並強制將數據發送到顯示。 collapse 將插入點移動到當前範圍的開始或結尾。 compareEndPoints 比較 TextRange 對象的結束點和其它範圍的結束點。 componentFromPoint 通過特定事件返回對象在指定座標下的位置。 confirm 顯示一個確認對話框，其中包含一個可選的消息和確定取消按鈕。 contains 檢查對象中是否包含給定元素。 createAttribute 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
以指定名稱創建 attribute 對象。 createCaption 在表格中創建空的 caption 元素。 createComment 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
以指定數據創建 comment 對象。 createControlRange 創建一個非文本元素的 controlRange 集合。 createDocumentFragment 創建一個新文檔。 createElement 爲指定標籤創建一個元素的實例。 createEventObject 生成當使用 fireEvent 方法時用於傳遞事件相關信息的 event 對象。 createPopup 創建彈出窗口。 createRange 從當前文本選中區中創建 TextRange 對象，或從控件選中區中創建 controlRange 集合。 createRangeCollection 從當前選中區中創建一個 TextRange 對象。 createStyleSheet 爲文檔創建樣式表。 createTextNode 從指定值中創建文本字符串。 createTextRange 爲元素創建一個 TextRange 對象。 createTFoot 在表格中創建空的 tFoot 元素。 createTHead 在表格中創建空的 tHead 元素。 deleteCaption 從表格中刪除 caption 元素及其內容。 deleteCell 從表格行及 cells 集合中刪除指定單元格(td)。 deleteData 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
從對象中刪除指定範圍的字符。 deleteRow 從表格及 rows 集合中刪除指定行(tr)。 deleteTFoot 從表格中刪除 tFoot 元素及其內容。 deleteTHead 從表格中刪除 tHead 元素及其內容。 detachEvent 從事件中取消指定函數的綁定，這樣當事件觸發時函數就不會收到通知了。 doImport 動態導入元素行爲。 doReadRequest 執行所有位於讀取需求隊列中的需求。 doScroll 模擬對滾動條組件的單擊。 dragDrop 初始化拖曳事件。 duplicate 返回 TextRange 的副本。 elementFromPoint 返回指定 x 和 y 座標的元素。 empty 取消當前選中區，將選中區類型設置爲 none，將其 item 屬性設置爲 null。 execCommand 在當前文檔、當前選中區或給定範圍上執行命令。 execScript 以給定語言執行指定的腳本。 expand 擴展範圍以便完全包含指定單位的範圍。 findText 在文本中搜索文本並將範圍的開始和結束點設置爲包圍搜索字符串。 fireEvent 觸發對象的指定事件。 firstPage 顯示綁定表格的數據集的第一頁記錄。 focus 使得元素得到焦點並執行由 onfocus 事件指定的代碼。 forward 從歷史列表中裝入下一個 URL。 getAdjacentText 返回鄰接文本字符串。 getAttribute 獲取指定標籤屬性的值。 getAttribute 從 userProfile 對象中返回命名屬性的值。 getAttributeNode 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
獲取由 attribute.name 屬性引用的 attribute 對象。 getBookmark 獲取可用於使 moveToBookmark 返回相同範圍的書籤(白底字符串)。 getBoundingClientRect 獲取指定 TextRectangle 對象集合綁定的對象。 getClientRects 獲取描述對象內容或客戶區內佈局的矩形集合。每個矩形都描述了一條直線。 getData 通過 dataTransfer 或 clipboardData 對象從剪貼板獲取指定格式的數據。 getElementById 獲取對 ID 標籤屬性爲指定值的第一個對象的引用。 getElementsByName 根據 NAME 標籤屬性的值獲取對象的集合。 getElementsByTagName 獲取基於指定元素名稱的對象集合。 getExpression 獲取給定屬性的表達式。 getNamedItem 使用 attributes 集合獲取由 name 屬性指定的 attribute。 go 從歷史列表中裝入 URL。 hasChildNodes 返回表明對象是否有子對象的值。 hasFeature 返回表明對象是否實現了指定的文檔對象模型(DOM)標準的值。 hasFocus 獲取表明對象目前是否擁有焦點的值。 hide 關閉彈出窗口。 ImportExportFavorites 處理導入和導出 Microsoft® Internet Explorer® 收藏夾。 inRange 返回一個範圍是否被另一個範圍包含。 insertAdjacentElement 在指定位置插入元素。 insertAdjacentHTML 在指定位置的元素中插入給定的 HTML 文本。 insertAdjacentText 在指定位置插入給定的文本。 insertBefore 在文檔層次中插入元素作爲父對象的子結點。 insertCell 在表格行(tr)中創建新單元格，並將單元格添加到 cells 集合中。 insertData 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
在對象的指定偏移量處插入新字符串。 insertRow 在表格中創建新行(tr)，並將行添加到 rows 集合中。 isEqual 返回指定範圍是否與當前範圍相等。 IsSubscribed 獲取表明客戶是否訂閱了給定頻道的值。 item 從 all 集合或各種其它集合中獲取對象。 item 從 filters 集合或各種其它集合中獲取對象。 item 從 attributes 集合中獲取元素的標籤屬性。 item 從 behaviorUrns 集合中獲取對象。 item 從 namespaces 集合中獲取 namespace 對象。 item 從 rules 集合中獲取對象。 item 從 pages 集合中獲取對象。 item 從 controlRange 集合中獲取對象。 item 從 bookmarks 集合中獲取對象。 item 從 childNodes 或 children 集合中獲取對象。 item 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
獲取指定塊格式化標籤名稱的字符串。 javaEnabled 返回 Java 是否已啓用。 lastPage 顯示綁定表格的數據集的最後一頁記錄。 mergeAttributes 複製所有讀/寫標籤屬性到指定元素。 move 摺疊給定文本範圍並將空範圍移動給定單位數。 moveBy 將窗口的位置移動指定 x 和 y 偏移值。 moveEnd 更改範圍的結束位置。 moveRow 將表格行移動到新位置。 moveStart 更改範圍的開始位置。 moveTo 將窗口左上角的屏幕位置移動到指定的 x 和 y 位置。 moveToBookmark 移動到書籤。 moveToElementText 移動文本範圍以便範圍的開始和結束位置能夠完全包含給定元素的文本。 moveToPoint 將文本範圍的開始和結束位置移動到給定點。 namedItem 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
從指定集合中獲取對象或集合。 namedRecordset 獲取與來自於數據源對象(DSO)的命名數據成員相對應的記錄集對象。 navigate 在當前窗口中裝入指定 URL。 NavigateAndFind 前往指定的 URL 並選中指定文本。 nextPage 顯示綁定表格的數據集的下一頁記錄。 normalize 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
合併鄰接 TextNode 對象以便生成一個常規的文檔對象模型。 open 打開新窗口並裝入給定 URL 的文檔。 open 此方法以兩種方式工作。該方法打開一個文檔用於收集 write 和 writeln 方法的輸出。在這種情況下，只使用前兩個參數 url 和 name。若指定了附加參數，此方法將打開一個窗口，這與 window 對象的 window.open 方法相同。 parentElement 獲取給定文本範圍的父元素。 pasteHTML 將 HTML 文本粘貼入給定文本範圍，替換範圍內任何先前的文本和 HTML 元素。 previousPage 顯示綁定表格的數據集的上一頁記錄。 打印與窗口關聯的文檔。 prompt 顯示一個提示對話框，其中帶有一條消息和一個輸入框。 queryCommandEnabled 返回表明指定命令是否可於給定文檔當前狀態下使用 execCommand 命令成功執行的 Boolean 值。 queryCommandIndeterm 返回表明指定命令是否處於模糊狀態的 Boolean 值。 queryCommandState 返回表明命令當前狀態的 Boolean 值。 queryCommandSupported 返回表明當前命令是否在當前區域上支持的 Boolean 值。 queryCommandValue 返回文檔、範圍或當前選中區對於給定命令的當前值。 recalc 重新計算當前文檔中的全部動態屬性。 refresh 刷新表格中的內容。當調用 removeRule 這樣的方法後這可能是必需的，因爲此時頁面可能不會自動更新。 releaseCapture 釋放當前文檔中對象的鼠標捕捉。 reload 重新裝入當前頁面。 remove 從集合中刪除一個元素。 removeAttribute 刪除對象的給定標籤屬性。 removeAttributeNode 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
從對象中刪除刪除 attribute 對象。 removeBehavior 分離元素的行爲。 removeChild 從元素上刪除子結點。 removeExpression 從指定屬性中刪除表達式。 removeNamedItem 從使用 attributes 集合的元素中刪除帶有指定 name 屬性的 attribute 對象。 removeNode 從文檔層次中刪除對象。 removeRule 刪除 styleSheet 對象中的已有樣式規則，並調整對應 rules 集合的索引。 replace 裝入指定 URL 的另外文檔來替換當前文檔。 replaceAdjacentText 替換元素的鄰接文本。 replaceChild 用新的子元素替換已有的子元素。 replaceData 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
將對象中指定範圍的字符替換爲新字符串。 replaceNode 用其它元素替換對象。 reset 模擬單擊對所調用表單重置按鈕的單擊。 resizeBy 更改窗口的當前位置縮放指定的 x 和 y 偏移量。 resizeTo 將窗口的大小更改爲指定的寬度和高度值。 scroll 將窗口滾動到自左上角起指定的 x 和 y 偏移量。 scrollBy 將窗口滾動 x 和 y 偏移量。 scrollIntoView 將對象滾動到可見範圍內，將其排列到窗口頂部或底部。 scrollTo 將窗口滾動到指定的 x 和 y 偏移量。 select 突出顯示錶單元素的輸入區域。 select 將當前選中區置爲當前對象。 setActive 設置對象爲當前對象而不將對象置爲焦點。 setAttribute 設置指定標籤屬性的值。 setAttributeNode 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
設置 attribute 對象爲對象的一部分。 setCapture 設置屬於當前文檔的對象的鼠標捕捉。 setData 以指定格式給 dataTransfer 或 clipboardData 對象賦予數據。 setEndPoint 根據其它範圍的結束點設置某範圍的結束點。 setExpression 設置指定對象的表達式。 setInterval 每經過指定毫秒值後計算一個表達式。 setNamedItem 向使用 attributes 集合的元素中添加一個 attribute 對象。 setTimeout 經過指定毫秒值後計算一個表達式。 show 在屏幕上顯示彈出窗口。 ShowBrowserUI 打開指定的瀏覽器對話框。 showHelp 顯示幫助文件。此方法可用於 Microsoft HTML 幫助。 showModalDialog 創建一個顯示指定 HTML 文檔的模式對話框。 showModelessDialog 創建一個顯示指定 HTML 文檔的非模式對話框。 splitText 在指定索引處分割文本結點。 start 開始滾動字幕。 stop 停止字幕的滾動。 submit 提交表單。 substringData 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
從對象中析取一定範圍的字符。 swapNode 交換文檔層次中兩個對象的位置。 tags 擁有指定 HTML 標籤名稱的對象集合。 taintEnabled 返回是否答應數據污點。 urns 獲取附加了指定行爲的全部對象的集合。 write 在指定窗口的文檔中寫入一個或多個 HTML 表達式。 writeln 在指定窗口的文檔中寫入一個或多個 HTML 表達式，後面追加一個換行符。
550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" />
DHTML 中重要的屬性方法
其實DOM教給我們的就是一個層次結構，你可以理解爲一個樹形結構，就像我們的目錄一樣，一個根目錄，根目錄下有子目錄，子目錄下還有子目錄……
根節點：
DOM把層次中的每一個對象都稱之爲節點（NODE），以HTML超文本標記語言爲例：整個文檔的一個根就是<html>,在DOM中可以使用document.documentElement來訪問它，它就是整個節點樹的根節點（ROOT）
子節點：
一般意義上的節點，根節點以下最大子節點就是主文檔區<body>了，要訪問到body標籤，在腳本中應該寫：
document.body
body區以內所有的文本及HTML標籤都是文檔的節點，分別稱爲文本節點、元素節點（或者叫標籤節點），大家知道HTML說到底只是文本而矣，不論怎麼樣的網頁必然由這兩個節點組成，也只能由這兩個節點組成
節點之間的關係：
節點之間的關係也是DOM中最重要的一個關節，如何正確地引用到節點對象，一定要清楚節點樹各個節點的相互描述方式，在DHTML裏，Javascript腳本就用了各個節點對象的一整套方法和屬性去描述另外的節點對象。
節點的絕對引用：
返回文檔的根節點
document.documentElement
返回當前文檔中被擊活的標籤節點
document.activeElement
返回鼠標移出的源節點
event.fromElement
返回鼠標移入的源節點
event.toElement
返回激活事件的源節點
event.srcElement
節點的相對引用：(設當前對節點爲node)
返回父節點
node.parentNode
node.parentElement
返回子節點集合（包含文本節點及標籤節點）
node.childNodes
返回子標籤節點集合
node.children
返回子文本節點集合
node.textNodes
返回第一個子節點
node.firstChild
返回最後一個子節點
node.lastChild
返回同屬下一個節點
node.nextSibling
返回同屬上一個節點
node.previousSibling
節點的各種操作：(設當前的節點爲node)
新增標籤節點句柄：
document.createElement(sNode) //參數爲要新添的節點標籤名，例：newnode=document.createElement("div");
1、添加節點：
追加子節點：
node.appendChild(oNode) //oNode爲生新增的節點句柄,例：node.appendChild(newnode)
應用標籤節點
node.applyElment(oNode,sWhere)//oNode爲生新增的節點句柄,sWhere有兩個值：outside / inside，加在當前節點外面還是裏面
插入節點
inode.insertBefore()
node.insertAdjacentElement()
node.replaceAdjacentText()
2、修改節點：
刪除節點
node.remove()
node.removeChild()
node.removeNode()
替換節點
node.replaceChild()
node.replaceNode()
node.swapNode()
2、複製節點：
返回複製複製節點引用
node.cloneNode(bAll)//bAll爲布爾值，true / false 是否克隆該節點所有子節點
3、節點信息
是否包含某節點
node.contains()
是否有子節點
node.hasChildNodes()
DHTML對象
!DOCTYPE 指定了 HTML 文檔遵循的文檔類型定義(DTD)。 a 標明超鏈接的起始或目的位置。 acronym 標明縮寫詞。 address 特定信息，如地址、簽名、作者、此文檔的原創者。 applet 在頁面上放置可執行內容。 area 定義一個客戶端圖像映射中一個超級鏈接區域的形狀、座標和關聯 URL。 attribute 以對象的形式代表了 HTML 元素的標籤屬性或屬性。 b 指定文本應以粗體渲染。 base 指定一個顯示 URL 用於解析對於外部源的鏈接和引用，如圖像和樣式表。 baseFont 設置渲染文本時作爲缺省字體的基礎字體值。 bdo 允許作者爲選定文本片斷禁用雙向法則。 bgSound 允許頁面帶有背景聲音或創建音軌。 big 指定內含文本要以比當前字體稍大的字體顯示。 blockQuote 設置文本中的一段引語。 body 指定文檔主體的開始和結束。 br 插入一個換行符。 button 指定其中所含的 HTML 要被渲染爲一個按鈕。 caption 指定表格的簡要描述。 center 將後面的文本和圖像居中顯示。 cite 用斜體顯示標明引言。 clientInformation 包含關於 Web 瀏覽器的信息。 clipboardData 提供了對於預定義的剪貼板格式的訪問，以便在編輯操作中使用。 code 指定代碼範例。 col 指定基於列的表格缺省屬性。 colGroup 指定表格中一列或一組列的缺省屬性。 comment 標明不可見的註釋。 currentStyle 代表了在全局樣式表、內嵌樣式和 HTML 標籤屬性中指定的對象格式和樣式。 custom 代表了一個用戶自定義元素。 dataTransfer 提供了對於預定義的剪貼板格式的訪問，以便在拖曳操作中使用。 dd 在定義列表中表明定義。定義通常在定義列表中縮進。 defaults 編程設定元素行爲的缺省屬性。 del 表明文本已經從文檔中刪除。 dfn 表明術語的定義實例。 對話框幫助協助程序 提供對顏色對話框及塊格式化和字體集合的訪問。 dir 引起目錄列表。 div 指定渲染 HTML 的容器。 dl 引起定義列表。 document 代表給定瀏覽器窗口中的 HTML 文檔。 dt 在定義列表中表明定義術語。 em 強調文本，通常以斜體渲染。 embed 允許嵌入任何文檔。 event 代表事件狀態，如事件發生的元素，鍵盤狀態，鼠標位置和鼠標按鈕狀態。 external 允許訪問由 Microsoft® Internet Explorer 瀏覽器組件宿主應用程序提供的附加對象模型。 fieldSet 在字段集包含的文本和其它元素外面繪製一個方框。 font 指定用於渲染所包含文本的新字體、大小和顏色。 form 指定所包含控件在表單中起作用。 frame 在 FRAMESET 元素內指定單個框架。 frameSet 指定一個框架集，用於組織多個框架和嵌套框架集。 head 提供了關於文檔的無序信息集合。 history 包含了用戶已瀏覽的 URL 的信息。 hn 以標題樣式渲染文本。 hr 繪製水平線。 html 表明文檔包含 HTML 元素。 HTML 註釋 避免任何內含文本或 HTML 源代碼被處理並在瀏覽器窗口中顯示。 i 指定文本應以斜體渲染，若可用的話。 iframe 創建內嵌浮動框架。 img 在文檔中嵌入圖像或視頻剪輯。 implementation 包含了關於對象支持的模塊信息。 IMPORT 從元素行爲中導入標籤定義。 input 創建各種表單輸入控件。 input type=button 創建按鈕控件。 input type=checkbox 創建複選框控件。 input type=file 創建文件上載控件，該控件帶有一個文本框和一個瀏覽按鈕。 input type=hidden 傳輸關於客戶/服務器交互的狀態信息。 input type=image 創建一個圖像控件，該控件單擊後將導致表單立即被提交。 input type=password 創建與 INPUT type=text 控件類似的單行文本輸入控件，不過其中並不顯示用戶輸入的內容。 input type=radio 創建單選鈕控件。 input type=reset 創建一個按鈕，該按鈕單擊後將重置表單控件爲其缺省值。 input type=submit 創建一個按鈕，該按鈕單擊後將提交表單。 input type=text 創建一個單行的文本輸入控件。 ins 指定被插入到文檔中的文本。 isIndex 使瀏覽器顯示一個對話框，提示用戶輸入單行文本。 kbd 以固定寬度字體渲染文本。 label 爲頁面上的其它元素指定標籤。 legend 在 fieldSet 對象繪製的方框內插入一個標題。 li 引起列表中的一個項目。 link 允許當前文檔和外部文檔之間建立連接。 listing 以固定字體渲染文本。 location 包含關於當前 URL 的信息。 map 包含客戶端圖像映射的座標數據。 marquee 創建一個滾動的文本字幕。 menu 創建一個項目的無序列表。 meta 向服務器和客戶端傳達關於文檔的隱藏信息。 namespace 向文檔中動態導入一個元素行爲。 navigator 包含關於 Web 瀏覽器的信息。 nextID 創建編輯軟件可以讀取的唯一標識符。 noBR 不換行渲染文本。 noFrames 包含對於那些不支持 FRAMESET 元素的瀏覽器使用的 HTML。 noScript 指定要在不支持腳本的瀏覽器顯示的 HTML。 object 向 HTML 頁面中插入對象。 ol 繪製文本的編號列表。 optGroup 允許作者對 select 元素中的選項進行邏輯分組。 option 引起 SELECT 元素中的一個選項。 p 引起一段。 page 代表 styleSheet 中的一條 @page 規則。 param 設置 APPLET、EMBED 或 OBJECT 元素的屬性初始值。 plainText 以固定寬度字體渲染文本，不處理標籤。 popup 一種特殊的頂層窗口，主要用於出現在應用程序主窗口之外的對話框、消息框和其它臨時窗口。 pre 以固定寬度字體渲染文本。 q 分離文本中的引語。 rt 指明 RUBY 元素的注音文本。 ruby 指明要放置在文本串之上或內嵌的註解或發音指南。 rule 代表了層疊樣式表(CSS)中由選擇符和一個或多個聲明組成的的樣式。 runtimeStyle 代表了居於全局樣式表、內嵌樣式和 HTML 標籤屬性指定的格式和樣式之上的對象的格式和樣式。 s 以刪除線字體渲染文本。 samp 指定代碼範例。 screen 包含關於客戶屏幕和渲染能力的信息。 script 爲腳本指定由腳本引擎解釋的腳本。 select 引起列表框或下拉框。 selection 代表了當前激活選中區，即高亮文本塊，和/或文檔中用戶可執行某些操作的其它元素。 small 指定內含文本要以比當前字體稍小的字體顯示。 span 指定內嵌文本容器。 strike 以刪除線字體渲染文本。 strong 以粗體渲染文本。 style 代表了給定元素所有可能的內嵌樣式的當前設置。 style 指定頁面的樣式表。 styleSheet 代表了文檔中單一的樣式表。 sub 指定內含文本要以下標的形式顯示，通常比當前字體稍小。 sup 指定內含文本要以上標的形式顯示，通常比當前字體稍小。 table 指定所含內容要組織成行列的表格。 tBody 指明行作爲表格主體。 td 指定表格中的單元格。 textArea 指定多行文本輸入控件。 TextNode 將文本字符串代表爲文檔層次中的結點。 TextRange 代表 HTML 元素中的文本。 TextRectangle 指定包含元素或 TextRange 對象中一行文本的矩形。 tFoot 指明行作爲表尾。 th 指定標題列。標題列將在單元格中居中並以粗體顯示。 tHead 指明行作爲表頭。 title 包含文檔的標題。 tr 指定表格中的一行。 tt 以固定寬度字體渲染文本。 u 帶下劃線渲染文本。 ul 繪製文本的項目符號列表。 userProfile 提供了允許腳本對用戶配置信息請求讀取訪問並執行讀取操作的方法。 var 定義編程變量。通常以斜體渲染。 wbr 向一塊 NOBR 文本中插入軟換行。 window 代表瀏覽器中一個打開的窗口。 xml 在 HTML 頁面上定義一個 XML 數據島。 xmp 以固定寬度字體渲染作爲示例的字體。
DHTML方法基礎 - 對DIV的一些簡單控制
<html>
<head>
<style type="text/css">
#d1 {
position: absolute;
width: 300px;
height: 300px;
visibility: hidden;
color: #fff;
background: #555;
}
#d2 {
position: absolute;
width: 300px;
height: 300px;
visibility: hidden;
color: #fff;
background: #777;
}
#d3 {
position: absolute;
width: 150px;
height: 150px;
visibility: hidden;
color: #fff;
background: #999;
}
</style>
<script>
var d1, d2, d3, w, h;
window.onload = function() {
d1 = document.getElementById('d1');
d2 = document.getElementById('d2');
d3 = document.getElementById('d3');
back();
w = window.innerWidth;
h = window.innerHeight;
resizeCheck();
}
function resizeCheck() {
if (w != window.innerWidth || h != window.innerHeight) {
location.replace(location.href);
return;
}
setTimeout("resizeCheck()", 1000);
}
function back() {
divMoveTo(d1,200,50);
divMoveTo(d2,250,75);
divMoveTo(d3,75,75);
divZIndex(d1,1);
divZIndex(d2,2);
divZIndex(d3,3);
divBgColor(d1,'#555');
divBgColor(d2,'#777');
divBgColor(d3,'#999');
divTxtColor(d1,'#fff');
divTxtColor(d2,'#fff');
divTxtColor(d3,'#fff');
divShow(d1);
divShow(d2);
divShow(d3);
}
function color() {
divBgColor(d1,'#f02d2d');
divBgColor(d2,'#f040d1');
divBgColor(d3,'#55afe0');
divTxtColor(d1,'#fff');
divTxtColor(d2,'#fff');
divTxtColor(d3,'#fff');
}
function divMoveTo(d, x, y) {
d.style.pixelLeft = x;
d.style.pixelTop = y;
}
function divMoveBy(d, dx, dy) {
d.style.pixelLeft += dx;
d.style.pixelTop += dy;
}
function divShow(d) {
d.style.visibility = 'visible';
}
function divHide(d) {
d.style.visibility = 'hidden';
}
function divSizeTo(d, w, h) {
d.style.pixelWidth = w;
d.style.pixelHeight = h;
}
function divSizeBy(d, dw, dh) {
d.style.pixelWidth += dw;
d.style.pixelHeight += dh;
}
function divZIndex(d, z) {
d.style.zIndex = z;
}
function divBgColor(d, c) {
d.style.background = c;
}
function divTxtColor(d, c) {
d.style.color = c;
}
</script>
</head>
<body id="bodyId">
<form name="form1">
<h3>DHTML方法基礎 - 對DIV的一些簡單控制 BY 51js zdzhuo</h3>
<p>
<input type="button" value="移動d2" οnclick="divMoveBy(d2,10,10)"><br>
<input type="button" value="移動d3到d2(0,0)" οnclick="divMoveTo(d3,0,0)"><br>
<input type="button" value="移動d3到d2(75,75)" οnclick="divMoveTo(d3,75,75)"><br>
</p>
<p>
<input type="button" value="放大d1" οnclick="divSizeBy(d1,15,15)"><br>
<input type="button" value="縮小d1" οnclick="divSizeBy(d1,-15,-15)"><br>
</p>
<p>
<input type="button" value="隱藏d2" οnclick="divHide(d2)"><br>
<input type="button" value="顯示d2" οnclick="divShow(d2)"><br>
</p>
<p>
<input type="button" value="優先顯示d1" οnclick="divZIndex(d1,2);divZIndex(d2,1)"><br>
<input type="button" value="優先顯示d2" οnclick="divZIndex(d1,1);divZIndex(d2,2)"><br>
</p>
<p>
<input type="button" value="填充顏色" οnclick="color()"><br>
</p>
<p>
<input type="button" value="返回默認狀態" οnclick="back()"><br>
</p>
</form>
<div id="d1">
<b>d1</b>
</div>
<div id="d2">
<b>d2</b><br><br>
d2包含d3
<div id="d3">
<b>d3</b><br><br>
d3是d2的子層
</div>
</div>
</body>
</html>
此外，我們還可使用insertAdjacentHTML和insertAdjacentText方法（方法即是某特定對象能直接調用的函數）在先前文本或Html內容的前邊或後邊插入新的文
本或Html內容，使用這些方法需要參數，這些參數有：BeforeBegin、
AfterBegin、 BeforeEnd和AfterEnd，它們是用來標明文本或Html插入的地方。具體用法如下例：
使用insertAdjacentHTML插入文本
<html>
<head>
<title>DHtml舉例14</title>
<style>
<!--
body {font-family:"宋體";color="blue";font-size:"9pt"}
-->
</style>
<script
language="JavaScript">
function Insert()
{
document.all.New.insertAdjacentHTML("AfterBegin","<font color=red>新插入的內容<font>");
//第一個參數是用來指明位置，第二個參數是要插入的Html內容。
}
</script>
</head>
<body>
<p><br></p>
<p id="New" οnclick="Insert()">點擊此行藍色文字將插入文本</p>
</body>
</html>
您可以試一下另外三個參數BeforeBegin、BeforeEnd和AfterEnd。insertAdjacentText方法地用法也是類似的。
Dhtml實例教程（十一）
今天我們開始使用圖像了。圖像在網頁製作重視非常重要的一部分，如果沒有圖像，網頁將變得很單調乏味。我們這裏並不是單純地用<img src="……"
alt="……">Html標誌在網頁中嵌入圖像，而是要使圖像具有動態性。例15是一個比較簡單的例子，關鍵是改變<img src="……" alt="……">Html標誌中的src屬
性。
例15 動態改變圖像
<html>
<head>
<title>DHtml舉例15</title>
</head>
<body>
<p><br>
<font style="font-size:9pt" color="blue">在下邊圖形上移動鼠標可以改變圖象</font>
</p>
<img style="cursor:hand" οnmοuseοver="this.src='boom2.gif'" οnmοuseοut="this.src='boom1.gif'" src="boom1.gif">
</body>
</html>
（注意:此例中的圖像文件保存在與該HTML文檔相同的目錄下,因爲HTML可以使用相對目錄,所以src屬性後邊直接跟圖像的文件名）
下邊我們結合上一個教程中使用過的innerHTML屬性和insertAdjacentHTML方法來動態改變頁面。例16是一道選擇題，當您選擇正確時會顯示“笑臉”圖像，而當
您選擇錯誤時將會顯示“愁眉苦臉”圖像。
例16 一道動態的選擇題
<html>
<head>
<title>DHtml舉例16</title>
<style>
<!--
body {font-size:9pt}
ul {cursor:hand;color:blue;font-size:9pt}
.none {color:blue;text-decoration:none}
.underline {color:red;text-decoration:underline}
-->
</style>
<script language="JavaScript">
function ImgAppear(imgfile){
//此函數用於顯示圖像
if(imgfile=="good.gif")
{
Img.innerHTML=""; //清空Img對象中的所有Html
Img.insertAdjacentHTML("AfterBegin","<img src="+imgfile+"><br>答對了!"); //在對象Img中插入圖像的Html標誌
}
else
{
Img.innerHTML="";
Img.insertAdjacentHTML("AfterBegin","<img src="+imgfile+"><br>答錯了!");}
}//function
function Start(){
//此函數用於“重新開始”的操作
Img.innerHTML="";
}//function
</script>
</head>
<body>
<p><br>
<font color="gray">98-99賽季歐洲冠軍盃得主是哪支球隊（請用鼠標點擊選擇項）：</font> </p>
<table width="100%">
<tr>
<td width="233"><ul class="none">
<li οnmοuseοver="this.className='underline'" οnmοuseοut="this.className='none'"
οnclick="ImgAppear('bad.gif')">多 特 蒙 德 隊 </li>
<li οnmοuseοver="this.className='underline'" οnmοuseοut="this.className='none'"
οnclick="ImgAppear('bad.gif')">尤 文 圖 斯 隊 </li>
<li οnmοuseοver="this.className='underline'" οnmοuseοut="this.className='none'"
οnclick="ImgAppear('good.gif')">曼 徹 斯 特 聯 隊 </li>
<li οnmοuseοver="this.className='underline'" οnmοuseοut="this.className='none'"
οnclick="ImgAppear('bad.gif')">皇 家 馬 德 裏 隊 </li>
<li οnmοuseοver="this.className='underline'" οnmοuseοut="this.className='none'"
οnclick="ImgAppear('bad.gif')">巴 塞 羅 那 隊 </li>
<li οnmοuseοver="this.className='underline'" οnmοuseοut="this.className='none'"
οnclick="Start()"><font color="gray">重 新 開 始 </font></li>
</ul>
</td>
<td width="520" id="Img"></td>
</tr>
</table>
</body>
</html>
Dhtml實例教程（十二）
對於Html的<div></div>標誌對，您可能使用的甚少，當它在動態Html的設計中卻非常有用，我們可以用它的樣式屬性中的position屬性來定義文本顯示位置的方
式，包括相對位置（position:"relative"）和絕對位置（position:"absolute"），然後在用樣式屬性中的top、left、heigh、width屬性我們先來確定文本顯示
的位置。很多書上把對<div></div>標誌對的控制叫做對“層”的控制。下面是一個簡單的舉例。
例17 重疊兩行文本而得到的陰影效果
<html>
<head>
<title>DHtml舉例17</title>
<style>
<!--
body {font-size:9pt}
.redtext {color:red;position:absolute;top:100;left:100;}
.graytext {color:gray;position:absolute;top:101;left:102;}
-->
</style>
</head>
<body>
<p><br>
</p>
<div class="graytext"><b>您最喜歡製作主頁嗎？</b></div>
<div class="redtext"><b>您最喜歡製作主頁嗎？</b></div>
</body>
</html>
和以前的教程中介紹的其它樣式單的屬性相似，我們同樣可以用JavaScript來對<div></div>標誌對中的文本進行動態控制。下面的例子將使文本在屏幕上移動。
例18 文本在屏幕中移動
<html>
<head>
<title>DHtml舉例18</title>
<style><!--
body {font-size:9pt}
.move {cursor:hand;position:absolute;visibility:hidden;height:60;width:60;color:yellow;border:blue 1px solid;background-color:rgb(147,0,0);}
-->
</style>
<script language="JavaScript">
var all=document.all;
var flag=1;//變量flag用來控制“執行或終止執行函數Move()”
var act;
var xhd=0;//變量xhd爲信號燈，用於控制“層”的移動方向
function MoveStamp(){
all.stamp.style.top=document.body.offsetTop;//對象stamp的top屬性等於對象body的offsetTop值
all.stamp.style.left=document.body.offsetLeft;
all.stamp.style.visibility = "visible";
if(flag==1)
{
act = window.setInterval("Move()",50);//執行函數Move()
flag=0;
}
else
{
window.clearInterval(act);//終止執行函數Move()
all.stamp.style.visibility = "hidden";//隱藏對象stamp
flag=1;
}//if
}//function
function Move(){
if(all.stamp.style.pixelLeft>=document.body.offsetLeft+350) xhd=1;
if(all.stamp.style.pixelLeft<=document.body.offsetLeft) xhd=0;
if(xhd==0)
{
//對象stamp往右下方移動
all.stamp.style.pixelLeft+=5;
all.stamp.style.pixelTop+=5;
}
else
{
//對象stamp往左上方移動
all.stamp.style.pixelLeft-=5;
all.stamp.style.pixelTop-=5;
}//if
}//function
</script>
</head>
<body οnclick="MoveStamp()">
<p align="center">用鼠標單擊一下會有效果出現，再單擊一下則效果消失，如此反覆……</p>
<div id="stamp" class="move"><p valign="middle" align="center"><br><b>我要在天空中飛翔<b></p></div>
</body>
</html>
語句act = window.setInterval("Move()",50)調用了JavaScript本身具有的函數，它用於在間隔特定時間後（本例中爲50毫秒）執行特定的函數（本例中爲
Move()函數），然後將返回值賦給一個變量（本例中爲變量act），要想終止此特定函數的執行，用語句window.clearInterval(act)即可。此例是一個很不錯的
例子，希望您能仔細閱讀，以便以後編寫動態網頁時能夠得心應手。
Dhtml實例教程（十三）
哈哈，今天又有新的東西介紹給您，您知道過濾器（filter）嗎？如果您經常使用圖形軟件（如PhotoShop等），那您肯定有所瞭解。過濾器可以用來對可見對象
進行過濾以達到各種動態的效果。CSS擁有擴充的過濾器，我們可以將它與動態HTML相結合，製造出各種動態效果。有些書上將它稱爲“過渡”，它是IE4.0動態
HTML技術的一部分。對於所有可視化的對象，我們都可以使用過渡的方法將它從一種狀態轉換爲另一種狀態，並且這種轉換過程在瀏覽器重視可以清楚看到的。
HTML4.0有兩種類型的過渡過濾器：Blend和Reveal。
Blend過渡可以在指定的時間間隔內實現圖像的簡單淡出和淡入，基本句型爲：
style="filter:blendTrans(Duration=過渡的時間)"//過渡時間的單位爲"秒"
而Reveal過渡可以通過使用不同的技術選擇地顯示或隱藏圖像，它的效果有很多，基本句型是：
style="filter:revealTrans(Duration=過渡的時間,Transition=過渡的類型)"//過渡時間的單位爲"秒",Transition的取值範圍是0～23
下面就是一個用Blend過濾圖像的例子。
例19 圖像自動交替地淡出
<html>
<head>
<title>DHtml舉例19</title>
<style>
<!--
body {font-size:9pt}
-->
</style>
<script language="JavaScript">
var flag=0;
//全局變量flag用來控制繪出的圖象；flag=0時繪出圖象lkjx2.jpg，而flag=1時則繪出lkjx1.jpg
var act;
function Change(){
act=window.setInterval("AutoChange()",9500);//每隔9.5秒鐘執行函數AutoChange()
}//function
function AutoChange(){
if(flag==0)
{
flag=1;
Img.filters.blendTrans.Apply(); //用Apply方法停止原圖象的繪出
Img.src = "lkjx2.jpg"; //將Img設置成另一幅圖象jklx2.jpg
Img.filters.blendTrans.Play(); //用Play方法調用過濾器的淡出效果
}
else
{
flag=0;
Img.filters.blendTrans.Apply();
Img.src = "lkjx1.jpg";
Img.filters.blendTrans.Play();
}//if
}//function
</script>
</head>
<body οnlοad="Change()">
<img id="Img" src="lkjx1.jpg" alt="會變換的圖象！" style="filter:blendTrans(duration=7)">
</body>
</html>
act=window.setInterval("AutoChange()",9500)設置的時間（9.5秒）一定要比style="filter:blendTrans(duration=7)"設置的時間（7秒）長，否則將產生腳
本語言出錯。
既然Reveal有24種之多的過渡效果，我們就不妨試試看。
例20 Reveal過渡過濾器的24中動態效果
<html>
<head>
<title>DHtml舉例19</title>
<style>
<!--
img.i1 {
width:100;
height:230;
}
-->
</style>
<script language="JavaScript">
var shape=0;//變量shape用來存儲transition的數值，即動態效果的類型
var flag=0;
//全局變量flag用來控制繪出的圖象；flag=0時繪出圖象lkjx2.jpg，而flag=1時則繪出lkjx1.jpg
var act;
function ChangeImg(){
act=window.setInterval("ChangeShape()",7500);//每隔7.5秒鐘執行函數ChangeShape()
}//function
function ChangeShape(){
if(shape==24) shape=0; //因爲transition的值在0～23之間，故不能讓它超過23
if(flag==0)
{
Insert.innerHTML="<img id='Shp' src='image/sunset.jpg' class=i1 style='filter:revealTrans(duration=6,transition="+shape+")'><br>這是
transition="+shape+"時的效果";
Shp.filters.item(0).Apply(); //用Apply方法停止原圖象的繪出
Shp.src='image/spac001.jpg'
Shp.filters.item(0).Play(); //用Play方法調用過濾器的動態效果
flag=1;
}
else
{
Insert.innerHTML="<img id='Shp' src='lkjx2.jpg' class=i1 style='filter:revealTrans(duration=6,transition="+shape+")'><br>這是
transition="+shape+"時的效果";
Shp.filters.item(0).Apply(); //用Apply方法停止原圖象的繪出
Shp.src='lkjx1.jpg'
Shp.filters.item(0).Play(); //用Play方法調用過濾器的動態效果
flag=0;
}//if
shape++; //shape自身加1
}//function
</script>
</head>
<body οnlοad="ChangeImg()">
<p id="Insert"><img id="Shp" src="lkjx1.jpg" alt="會變換的圖象！" style="filter:revealTrans(duration=6,transition=00)"></p>
</body>
</html>
Dhtml實例教程（十四）
除了前邊我所講的那些動態效果外，動態HTML還可以顯示時間，或通過時間來進行動態的設計交互式網頁。具體步驟如下：
通過調用函數Date()和關鍵字new創建一個時間對象，如語句：today=new Date();將創建時間對象today；
利用這個時間對象的getYear、getMouth、getDate、getDay、getHours、getMinutes和getSeconds等方法得到時間；
利用得到的時間進行判斷和相應的操作；
在HTML文檔中輸出結果。
下面是一個顯示當日的年份、月份和星期的簡單例子。
例21 顯示當天的年月日和星期
<html>
<head>
<title>DHtml舉例21</title>
<style><!--
body {font-size:9pt;color:blue}
</style>
<script language="JavaScript">
var today;
var day;
var date;
today=new Date(); //此語句通過調用函數Date()和關鍵字new將today變成了一個時間對象
//通過時間對象today的getDay方法確定星期幾，並將相應的字符串賦給變量day
if(today.getDay()==0) day="星期日 ";
if(today.getDay()==1) day="星期一 ";
if(today.getDay()==2) day="星期二 ";
if(today.getDay()==3) day="星期三 ";
if(today.getDay()==4) day="星期四 ";
if(today.getDay()==5) day="星期五 ";
if(today.getDay()==6) day="星期六 ";
//變量date用於存儲年月日
date="今天是19"+(today.getYear())+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日 ";
//在HTML文檔中輸出"年月日"和"星期"
document.write(date);
document.write(day);
</script>
</head>
<body>
</body>
</html>
我們還可以通過獲得時間判斷是上午、下午或是晚上，然後相應的在網頁中輸出問候語：“早上好”、“下午好”或“晚上好”。
例22 給您一個問候
<html>
<head>
<title>DHtml舉例22</title>
<style><!--
body {font-size:9pt;color:blue}
</style>
<script language="JavaScript">
var today;
var hello;
today=new Date(); //此語句通過調用函數Date()和關鍵字new將today變成了一個時間對象
//通過對象today的getHours方法確定時間是商務、下午還是晚上，並將相應的問候語字符串賦給變量hello
if(today.getHours()<=12) hello="早上好! ";
if(12<today.getHours()<=18) hello="下午好! ";
if(today.getHours()>18) hello="晚上好! ";
//在HTML文檔中輸出當前的具體時間
document.write(hello);
document.write("現在是"+today.getHours()+":"+today.getMinutes()+":"+today.getSeconds()+"。");
</script>
</head>
<body>
</body>
</html>