(87)Wangdao.com第二十天_JavaScript document 節點對象

時間  2019-11-08
標籤 wangdao.com wangdao com 第二 十天 10天 javascript document 節點 對象 欄目 JavaScript 简体版
原文   原文鏈接

document 節點對象，html

表明整個文檔，每張網頁都有本身的 document 對象。node

window.document 當瀏覽器開始加載文檔時就存在了數組

  • 正常的網頁使用 document 或者 window.document
  • iframe 框架中使用 iframe 節點對象的 contentDocument 屬性
  • Ajax 操做返回的文檔，使用 XMLHttpRequest 對象的 responseXML 屬性
  • 內部節點的 ownerDocument 屬性

 

  • 屬性
    • document.defaultView 屬性，若是文檔屬於 window ，則指向 window

 

    • 對於 HTML 文檔，document 對象含有兩個子節點
      • document.doctype 返回文檔類型（Document Type Declaration）節點。若是沒寫DTD，則返回 null
      • document.documentElement 返回文檔的根元素節點。通常是 <html> 節點

 

    • document.head 和 document.body
      • 無論網頁中是否有 <head> <body>，這兩個節點始終存在
      • 瀏覽器會自動建立
      • 這兩個屬性可寫！

 

    • document.scrollingElement 返回文檔滾動元素。
      • 也就是說，當文檔滾動時，究竟是哪一個元素滾動
      • // 頁面滾動到瀏覽器頂部
document.scrollingElement.scrollTop = 0;

 

    • document.activeElement 返回得到當前焦點（focus）的 DOM 元素
      • 若是當前沒有焦點元素，返回 <body> 元素或 null 

 

    • document.fullScrreenElement 返回當前全屏狀態展現的 DOM 元素
      • 若是不是全屏狀態，則返回 null
      • // 判斷 video 元素是否是全屏狀態
if (document.fullscreenElement.nodeName == 'VIDEO') {
    console.log('全屏播放視頻');
}

 

  • 返回一個節點集合 HTMLCollection 的屬性

這些集合都是動態的，網頁節點發生任何變化，都會反映在這些集合中。瀏覽器

 

    • document.links 
      • 返回當前文檔全部設定了href屬性的 <a> 及 <area> 節點
      • // 打印文檔全部的連接
var links = document.links;
for(var i = 0; i < links.length; i++) {
    console.log(links[i]);
}

 

    • document.forms
      • 返回全部 <form> 表單節點
      • 獲取文檔的第一個表單
      • id 屬性和 name 屬性也能夠用來引用表單

 

    • document.images
      • 返回頁面全部 <img> 元素節點

 

    • document.embeds 和 document.plugins
      • 都是返回頁面全部 <embed> 元素節點

 

    • document.scripts
      • 返回頁面全部 <script> 元素節點

 

    • document.styleSheets
      • 返回文檔內嵌或引入的樣式集合
      • 除了 document.styleSheets，以上的集合屬性返回的都是 HTMLCollection 實例

 

  • 文檔靜態信息屬性
    • document.documentURI  和  document.URL
        • 都返回一個字符串，表示當前文檔的網址
          • documentURI 繼承自 Document 接口，可用於全部文檔
          • URL繼承自HTMLDocument接口，只能用於 HTML 文檔
        • 若是文檔的錨點（#anchor）變化，這兩個屬性都會跟着變化

 

    • document.domain
      • 返回當前文檔的域名，不包含協議和接口 
        • // http://www.example.com:80/hello.html
