HTML DOM 實(shí)例總結(jié)

警告
請使用 document.write() 僅僅向文檔輸出寫內(nèi)容。
如果在文檔已完成加載后執(zhí)行 document.write,整個 HTML 頁面將被覆蓋:

.

Anchor 對象

更改一個鏈接的文本、URL 以及 target

代碼圖示

使用 focus() 和 blur()

代碼圖示

向超鏈接添加快捷鍵

Paste_Image.png

Document 對象

使用 document.write() 向輸出流寫文本

<script type="text/javascript">
  document.write("Hello World!")
</script>

使用 document.write() 向輸出流寫 HTML

<script type="text/javascript">
  document.write("<h1>Hello World!</h1>")
</script>

返回當(dāng)前文檔的標(biāo)題

Paste_Image.png

返回當(dāng)前文檔的 URL

<html>
  <body>
    該文檔的 URL 是:
    <script type="text/javascript">
      document.write(document.URL)
    </script>
  </body>
</html>

返回當(dāng)前文檔的 referrer

<html>
  <body>
    <p>referrer 屬性返回加載本文檔的文檔的 URL。</p>
    本文檔的 referrer 是:
    <script type="text/javascript">
      document.write(document.referrer)
    </script>
  </body>
</html>

返回下載當(dāng)前文檔的服務(wù)器域名
使用 getElementById()

<html>
  <body>
    本文檔的域名是:
    <script type="text/javascript">
      document.write(document.domain)
    </script>
  </body>
</html>

使用 getElementsByName()

var x=document.getElementById("myHeader")

打開一個新的文檔,添加一些文本,然后關(guān)閉它。

<head>
  <script type="text/javascript">
    function createNewDoc()
      {
      var newDoc=document.open("text/html","replace");
      var txt="<html><body>學(xué)習(xí) DOM 非常有趣!</body></html>";
      newDoc.write(txt);
      newDoc.close();
      }
  </script>
</head>

<body>
  <input type="button" value="打開并寫入一個新文檔" onclick="createNewDoc()">
</body>

返回文檔中錨的數(shù)目
返回文檔中第一個錨的 innerHTML
計(jì)算文檔中表單的數(shù)目
訪問集合中的項(xiàng)目
計(jì)算文檔中的圖像數(shù)目

Event 對象

哪個鼠標(biāo)按鈕被點(diǎn)擊?
光標(biāo)的坐標(biāo)是?
被按的按鍵的 unicode 是?
相對于屏幕,光標(biāo)的坐標(biāo)是?
shift 鍵被按了嗎?
哪個元素被點(diǎn)擊了?
哪個事件類型發(fā)生了?

Form 和 Input 對象

更改表單的 action 屬性
返回向服務(wù)器發(fā)送數(shù)據(jù)的 HTTP 方法
提示按鈕的 id 和 類型 + 禁用按鈕
選定以及不選定 checkbox
一個表單中的若干個 checkbox
Checkbox - 把文本轉(zhuǎn)換為大寫
使用單選按鈕中的 value 屬性
重置表單
提交表單
驗(yàn)證表單
設(shè)置和移開文本域上的焦點(diǎn)
選取文本域中的內(nèi)容
表單中的下拉列表
另一個下拉列表
當(dāng)達(dá)到文本域的最大字符數(shù)時跳至下一個域
為若干表單域添加快捷鍵

Frame、Frameset 以及 IFrame 對象

可調(diào)整大小和不可調(diào)整大小的框架
帶有滾動條和不帶有滾動條的框架
更改兩個框架的源
跳出框架
更改兩個框架的源

Image 對象

更改圖像的高度和寬度
更改圖像的 src

Location 對象

把用戶帶到一個新的地址
重新加載文檔
跳出框架
錨的數(shù)組

Navigator

檢測訪問者的瀏覽器和版本號
有關(guān)訪問者的瀏覽器的更多信息
有關(guān)訪問者的瀏覽器的全部細(xì)節(jié)
根據(jù)瀏覽器來提醒用戶

Option 和 Select 對象

禁用并啟用下拉列表
取得包含該下拉列表的表單的 id
取得下拉列表中選項(xiàng)的數(shù)目
更改下拉列表中的可見行數(shù)
選擇下拉列表中的多個選項(xiàng)
輸出下拉列表中所有選項(xiàng)的文本
取得下拉列表中所選的選項(xiàng)的索引位置
更改被選選項(xiàng)
從下拉列表中刪除選項(xiàng)

Screen 對象

檢測有關(guān)客戶機(jī)的屏幕的細(xì)節(jié)

Table、TableHeader、TableRow、TableData 對象

更改表格邊線的寬度
更改表格的 cellPadding 和 cellSpacing
規(guī)定表格的外部邊框
規(guī)定表格的內(nèi)部邊線
某一行的 InnerHTML
表格單元的 InnerHTML
為表格創(chuàng)建了一個標(biāo)題
從表格刪除行
向表格添加新行 - 然后向其添加內(nèi)容
向一個已有的行中插入單元格
對齊行中的單元格內(nèi)容
垂直對齊行中的單元格內(nèi)容
對齊單元格中的內(nèi)容
垂直對齊單元格中的內(nèi)容
更改表格單元格中的內(nèi)容
更改表元橫跨的列數(shù)

Window 對象

顯示對話框
顯示帶有折行的對話框
顯示確認(rèn)框
顯示提示框
通過點(diǎn)擊按鈕來打開一個窗口
打開一個新窗口,并控制其外觀
通過一次點(diǎn)擊打開多個窗口
把用戶帶到一個新的地址
重新加載文檔
在窗口的狀態(tài)欄設(shè)置文本
打印頁面
跳出框架
調(diào)整窗口的大小
把窗口調(diào)整為指定的大小
滾動文檔
把窗口滾動到指定的位置
簡單的計(jì)時
另一個簡單的計(jì)時
無窮循環(huán)中的計(jì)時
無窮循環(huán)中的計(jì)時 - 帶有一個停止按鈕
一個時鐘
創(chuàng)建 pop-up

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,329評論 1 41
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,251評論 4 61
  • 端午節(jié)前一天,驕陽炙烤著美麗的臺兒莊古城。在復(fù)興廣場上,旱地龍舟賽即將開始。中央電視臺的現(xiàn)場直播,記者主持人的熱情...
    教育經(jīng)典擷粹閱讀 5,261評論 0 1
  • 1.注冊友盟,申請key 2.微信申請應(yīng)用 3.配置ATS和白名單 4.wb126663232 = wb+微信申請...
    sunmumu1222閱讀 218評論 0 0
  • 醫(yī)案7~11講石膏之性,又善清瘟疹之熱,善清咽喉之熱,善清頭面之熱。 外感痰喘,宜投《金匱》小青龍...
    歸匿閱讀 276評論 0 0