JavaScript - DOM 文件

上一頁
下一頁

JavaScript DOM 文件

JavaScript DOM 的 document 物件擁有網頁中的所有物件。它代表網頁本身。當網頁在 Web 瀏覽器中載入時，它會建立一個 HTML DOM 的“document”物件。它是 HTML 文件的根。

DOM document 物件包含各種屬性和方法，您可以使用這些屬性和方法來獲取有關 HTML 元素的詳細資訊並自定義它們。透過 document 物件，JavaScript 可以訪問並更改文件的結構、內容或樣式。

要訪問任何 HTML 元素，都應始終從 DOM document 物件開始訪問。

訪問 DOM Document 物件

網頁表示為 DOM document 物件。如果要訪問網頁中的任何元素，則需要首先訪問 document 物件。在 JavaScript 中，document 物件是 window 物件的一個屬性。因此，我們可以使用 `window.document` 語法將 document 物件作為 window 物件的屬性進行訪問。我們也可以不寫 window。

window.document
或者簡寫為
document

此互動式示例將幫助您瞭解 `document.getElementById()` 方法的工作原理。

Window Document 物件

URL 屬性

JavaScript DOM Document 方法

以下是 JavaScript DOM document 方法的列表：

序號 方法和描述
1. writeln()

此方法提供將 HTML 或 JavaScript 表示式直接寫入文件的功能。它在每個語句後新增一個換行符。
2. write()

此方法提供將 HTML 或 JavaScript 表示式直接寫入文件的功能。
3. hasFocus()

用於確定文件或文件內的任何元素是否具有焦點。
4. renameNode()

用於重新命名節點。
5. open()

此方法開啟一個文件以進行寫入。
6. normalizeDocument()

此方法規範化整個 HTML 文件。
7. normalize()

它刪除空文字節點，並將父節點中的相鄰文字節點連線起來。
8. adoptNode()

此方法將另一個文件中的節點採用到當前文件中。
9. addEventListener()

用於設定一個函式，每當將指定的事件傳遞到目標時，該函式就會被呼叫。
10. execCommand()

此方法用於在使用者選擇的可編輯部分上執行指定的命令。
11. createTextNode()

用於使用指定的文字建立文字節點。
12. createEvent()

用於建立一個事件物件，其事件型別在引數中指定。
13. createDocumentFragment()

它建立一個新的空文件片段，該片段駐留在記憶體中。
14. createComment()

此方法用於使用給定的文字建立註釋節點。
15. createAttribute()

用於使用 JavaScript 為 HTML 元素建立具有特定名稱的屬性並返回 Attr 物件。
16. close()

它關閉輸出流。
20. getElementsByTagName()

這是一個只讀方法，用於獲取文件中所有具有引數中指定標籤名稱的元素的集合。
21. getElementsByName()

此方法用於返回具有引數中指定的 name 屬性的元素集合。
22. getElementsByClassName()

此方法用於獲取文件中所有具有指定類名的元素的集合。
23. getElementById()

它返回給定 ID 的元素。
24. createElement()

此方法建立由標籤名稱或元素名稱指定的 HTML 元素。

JavaScript DOM Document 屬性

在下表中，我們列出了 JavaScript DOM document 屬性：

序號 屬性和描述
1. URL

這是一個只讀屬性，它返回文件的完整 URL，包括協議。
2. title

此屬性用於設定或獲取文件的標題。
3. strictErrorChecking

用於確定文件是否強制執行嚴格的錯誤檢查。
4. scripts

這是一個只讀屬性，用於將 HTML 文件中存在的全部指令碼元素作為集合返回。
5. links

links 是一個只讀屬性，它返回與具有 href 屬性的 a 和 area 元素相對應的所有連結的集合。
6. lastModified

此屬性返回當前文件上次修改的日期和時間。
7. inputEncoding

inputEncoding 屬性返回一個字串，表示文件的字元編碼。
8. implementation

此屬性返回與當前文件關聯的 DOMImplementation 物件。
9. images

這是一個只讀屬性，用於返回 HTML 文件中所有 img 元素的集合。
10. head