document.domain;    // www.example.com

           

      • 若是沒法獲取域名，該屬性返回 null 
      • 對於頂級域名 document.domain 是一個只讀屬性
        • 對於次級域名，屬性可讀可寫，可是修改後會致使端口號爲 null，所以兩個網頁進行通訊時，應該具備相同設置。

 

    • document.location
      • 指向瀏覽器提供的原生對象 Location
      • 該對象提供 URL 相關的信息和操做方法
      • 能夠經過 window.location 或者 document.location 獲取該對象

 

    • document.lastModified
      • 返回文檔的最後 修改時間
      • 不一樣的瀏覽器返回的時間格式不同
      • 返回值類型是字符串
      • 若是頁面上有 JavaScript 生成的內容，document.lastModified 屬性返回的老是當前時間

 

    • document.title
      • 返回當前文檔的標題
      • 返回 <title> 標籤內的值
      • <title> 標籤可寫，若是改寫了，則返回修改後的值。

 

    • document.characterSet
      • 返回當前文本編碼，好比 UTF-8

 

    • document.referrer
      • 返回當前文檔訪問者的來源，即用戶經過點擊哪一個網頁進入到當前網頁
      • 若是沒法獲取來源，或者用戶直接輸入網址，document.referrer 返回一個空字符串
      • document.referrer 的值，老是與 HTTP 頭信息的Referer字段保持一致
        • 注意，document.referrer 的拼寫有兩個 r，而 HTTP 頭信息的 Referer 字段只有一個 r

 

    • document.dir
      • 返回一個字符串，表示文字方向
        • rtl    表示文字從右到左    阿拉伯文字
        • ltr    表示文字從左到右    大多數文字

 

    • document.compatMode
      • 返回瀏覽器處理文檔的模式
        • 向後兼容模式    BackCompat
        • 嚴格模式    CSS1Compat

 

  • 文檔狀態屬性
    • document.hidden
      • 返回一個布爾值，表示當前頁面是否可見
      • 若是窗口最小化、瀏覽器切換了 Tab，都會致使致使頁面不可見，使得 document.hidden 返回 true

 

    • document.visibilityState
      • 返回文檔的可見狀態
        • visible：頁面可見
          • 頁面多是部分可見，即不是焦點窗口，前面被其餘窗口部分擋住了。
        • hidden： 頁面不可見
          • 有可能窗口最小化，或者瀏覽器切換到了另外一個 Tab
        • prerender：頁面處於正在渲染狀態
          • 對於用戶來講，該頁面不可見
        • unloaded：頁面從內存裏面卸載了
      • 用途：
        • 在頁面加載時，防止加載某些資源
        • 或者頁面不可見時，停掉一些頁面功能

 

    • document.readyState
      • 返回當前文檔的狀態
        • loading    加載 HTML 代碼階段
        • interactive    加載外部資源階段
        • complete    加載完成
      • 該屬性變化過程：
        • 瀏覽器開始解析 HTML 文檔，document.readyState 屬性等於 loading
        • 遇到 HTML 文檔中的 <script> 元素，而且沒有 async 或 defer 屬性，就暫停解析，開始執行腳本，這時 document.readyState 屬性仍是等於 loading
        • HTML 文檔解析完成，document.readyState 屬性變成 interactive
        • 瀏覽器等待圖片、樣式表、字體文件等外部資源加載完成，一旦所有加載完成，document.readyState 屬性變成 complete
      • 每次狀態變化都會觸發一個 readystatechange 事件

 

    • document.cookie 
      • 操做瀏覽器的 cookie

 

    • document.designMode
      • 控制當前文檔是否可編輯 on / off
      • 下面代碼打開 iframe 元素內部文檔的 designMode 屬性，就能將其變爲一個所見即所得的編輯器 
        • // HTML 代碼以下
// <iframe id="editor" src="about:blank"></iframe>
var editor = document.getElementById('editor');
editor.contentDocument.designMode = 'on';

 

    • document.implementation
      • 返回一個 DOMImplementation 對象，主要用於建立獨立於當前文檔的新的 Document 對象，對象有三個方法
        • DOMImplementation.createDocument()    建立一個 XML 文檔
        • DOMImplementation.createHTMLDocument()    建立一個 HTML 文檔
        • DOMImplementation.createDocumentType()：建立一個 DocumentType 對象
      • 生成一個新的 HTML 文檔doc，而後用它的根元素 document.documentElement 替換掉 document.documentElement 
      • 這會使得當前文檔的內容所有消失，變成 hello world 
        • var doc = document.implementation.createHTMLDocument('Title');
