JavaScript - 文件物件

視窗文件物件

document 物件是一個 JavaScript 物件，提供對 HTML 文件所有元素的訪問。當 HTML 文件在 Web 瀏覽器中載入時，它會建立一個 document 物件。它是 HTML 文件的根。

document 物件包含您可以用來獲取有關 HTML 元素的詳細資訊並自定義它們的各種屬性和方法。

JavaScript document 物件是 window 物件的一個屬性。可以使用 window.document 語法訪問它。也可以在不使用 window 物件字首的情況下訪問它。

JavaScript 文件物件屬性

JavaScript 文件物件表示整個 HTML 文件，並且它帶有一些屬性，允許我們與文件互動並操作它。一些常見的文件物件屬性如下：

document.title − 獲取或設定文件的標題。
document.URL − 返回文件的 URL。
document.body − 返回文件的 <body> 元素。
document.head − 返回文件的 <head> 元素。
document.documentElement − 返回文件的 <html> 元素。
document.doctype − 返回文件的文件型別宣告 (DTD)。

這些屬性提供了一種方法，可以使用 JavaScript 訪問和修改 HTML 文件的不同部分。

示例：訪問文件標題

在下面的示例中，我們使用 document.title 屬性來訪問文件的標題。

<html>
<head>
   <title> JavaScript - DOM Object </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 - DOM Object

示例：訪問文件 URL

在下面的示例中，我們使用了 document.URL 屬性來訪問頁面的當前 URL。

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

輸出

The URL of the document is: https://tutorialspoint.tw/javascript/javascript_document_object.htm

JavaScript 文件物件方法

JavaScript 文件物件為我們提供了各種方法，允許我們與 HTML 文件互動並操作它。一些常見的文件物件方法如下：

getElementById(id) − 返回具有指定 ID 的元素。
getElementsByClassName(className) − 返回具有指定類名的元素集合。
getElementsByTagName(tagName) − 返回具有指定標籤名的元素集合。
createElement(tagName) − 使用指定的標籤名建立一個新的 HTML 元素。
createTextNode(text) − 使用指定的文字建立一個新的文字節點。
appendChild(node) − 將節點作為節點的最後一個子節點追加。
removeChild(node) − 從 DOM 中刪除子節點。
setAttribute(name, value) − 設定指定元素上屬性的值。
getAttribute(name) − 返回元素上指定屬性的值。

這些方法使我們能夠使用 JavaScript 動態地操作 HTML 文件的結構和內容。

示例：使用其 ID 訪問 HTML 元素

在下面的示例中，我們使用 document.getElementById() 方法訪問 ID 為“output”的 DIV 元素，然後使用 HTML 元素的 innerHTML 屬性顯示一條訊息。

<html>
<body>
<div id = "result"> </div>
<script>
   // accessing the DIV element.
   document.getElementById("result").innerHTML += 
   "Hello User! You have accessed the DIV element using its id.";
</script>
</body>
</html>

輸出

Hello User! You have accessed the DIV element using its id.

示例：向文件新增事件

在下面的示例中，我們使用 document.addEventListener() 方法向文件新增滑鼠懸停事件。

<html>
<body>
   <div id = "result">
       <h2> Mouseover Event </h2>
       <p> Hover over here to change background color </p>
    </div>
   <script>
      document.addEventListener('mouseover', function () {
         document.getElementById("result").innerHTML = "Mouseover event occurred.";
      });
   </script>
</body>
</html>

文件物件屬性列表

這裡，我們列出了文件物件的所有屬性。