head 屬性返回 HTML 的 head 元素。
11. forms

forms 是一個只讀屬性，用於返回 HTML 文件中所有表單元素的集合。
12. embeds

這是一個只讀屬性，用於返回 HTML 文件中所有 embed 元素的集合。
13. domConfig

此屬性已棄用，在新瀏覽器中將返回 undefined。
14. domain

用於獲取當前執行文件的伺服器的域名。
15. documentURI

此屬性用於設定或返回文件的位置。
16. documentMode

documentMode 屬性是 IE8 屬性，用於確定瀏覽器使用的渲染模式。
17. documentElement

它返回 documentElement 作為 Element 物件。
18. doctype

此屬性返回與當前 HTML 文件關聯的 DTD（文件型別宣告）。
19. designMode

它幫助我們確定整個文件是否可編輯。
20. defaultView

用於返回文件的 window 物件。
21. cookie

HTML DOM document cookie 屬性用於建立、讀取和刪除 cookie。
22. charset

它返回 HTML 文件的字元編碼。
23. applets

用於返回文件中所有 applet 元素的列表，但此屬性現已棄用。
24. characterSet

此屬性用於獲取文件的字元編碼。
25. anchors

anchors 屬性是一個只讀屬性，它列出文件中所有具有 name 屬性的 "a" 標籤。
26. baseURI

用於返回文件的基本統一資源識別符號 (URI)。

這裡，我們解釋了 HTML DOM 'document' 物件的一些屬性，並提供了 JavaScript 示例。

Document childElementCount 屬性

在 JavaScript 中，document 物件的 childElementCount 屬性返回文件子元素的數量。

語法

請按照以下語法在 JavaScript 中使用 document 物件的 childElementCount 屬性。

document.childElementCount;

示例

在下面的程式碼中，childElementCount 屬性返回 1，因為文件只包含 1 個子元素，`<body>`。其他 HTML 元素是 body 的子元素。

<html>
<body>
   <div>First Element</div>
   <div>Second Element</div>
   <div>Third Element</div>
   <div id = "output"> </div>
   <script>
      document.getElementById('output').innerHTML = 
      "Total number of child elements in the document is: " + document.childElementCount;
   </script>
</body>
</html>

輸出

First Element
Second Element
Third Element
Total number of child elements in the document is: 1

Document Links 屬性

Document Links 屬性返回文件中所有連結的集合。之後，您可以使用 for...of 迴圈遍歷連結集合。

語法

請按照以下語法在 JavaScript 中使用 document 'links' 屬性。

document.links;

示例

在下面的程式碼中，網頁包含兩個 <a> 元素。我們使用 links 屬性訪問它們的 href 屬性值。

之後，我們使用 for...of 迴圈遍歷連結集合並在網頁上列印它們。

<html>
<body>
   <div> <a href = "https://tutorialspoint.tw/"> Home </a> </div>
   <div> <a href = "https://tutorialspoint.tw/articles/category/javascript"> JavaScript </a> </div>
   <div id = "output"> </div>
   <script>
      const allLinks = document.links;
      document.getElementById("output").innerHTML += "The webpage contains the below links. <br>";
      for (let link of allLinks) {
         output.innerHTML += link + "<br>";
      }
   </script>
</body>
</html>

輸出

Home
JavaScript
The webpage contains the below links.
https://tutorialspoint.tw/
https://tutorialspoint.tw/articles/category/javascript

Document Title 屬性

在 JavaScript 中，DOM document title 屬性返回網頁的標題。

語法

請按照以下語法訪問網頁的 DOM document title。

document.title;

示例

在下面的程式碼中，我們在 <head> 標籤中添加了 <title> 標籤。

之後，我們使用 document 的 'title' 屬性訪問網頁的標題。

<html>
<head>
   <title> JavaScript - HTML DOM Document </title>
</head>
<body>
   <div id = "output">The title of the document is: </div>
   <script>
      document.getElementById("output").innerHTML += document.title;
   </script>
</body>
</html>

輸出

The title of the document is: JavaScript - HTML DOM Document
列印頁面
上一頁
下一頁
廣告