var p = doc.createElement('p');
p.innerHTML = 'hello world';
doc.body.appendChild(p);

document.replaceChild(
    doc.documentElement,
    document.documentElement
);

 

 

  • document 方法
    • document.open()
      • 清除當前文檔全部內容，使得文檔處於可寫狀態，供document.write() 方法寫入內容

 

    • document.close()
      • 用來關閉 document.open() 打開的文檔

 

    • document.write()
      • 用於向當前文檔寫入內容
      • 在網頁的首次渲染階段，只要頁面沒有關閉寫入（即沒有執行document.close()），document.write寫入的內容就會追加在已有內容的後面
      • 若是頁面已經解析完成（DOMContentLoaded事件發生以後），再調用write方法，它會先調用open方法，擦除當前文檔全部內容，而後再寫入
      • 注意，document.write會看成 HTML 代碼解析，不會轉義
      • 除了某些特殊狀況，應該儘可能避免使用 document.write() 這個方法

 

    • document.writeln()
      • 與write方法徹底一致，除了會在輸出內容的尾部添加換行符

 

    • document.querySelector()
      • 接受一個 CSS 選擇器做爲參數，返回匹配該選擇器的元素節點
      • 若是有多個節點知足匹配條件，則返回第一個匹配的節點。
      • 若是沒有發現匹配的節點，則返回 null
      • 它們不支持 CSS 僞元素的選擇器（好比 :first-line 和 :first-letter）和僞類的選擇器（好比 :link 和 :visited）

 

    • document.querySelectorAll()
      • 與 .querySelector() 用法相似
      • 區別是返回一個 NodeList 對象，包含全部匹配給定選擇器的節點
      • 它們不支持 CSS 僞元素的選擇器（好比 :first-line 和 :first-letter）和僞類的選擇器（好比 :link和 :visited）
      • 注意：返回結果不是動態集合，不會實時反映元素節點的變化

 

    • document.getElementById()
    • document.getElementsByTagName()
    • document.getElementsByClassName()
    • document.getElementsByName()

 

    • document.elementFromPoint()
      • 返回位於頁面指定位置最上層的元素節點
      • 相對於當前視口左上角的橫座標和縱座標，單位是像素
      • 若是位於該位置的 HTML 元素不可返回（好比文本框的滾動條），則返回它的父元素（好比文本框）
      • 若是座標值無心義（好比負值或超過視口大小），則返回 null
      • var element = document.elementFromPoint(50, 50);

 

    • document.elementsFromPoint()
      • 返回一個數組，成員是位於指定座標（相對於視口）的全部元素

 

    • document.caretPositionFromPoint()
      • 返回一個 CaretPosition 對象，包含了指定座標點在節點對象內部的位置信息
      • CaretPosition 對象就是光標插入點的概念，用於肯定光標點在文本對象內部的具體位置。 
        • var range = document.caretPositionFromPoint(clientX, clientY);
      • 上面代碼中，range 是指定座標點的 CaretPosition 對象。
      • CaretPosition 對象有兩個屬性
        • CaretPosition.offsetNode    該位置的節點對象
        • CaretPosition.offset       該位置在offsetNode對象內部，與起始位置相距的字符數

 

    • document.createElement()
    • document.createTextNode() 
      • 用來生成文本節點（Text實例），並返回該節點
      • 它的參數是文本節點的內容。
      • 確保返回的節點，被瀏覽器看成文本渲染，而不是看成 HTML 代碼渲染
      • 所以，能夠用來展現用戶的輸入，避免 XSS 攻擊 
        • var div = document.createElement('div');