屬性	描述
document.activeElement	獲取 HTML 文件中當前獲得焦點的元素。
adoptedStyleSheets	將新構造的樣式表陣列設定為文件。
baseURI	獲取文件的絕對基本 URI。
body	設定或獲取文件的 <body> 標記。
characterSet	獲取文件的字元編碼。
childElementCount	獲取文件子元素的數量。
children	獲取文件的所有子元素。
compatMode	獲取一個布林值，表示文件是否以標準模式呈現。
contentType	返回文件的 MIME 型別。
cookie	獲取與文件相關的 Cookie。
currentScript	返回當前正在執行其程式碼的文件指令碼。
defaultView	獲取與文件關聯的視窗物件。
designMode	更改文件的可編輯性。
dir	獲取文件文字的方向。
doctype	獲取文件型別宣告。
documentElement	獲取 <html> 元素。
documentURI	設定或獲取文件的位置。
embeds	獲取文件的所有嵌入式 (<embed>) 元素。
firstElementChild	獲取文件的第一個子元素。
forms	返回文件的 <form> 元素陣列。
fullScreenElement	獲取正在全屏顯示的元素。
fullScreenEnabled	返回布林值，指示文件中是否啟用了全屏。
head	返回文件的 <head> 標記。
hidden	返回一個布林值，表示文件是否被視為隱藏。
images	返回 <img> 元素的集合。
lastElementChild	返回文件的最後一個子元素。
lastModified	獲取文件的上次修改日期和時間。
links	獲取所有 <a> 和 <area> 元素的集合。
location	獲取文件的位置。
readyState	獲取文件的當前狀態。
referrer	獲取開啟當前文件的文件的 URL。
scripts	獲取文件中所有 <script> 元素的集合。
scrollingElement	獲取對滾動文件的元素的引用。
styleSheets	返回 CSSStyleSheet 物件的樣式表列表。
timeLine	表示文件的預設時間線。
title	設定或獲取文件的標題。
URL	獲取 HTML 文件的完整 URL。
visibilityState	返回布林值，表示文件的可見性狀態。

文件物件方法列表

以下是所有 JavaScript 文件物件方法的列表 -

方法	描述
addEventListener()	用於向文件新增事件偵聽器。
adoptNode()	用於從其他文件中採用節點。
append()	將新節點或 HTML 附加到文件的最後一個子節點之後。
caretPositionFromPoint()	返回 caretPosition 物件，其中包含基於作為引數傳遞的座標的 DOM 節點。
close()	關閉使用 document.open() 方法開啟的輸出流。
createAttribute()	建立一個新的屬性節點。
createAttributeNS()	使用特定的名稱空間 URI 建立一個新的屬性節點。
createComment()	使用特定的文字訊息建立一個新的註釋節點。
createDocumentFragment()	建立一個 DocumentFragment 節點。
createElement()	建立一個新的元素節點以插入網頁。
createElementNS()	用於使用特定的名稱空間 URI 建立一個新的元素節點。
createEvent()	建立一個新的事件節點。
createTextNode()	建立一個新的文字節點。
elementFromPoint()	從指定的座標訪問元素。
elementsFromPoint()	返回位於指定座標處的元素陣列。
getAnimations()	返回應用於文件的所有動畫的陣列。
getElementById()	使用 ID 訪問 HTML 元素。
getElementsByClassName()	使用類名訪問 HTML 元素。
getElementsByName()	使用名稱訪問 HTML 元素。
getElementsByTagName()	使用標籤名訪問 HTML 元素。
hasFocus()	根據任何元素或文件本身是否處於焦點返回布林值。
importNode()	用於從另一個文件中匯入節點。
normalize()	刪除為空的文字節點，並連線其他節點。
open()	用於開啟一個新的輸出流。
prepand()	用於在所有節點之前插入特定節點。
querySelector()	用於選擇與作為引數傳遞的 CSS 選擇器匹配的第一個元素。
querySelectorAll()	返回 HTML 元素的節點列表，這些元素與多個 CSS 選擇器匹配。
removeEventListener()	用於從文件中刪除事件偵聽器。
replaceChildren()	替換文件的子節點。
write()	用於將文字、HTML 等寫入文件。
writeln()	類似於 write() 方法，但將每個語句寫入新行。

列印頁面