HTML DOM 實例
Document 對象
返回文檔中錨的數目
document.write(document.anchors.length);//document會覆蓋原網頁
返回文檔中第一個錨的 innerHTML
document.write(document.anchors[0].innerHTML);
返回文檔中表單的數目
document.write(document.forms.length);
返回文檔中第一個表單的名字
document.write(document.forms[0].name);
返回文檔中的圖像數
document.write(document.images.length);
返回文檔中第一個圖像的ID
document.write(document.images[0].id);
返回文檔中的鏈接數
document.write(document.links.length);
返回文檔中的第一個鏈接的ID
document.write(document.links[0].id);
返回文檔中的所有cookies的名稱/值對
document.write(document.cookie);
返回加載的文檔的服務器域名
document.write(document.domain);
返回文檔的最後一次修改時間
document.write(document.lastModified);
返回加載的當前文檔的URL
document.write(document.referrer);
返回文檔的標題
document.write(document.title);
返回文檔的完整的URL
document.write(document.URL);
打開輸出流，向流中輸入文本??????
<script> function createDoc(){ var doc=document.open("text/html","replace"); var txt="<!DOCTYPE html><html><body>學習 HTML DOM 很有趣!</body></html>"; doc.write(txt); doc.close(); } </script> </head> <body> <input type="button" value="新文檔" onclick="createDoc()"> </body>
write() 和 writeln()的不同
writeln()方法在每個語句後面新增一行
用指定的ID彈出一個元素的innerHTML
<head> <script> function getValue(){ var x=document.getElementById("myHeader"); alert(x.innerHTML); } </script> </head> <body> <h1 id="myHeader" onclick="getValue()">點擊我!</h1> </body>
用指定的Name彈出元素的數量
function getElements(){ var x=document.getElementsByName("x"); alert(x.length); } </script> </head> <body> 貓: <input name="x" type="radio" value="貓"> 狗: <input name="x" type="radio" value="狗"> <input type="button" onclick="getElements()" value="多少名稱為 ‘x‘的元素?">
用指定的tagname彈出元素的數量
<script> function getElements(){ var x=document.getElementsByTagName("input"); alert(x.length); } </script> </head> <body> <input type="text" size="20"><br> <input type="text" size="20"><br> <input type="text" size="20"><br><br> <input type="button" onclick="getElements()" value="多少input元素?"> </body>
Anchor 對象
返回和設置鏈接的charset屬性
返回和設置鏈接的href屬性
返回和設置鏈接的hreflang屬性
返回一個錨的名字
返回當前的文件和鏈接的文檔之間的關系
改變鏈接的target屬性
返回一個鏈接的type屬性的值
Area 對象
返回圖像映射某個區域的替代文字
返回圖像映射某個區域的坐標
返回一個區域的href屬性的錨部分
返回的主機名：圖像映射的某個區域的端口
返回圖像映射的某個區域的hostname
返回圖像映射的某個區域的port
返回圖像映射的某個區域的href
返回圖像映射的某個區域的pathname
返回圖像映射的某個區域的protocol
返回一個區域的href屬性的querystring部分
返回圖像映射的某個區域的shape
返回圖像映射的某個區域的target的值
Base 對象
返回頁面上所有相對URL的基URL
返回頁面上所有相對鏈接的基鏈接
Button 對象
當點擊完button不可用
返回一個button的name
返回一個button的type
返回一個button的value
返回一個button所屬表的ID
Form 對象
返回一個表單中所有元素的value
返回一個表單acceptCharset屬性的值
返回一個表單action屬性的值
返回表單中的enctype屬性的值
返回一個表單中元素的數量
返回發送表單數據的方法
返回一個表單的name
返回一個表單target屬性的值
重置表單
提交表單
Frame/IFrame 對象
對iframe排版
改變一個包含在iframe中的文檔的背景顏色
返回一個iframe中的frameborder屬性的值
刪除iframe的frameborder
改變iframe的高度和寬度
返回一個iframe中的longdesc屬性的值
返回一個iframe中的marginheight屬性的值
返回一個iframe中的marginwidth屬性的值
返回一個iframe中的name屬性的值
返回和設置一個iframe中的scrolling屬性的值
改變一個iframe的src
Image 對象
對image排版
返回image的替代文本
給image加上border
改變image的高度和寬度
設置image的hspace和vspace屬性
返回image的longdesc屬性的值
創建一個鏈接指向一個低分辨率的image
返回image的name
改變image的src
返回一個客戶端圖像映射的usemap的值
Event 對象
哪個鼠標鍵被點擊了？
被按下的鍵盤鍵的keycode？
鼠標的坐標？
鼠標相對於屏幕的坐標？
shift鍵被按下了嗎？
哪個元素被按下了？
哪個事件發生了？
Option 和 Select 對象
禁用和啟用下拉列表
獲得有下拉列表的表單的ID
獲得下拉列表的選項數量
將下拉列表變成多行列表
在下拉列表中選擇多個選項
彈出下拉列表中所有選項
彈出下拉列表中被選中的選項的索引
改變下拉列表中被選中的選項的文本
刪除下拉列表中的選項
Table, TableHeader, TableRow, TableData 對象
改變表格邊框的寬度
改變表格的cellpadding和cellspacing
指定表格的frame
為表格指定規則
一個行的innerHTML
一個單元格的innerHTML
為表格創建一個標題
刪除表格中的行
添加表格中的行
添加表格行中的單元格
單元格內容水平對齊
單元格內容垂直對齊
對單個單元格的內容水平對齊
對單個單元格的內容垂直對齊
改變單元格的內容
改變單元格橫跨的列數(colspan屬性)
HTML DOM 實例