HTML DOM 對象列表

HTML DOM 對象列表
對象	描述
PS:加色爲重點學習和研究的目標
Document	代表整個 HTML 文檔，可被用來訪問頁面中的所有元素
Anchor	代表 <a> 元素
Area	代表圖像映射中的 <area> 元素
Base	代表 <base> 元素
Body	代表 <body> 元素
Button	代表 <button> 元素
Event	代表某個事件的狀態
Form	代表 <form> 元素
Frame	代表 <frame> 元素
Frameset	代表 <frameset> 元素
Iframe	代表 <iframe> 元素
Image	代表 <img> 元素
Input button	代表 HTML 表單中的一個按鈕
Input checkbox	代表 HTML 表單中的複選框
Input file	代表 HTML 表單中的文件上傳
Input hidden	代表 HTML 表單中的隱藏域
Input password	代表 HTML 表單中的密碼域
Input radio	代表 HTML 表單中的單選按鈕
Input reset	代表 HTML 表單中的重置按鈕
Input submit	代表 HTML 表單中的確認按鈕
Input text	代表 HTML 表單中的文本輸入域（文本框）
Link	代表 <link> 元素
Meta	代表 <meta> 元素
Object	代表 <Object> 元素
Option	代表 <option> 元素
Select	代表 HTML 表單中的選擇列表
Style	代表單獨的樣式聲明
Table	代表 <table> 元素
TableData	代表 <td> 元素
TableRow	代表 <tr> 元素
Textarea	代表 <textarea> 元素

一.從 Document 對象開始

Document 對象代表整個 HTML 文檔，可用來訪問頁面中的所有元素。

Document 對象是 Window 對象的一個部分，可通過 window.document 屬性來訪問。

Document 對象的描述

HTMLDocument 接口對 DOM Document 接口進行了擴展，定義 HTML 專用的屬性和方法。

很多屬性和方法都是 HTMLCollection 對象（實際上是可以用數組或名稱索引的只讀數組），其中保存了對錨、表單、鏈接以及其他可腳本元素的引用。

這些集合屬性都源自於 0 級 DOM。它們已Document.getElementsByTagName() 所取代，但是仍然常常使用，因爲他們很方便。

write() 方法 值得注意，在文檔載入和解析的時候，它允許一個腳本向文檔中插入動態生成的內容。

注意，在 1 級 DOM 中，HTMLDocument 定義了一個名爲 getElementById() 的非常有用的方法。在 2 級 DOM 中，該方法已經被轉移到了 Document 接口，它現在由 HTMLDocument 繼承而不是由它定義了。

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet 標準).

Document 對象的集合

集合	描述	IE	F	O	W3C
all[]	返回對文檔中所有 HTML 元素的引用。	4	1	9	Yes
anchors[]	返回對文檔中所有 Anchor 對象的引用。	4	1	9	Yes
applets	返回對文檔中所有 Applet 對象的引用。	-	-	-	-
forms[]	返回對文檔中所有 Form 對象引用。	4	1	9	Yes
images[]	返回對文檔中所有 Image 對象引用。	4	1	9	Yes
links[]	返回對文檔中所有 Area 和 Link 對象引用。	4	1	9	Yes

all[]集合

測試：

IE特有的，FF沒有

<!--

var
 i,
origLength;


origLength =
 document.all
.length
;
//文檔中所有 HTML 元素的個數


document.write
(
'document.all.length='
+
origLength+
"<br />"
)
;

for
 (
i =
 0
;
 i <
 origLength;
 i++
)

{


document.write
(
"document.all["
+
i+
"]="
+
document.all
[
i]
.tagName
+
"<br />"
)
;
//所有元素的標籤名

}

//-->

說明：

all[] 是一個多功能的類似數組的對象，它提供了對文檔中所有 HTML 元素的訪問。all[] 數組源自 IE 4 並且已經被很多其他的瀏覽器所採用。

all[] 已經被 Document 接口的標準的 getElementByid() 方法和 getElementsByTagName() 方法以及 Document 對象的 getElementsByName() 方法所取代。儘管如此，這個 all[] 數組在已有的代碼中仍然使用。

all[] 包含的元素保持了最初的順序，如果你知道它們在數組中的確切數字化位置，可以直接從數組中提取它們。然而，更爲常見的是使用 all[] 數組，根據它們的 HTML 屬性 name 或 id 來訪問元素。如果多個元素擁有指定的 name，將得到共享同一名稱的元素的一個數組。

anchors[]

說明：anchors 集合可返回對文檔中所有 Anchor 對象的引用。

測試：

<a
 name
=
"first"
>
First anchor</
a
><br
 /
>

<a
 name
=
"second"
>
Second anchor</
a
><br
 /
>

<a
 name
=
"third"
>
Third anchor</
a
><br
 /
>

document.write
(
document.anchors
.length
)
;

//返回文檔中錨的數目 


