JavaScript 複習之 Document 節點

DreamTruth發表於2019-03-02
JavaScript

documnt 節點物件代表整個文件，每張網頁都有自己的document物件。window.document屬性就是指向這個物件。

document物件獲取方法：

  • 正常網頁。使用document或window.document
  • iframe框架裡面的頁面，使用iframe節點的contentDocument屬性。
  • Ajax 操作返回的文件，使用XMLHttpRequest物件的responseXML屬性
  • 內部節點的ownerDocument屬性

屬性

快捷方式屬性

  • document.defaultView返回window物件，如果文件不屬於window，則返回null
  • document.doctype返回文件型別
  • document.documentElement返回當前文件根節點。一般是html
  • document.body, document.head屬性分別指向<body>節點，<head>節點
  • document.scrollingElement返回文件的滾動元素。標準模式下，返回<html>。相容（quirk）模式下，返回的是<body>元素，如果該元素不存在，返回null。
// 頁面滾動到瀏覽器頂部
document.scrollingElement.scrollTop = 0;
複製程式碼
  • document.activeElement返回當前焦點元素。如果當前沒有焦點元素，返回<body>元素或null。
  • document.fullscreenElement屬性返回當前以全屏狀態顯示的 DOM 元素。如果不是全屏狀態，該屬性返回null。
if (document.fullscreenElement.nodeName == 'VIDEO') {
  console.log('全屏播放視訊');
}
複製程式碼

節點集合屬性

  • document.links屬性返回當前文件所有設定了href屬性的<a>,節點
  • document.forms返回所有<form表單節點
  • document.images返回所有<img>圖片節點
  • document.embeds屬性和document.plugins屬性，都返回所有<embed>節點。
  • document.scripts屬性返回所有<script>節點。
  • document.styleSheets屬性返回文件內嵌或引入的樣式表集合
  • 除了document.styleSheets，以上的集合屬性返回的都是HTMLCollection例項。

文件靜態資訊屬性

  • document.documentURI,document.documentURL返回當前文件的網址。
  • document.domain返回當前文件的域名。
  • document.location物件提供 URL 相關的資訊和操作方法。
  • document.lastModified屬性返回一個字串，表示當前文件最後修改的時間。
  • document.title返回當前文件的標題。
  • document.characterSet屬性返回當前文件的編碼

文件狀態屬性

  • document.hidden返回布林值，如果視窗最小化、瀏覽器切換了 Tab，都會導致導致頁面不可見，使得document.hidden返回true。

  • document.visibliteState返回文件的可見狀態，這個屬性可以用在頁面載入時，防止載入某些資源；或者頁面不可見時，停掉一些頁面功能。有四個值：

    1. visible頁面可見，又可能是部分可見。
    2. hidden頁面不可見，視窗最小化或者瀏覽器切換到另一個 Tab。
    3. prerender頁面處於渲染狀態
    4. unload頁面從記憶體裡解除安裝了

  • document.readyState返回當前文件的狀態，有三個值：

    1. loading載入 HTML 程式碼階段
    2. interactive載入外部資源階段
    3. complete載入完成

  • document.cookie用來操作瀏覽器 Cookie

  • document.designMode用來控制文件是否可編輯，有兩個值on和off。

  • document.implementation屬性返回一個DOMImplementation物件，該物件有三個方法，用於建立獨立於當前文件的新的 Document 物件。

    1. DOMImplementation.createDocument()：建立一個 XML 文件。
    2. DOMImplementation.createHTMLDocument()：建立一個 HTML 文件。
    3. DOMImplementation.createDocumentType()：建立一個 DocumentType 物件。

方法

  • document.open()清除當前文件所有內容，是文件處於可寫狀態，使用document.write()方法寫入內容。
  • document.close()關閉document.open()開啟的文件
  • document.writeIn()與write方法完全一致，除了會在輸入內容的尾部新增換行符。
  • document.querySeletor()接收一個 CSS 選擇器為引數，返回匹配該選擇器的元素節點，如果多個節點滿足條件，則返回第一個匹配的節點。不支援 css 偽類選擇器
  • document.querySeletorAll()與上面方法類似，區別是返回要給NodeList物件，包含所有匹配給定選擇器的節點。不支援 css 偽類選擇器
  • document.getElementsByTagName()搜尋 HTML 標籤名
  • document.getElementsByClassName()通過類名搜尋
  • document.getElementsByName()用於選擇擁有name屬性的 HTML 元素。
  • document.getElementById()返回指定id屬性的元素節點
  • document.elementFromPoint()返回位於頁面指定位置最上層的元素節點，有兩個引數，依次是相對於視口左上角的橫座標和縱座標，單位是畫素。
  • document.elementsFromPoint()返回一個陣列，成員是位於指定座標（相對於視口）的所有元素。
  • document.caretPositionFromPoint()返回一個 CaretPositon 物件，包含了指定座標點在節點物件內部的位置資訊。CaretPosition 物件就是游標插入點的概念，用於確定游標點在文字物件內部的具體位置。
  • document.createElement()生成元素節點
  • document.createTextNode()生產文字節點，並返回該節點。
  • document.createAttribute()生產一個新的屬性節點，並返回他。
  • document.createComment()生成一個新的註釋節點，並返回該節點。
  • document.createDocumentFragment()生成一個空的文件片段物件。
  • document.createEvent()生成一個事件物件，該物件可以被element.dispatchEvent方法使用，觸發指定事件。

document.createEvent方法的引數是事件型別，比如UIEvents、MouseEvents、MutationEvents、HTMLEvents。

var event = document.createEvent('Event');
event.initEvent('build', true, true);
document.addEventListener('build', function (e) {
  console.log(e.type); // "build"
}, false);
document.dispatchEvent(event);
//上面程式碼新建了一個名為build的事件例項，然後觸發該事件。
複製程式碼
  • document.addEventListener(), document.removeEventListener(), document.dispatchEvent()
// 新增事件監聽函式
document.addEventListener('click', listener, false);

// 移除事件監聽函式
document.removeEventListener('click', listener, false);

// 觸發事件
var event = new Event('click');
document.dispatchEvent(event);
複製程式碼
  • document.hasFocus()返回一個布林值，表示當前文件之中是否鈾元素被啟用或獲得焦點。
  • document.adoptNode()將某個節點及其子節點，從原來所在的文件裡面移除,歸屬當前document物件，返回插入口的新節點。
var node = document.adoptNode(externalNode);
document.appendChild(node);
複製程式碼

注意，document.adoptNode方法只是改變了節點的歸屬，並沒有將這個節點插入新的文件樹。所以，還要再用appendChild方法或insertBefore方法，將新節點插入當前文件樹。

  • document.importNode()方法則是從原來所在的文件或DocumentFragment裡面，拷貝某個節點及其子節點，讓它們歸屬當前document物件
var node = document.importNode(externalNode, deep);
複製程式碼

document.importNode方法的第一個引數是外部節點，第二個引數是一個布林值，表示對外部節點是深拷貝還是淺拷貝，預設是淺拷貝（false）。雖然第二個引數是可選的，但是建議總是保留這個引數，並設為true。

相關文章