div.appendChild(document.createTextNode('<span>Foo & bar</span>'));
console.log(div.innerHTML)    // &lt;span&gt;Foo &amp; bar&lt;/span&gt;

           

      • 以上代碼，createTextNode方法對大於號和小於號進行轉義，從而保證即便用戶輸入的內容包含惡意代碼，也能正確顯示
      • 注意： 該方法不對單引號和雙引號轉義，因此不能用來對 HTML 屬性賦值

 

    • document.createAttribute()

    • document.createComment()

    • document.createDocumentFragment()
      • DocumentFragment 是一個存在於內存的 DOM 片斷，不屬於當前文檔，經常用來生成一段較複雜的 DOM 結構，而後再插入當前文檔。
      • 由於DocumentFragment不屬於當前文檔，對它的任何改動，都不會引起網頁的從新渲染，比直接修改當前文檔的 DOM 有更好的性能表現
      • var docfrag = document.createDocumentFragment();

[1, 2, 3, 4].forEach(function (e) {
    var li = document.createElement('li');
    li.textContent = e;
    docfrag.appendChild(li);
});

var element  = document.getElementById('ul');
element.appendChild(docfrag);

        上面代碼中，文檔片段docfrag包含四個<li>節點，這些子節點被一次性插入了當前文檔。cookie

 

    • document.createEvent()
      • 生成一個事件對象（Event實例），
      • 該對象能夠被 element.dispatchEvent() 方法使用，觸發指定事件
      • 參數是事件類型，好比 UIEvents、MouseEvents、MutationEvents、HTMLEvents
      • 實例：
        • 新建了一個名爲 build 的事件實例，而後觸發該事件 
          var event = document.createEvent('Event');
event.initEvent('build', true, true);
document.addEventListener('build', function (e) {
  console.log(e.type); // "build"
}, false);
document.dispatchEvent(event);

           

    • document.addEventListener()
      • 承自EventTarget接口
      • 1

 

    • document.removeEventListener()
      • 承自EventTarget接口
      • 1

 

    • document.dispatchEvent()
      • 承自EventTarget接口
      • // 添加事件監聽函數
document.addEventListener('click', listener, false);

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

// 觸發事件
var event = new Event('click');
document.dispatchEvent(event);

 

    • document.hasFocus()
      • 返回一個布爾值，表示當前文檔之中是否有元素被激活或得到焦點
      • 注意，有焦點的文檔一定被激活（active），反之不成立，激活的文檔未必有焦點。
      • 好比，用戶點擊按鈕，從當前窗口跳出一個新窗口，該新窗口就是激活的，可是不擁有焦點

 

    • document.adoptNode()
      • 將某個節點及其子節點，從原來所在的文檔 或 DocumentFragment 裏面移除，歸屬當前 document 對象
      • 返回插入後的新節點
      • 插入的節點對象的 ownerDocument 屬性，會變成當前的 document 對象，而 parentNode 屬性是null。

 

    • document.importNode()
      • 則是從原來所在的文檔或 DocumentFragment 裏面，拷貝某個節點及其子節點，讓它們歸屬當前 document 對象
      • 拷貝的節點對象的 ownerDocument 屬性，會變成當前的 document 對象，而 parentNode 屬性是null
      • 第一個參數是外部節點
      • 第二個參數是一個布爾值，表示對外部節點是深拷貝仍是淺拷貝，默認是淺拷貝（false）。
      • 雖然第二個參數是可選的，可是建議老是保留這個參數，並設爲 true
      • 注意，document.importNode() 方法只是拷貝外部節點，這時該節點的父節點是null。下一步還必須將這個節點插入當前文檔樹。
      • var iframe = document.getElementsByTagName('iframe')[0];
var oldNode = iframe.contentWindow.document.getElementById('myNode');
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);

        上面代碼從 iframe 窗口，拷貝一個指定節點 myNode，插入當前文檔app

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程