JS document(檔案節點)詳解

2020-07-16 10:05:10
文件節點代表整個 HTML 文件,在 JavaScript 中使用 document 即可存取。document 也叫“根節點”,它是文件內其他節點的存取入口,提供了操作其他節點的方法。主要特徵值:nodeType 等於 9、nodeName 等於 "#document"、nodeValue 等於 null、parentNode 等於 null、ownerDocument 等於 null。

在 HTML 文件中,文件節點是唯一的,也是唯讀的。

存取文件

在不同環境中,獲取文件節點的疊代不同。具體說明如下:
  • 在文件內部節點,使用 ownerDocument 存取。
  • 在指令碼中,使用 document 存取。
  • 在框架頁,使用 contentDocument 存取。
  • 在非同步通訊中,使用 XMLHttpRequest 物件的 responseXML 存取。

存取子節點

文件子節點包括以下型別:
  • doctype 文件型別,如 <!doctype html>。
  • html 元素,如 <html>。
  • 處理指令,如 <?xml-stylesheet type="text/xsl" href="xsl.xsl"?>。
  • 註釋,如 <!--注釋-->

存取方法說明如下:
  • 使用 document.documentElement 可以存取 html 元素。
  • 使用 document.doctype 可以存取 doctype。注意,部分瀏覽器不支援。
  • 使用 document.childNodes 可以遍歷子節點。
  • 使用 document.firstChild 可以存取第一個子節點,一般為 doctype。
  • 使用 document.lastChild 可以存取最後一個子節點,如 html 元素或者註釋。

存取特殊元素

文件中存在很多特殊元素,使用下面的方法可以獲取,若獲取不到則返回 null。
  • 使用 document.body 可以存取 body 元素。
  • 使用 document.head 可以存取 head 元素。
  • 使用 document.defaultView 可以存取預設檢視,即所屬的視窗物件 window。
  • 使用 document.scrollingElement 可以存取文件內捲動的元素。
  • 使用 document.activeElement 可以存取文件內獲取焦點的元素。
  • 使用 document.fullscreenElement 可以存取文件內正在全螢幕顯示的元素。

存取元素集合

document 包含一組集合物件,使用它們可以快速存取文件內元素,簡單說明如下:
  • document.anchors:返回所有設定 name 屬性的 <a> 標籤。
  • document.links:返回所有設定 href 屬性的 <a> 標籤。
  • document.forms:返回所有 form 物件。
  • document.images:返回所有 image 物件。
  • document.applets:返回所有 applet 物件。
  • document.embeds:返回所有 embed 物件。
  • document.plugins:返回所有 plugin 物件。
  • document.scripts:返回所有 script 物件。
  • document.styleSheets:返回所有樣式表集合。

存取文件資訊

document 包含很多資訊,簡單說明如下:

靜態資訊

  • document.URL:返回當前文件的網址。
  • document.domain:返回當前文件的域名,不包含協定和介面。
  • document.location:存取 location 物件。
  • document.lastModified:返回當前文件最後修改的時間。
  • document.title:返回當前文件的標題。
  • document.characterSet:返回當前文件的編碼。
  • document.referrer:返回當前文件的存取者來自哪裡。
  • document.dir:返回文字方向。
  • document.compatMode:返回瀏覽器處理文件的模式,值包括 BackCompat(向後相容模式)和 CSS1Compat(嚴格模式)。

狀態資訊

  • document.hidden:表示當前頁面是否可見。如果視窗最小化、切換頁面,則 document.hidden 返回 true。
  • document.visibilityState:返回文件的可見狀態。取值包括:visible(可見)、hidden(不可見)、prerender(正在渲染)、unloaded(已解除安裝)。
  • document.readyState:返回當前文件的狀態。取值包括:loading(正在載入)、interactive(載入外部資源)、complete(載入完成)。

存取文件元素

document 物件包含多個存取文件內元素的方法,簡單說明如下:
  • getElementById():返回指定 id 屬性值的元素。注意,id 值要區分大小寫。如果找到多個 id 相同的元素,則返回第一個元素;如果沒有找到指定 id 值得元素,則返回 null。
  • getElementsByTagName():返回所有指定標籤名稱的元素節點。
  • getElementsByName():返回所有指定名稱(name 屬性值)的元素節點。該方法多用於表單結構中,獲取無線電鈕組或核取方塊組。

getElementsByName() 方法返回的是一個 HTMLCollection 物件,與 nodeList 物件類似,可以使用方括號語法或者 item() 方法存取 HTMLCollection 物件中的元素,並通過 length 屬性取得這個物件中元素的數量。

範例

HTMLCollection 物件還包含一個 namedItem() 方法,該方法可以通過元素的 name 特徵取得集合中的專案。下面範例可以通過 namedItem("news"); 方法找到 HTMLCollection 物件中 name 為 news 的圖片。
<img src="1.gif" />
<img src="2.gif" name="news" />
<script>
    var images = document.getElementsByTagName("img");
    var news = image.namedItem("news");
</script>
還可以使用下面用法獲取頁面中所有元素,其中引數*表示所有元素。
var  allElements = document.getElementsByTagName("*");