document.write
(
document.anchors
[
0
]
.innerHTML
)

//返回文檔中第一個錨的內容

forms[]

forms 集合可返回對文檔中所有 Form 對象的引用。

測試：

<form
 name
=
"Form1"
></
form
>

<form
 name
=
"Form2"
></
form
>

<form
 name
=
"Form3"
></
form
>

 //計算文檔中表單的數目


document.write
(
"This document contains: "
)
;


document.write
(
document.forms
.length
 +
 " forms."
)
;


 
//訪問集合中的項目 


document.write
(
"<p>第一個表單名稱是："
 +
 document.forms
[
0
]
.name
 +
 "</p>"
)


document.write
(
"<p>第一個表單名稱是："
 +
 document.getElementById
(
"Form1"
)
.name
 +
 "</p>"
)

images[]

images[] 集合可返回對文檔中所有 Image 對象的引用。

測試:

1

2

<img
 src
=
"http://cssrainbow.cn/wp-content/themes/rainbow/images/subscribeViaEmail.png"
 alt
=
"subscribeViaEmail"
>

<img
 src
=
"http://cssrainbow.cn/wp-content/themes/rainbow/images/subscribeViaRSS.png"
 alt
=
"subscribeViaRSS"
>

  var
 img_src=
''
;

for
 (
i=
0
;
i<
document.images
.length
;
i++
)

{


   img_src+=
document.images
[
i]
.src
+
"/n
"
;
//返回所有圖片的路徑名

}

alert
(
img_src)
;

links[]

links 集合可返回對文檔中所有 Area 和 Link 對象的引用。

注意：如果一個標記既有 name 屬性，又有 href 屬性，則它既是一個 Anchor 對象，又是一個 Link 對象。

Document 對象的屬性

屬性	描述	IE	F	O	W3C
body	提供對 <body> 元素的直接訪問。對於定義了框架集的文檔，該屬性引用最外層的 <frameset>。
cookie	設置或返回與當前文檔有關的所有 cookie。	4	1	9	Yes
domain	返回當前文檔的域名。	4	1	9	Yes
lastModified	返回文檔被最後修改的日期和時間。	4	1	No	No
referrer	返回載入當前文檔的文檔的 URL。	4	1	9	Yes
title	返回當前文檔的標題。	4	1	9	Yes
URL	返回當前文檔的 URL。	4	1	9	Yes

Document 對象的方法

方法	描述	IE	F	O	W3C
close()	關閉用 document.open() 方法打開的輸出流，並顯示選定的數據。	4	1	9	Yes
getElementById()	返回對擁有指定 id 的第一個對象的引用。	5	1	9	Yes
getElementsByName()	返回帶有指定名稱的對象集合。	5	1	9	Yes
getElementsByTagName()	返回帶有指定標籤名的對象集合。	5	1	9	Yes
open()	打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出。	4	1	9	Yes
write()	向文檔寫 HTML 表達式或 JavaScript 代碼。	4	1	9	Yes
writeln()	等同於 write() 方法，不同的是在每個表達式之後寫一個換行符。	4	1	9	Yes

open() & close()

重要事項：調用 open() 方法打開一個新文檔並且用 write() 方法設置文檔內容後，必須記住用 close 方法關閉文檔，並迫使其內容顯示出來。

測試:

function
 createNewDoc(
)

{

var
 newDoc=
document.open
(
"text/html"
,
"replace"
)
;

var
 txt=
"<html><body>Learning about the DOM is FUN!</body></html>"
;


  newDoc.write
(
txt)
;


  newDoc.close
(
)
;

}

1	`<input type = "button" value = "Write to a new document" onclick = "createNewDoc()" >`

三.HTML DOM 對象列表 & 一切從 Document 對象開始

HTML DOM 對象列表

一.從 Document 對象開始

Document 對象的描述

Document 對象的集合

all[]集合

anchors[]

forms[]

images[]

links[]

Document 對象的屬性

Document 對象的方法

open() & close()

Kafka存儲機制

aws語音呼叫調用，告警電話

【轉】[C#] WebAPI 防止併發調用二（冥等性）

HTTP URL 詳解

創新工具：2024年開發者必備的一款表格控件（二）

車牌識別控制檯可快速整合二次開發

三.HTML DOM 對象列表 & 一切從 Document 對象開始

一.認識HTML DOM

六（2）.自己動手生產一個getElementsByClass()函數

五.W3C DOM之旅的前奏曲，回顧前四章

【轉】高級PHP應用程序漏洞審覈技術

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

三.HTML DOM 對象列表 & 一切從 Document 對象 開始

HTML DOM 對象列表

一.從 Document 對象 開始

Document 對象的描述

Document 對象的集合

all[]集合

anchors[]

forms[]

images[]

links[]

三.HTML DOM 對象列表 & 一切從 Document 對象開始

一.從 Document 對象開始