深入理解DOM節點類型第七篇——文檔節點DOCUMENT

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/09/02/5821803.html
-Advertisement-
Play Games

× 目錄 [1]特征 [2]快捷訪問 [3]文檔寫入 前面的話 文檔節點document，隸屬於表示瀏覽器的window對象，它表示網頁頁面，又被稱為根節點。本文將詳細介紹文檔節點document的內容 特征 文檔節點的三個node屬性——nodeType、nodeValue、nodeName分別是 ...


×
目錄
[1]特征 [2]快捷訪問 [3]文檔寫入

前面的話

　　文檔節點document，隸屬於表示瀏覽器的window對象，它表示網頁頁面，又被稱為根節點。本文將詳細介紹文檔節點document的內容

 

特征

　　文檔節點的三個node屬性——nodeType、nodeValue、nodeName分別是9、'#document'和null

　　由於它是根節點，所以其父節點parentNode指向null，ownerDocument也指向null

console.log(document.nodeType);//9
console.log(document.nodeValue);//null
console.log(document.nodeName);//'#document'
console.log(document.parentNode);//null
console.log(document.ownerDocument);//null

 

快捷訪問

子節點

【1】<html>

　　document.documentElement屬性始終指向HTML頁面中的<html>元素　

console.log(document.documentElement.nodeName);//'HTML'

【2】<body>

　　document.body屬性指向<body>元素

console.log(document.body.nodeName);//'BODY'

【3】<!DOCTYPE>

　　document.doctype屬性指向<!DOCTYPE>標簽

　　[註意]IE8-不識別，輸出null，因為IE8-瀏覽器將其識別為註釋節點

console.log(document.doctype.nodeName);//'html'

【4】<head>

　　document.head屬性指向文檔的<head>元素

　　[註意]IE8-瀏覽器下不支持

console.log(document.head.nodeName);//'HEAD'

文檔信息

【1】title

　　<title>元素顯示在瀏覽器視窗的標題欄或標簽頁上，document.title包含著<title>元素中的文本，這個屬性可讀可寫

console.log(document.title);//Document
document.title="test";
console.log(document.title);//test

【2】URL、domain、referrer

　　URL：頁面的完整地址

　　domain：domain與URL是相互關聯的，包含頁面的功能變數名稱

　　referrer：表示鏈接到當前頁面的上一個頁面的URL，在沒有來源頁面的時，可能為空

　　[註意]上面這些信息都來自請求的HTTP頭部，只不過可以通過這三個屬性在javascript中訪問它而已

console.log(document.URL);//http://www.cnblogs.com/xiaohuochai/
console.log(document.domain);//www.cnblogs.com
console.log(document.referrer);//http://home.cnblogs.com/followees/

　　在這3個屬性中，只有domain是可以設置的。但由於安全方面的限制，也並非可以給domain設罝任何值。如果URL中包含一個子功能變數名稱，例如home.cnblogs.com,那麼就只能將domain設置為"cnblogs.com"。不能將這個屬性設置為URL中不包含的域

document.domain = 'cnblogs.com';//"cnblogs.com"
//Uncaught DOMException: Failed to set the 'domain' property on 'Document': 'qq.com' is not a suffix of 'cnblogs.com'
document.domain = 'qq.com';

【3】baseURI

　　document.baseURI返回<base>標簽中的URL，如果沒有設置<base>，則該值與document.URL相同

console.log(document.baseURI);'//http://www.cnblogs.com/xiaohuochai/'

<base href="http://www.baidu.com"> 
<script>
console.log(document.baseURI);//'http://www.baidu.com/'
</script>

【4】字元集charset

　　document.charset表示文檔中實際使用的字元集

console.log(document.charset);//'UTF-8'

【5】defaultView

　　document.defaultView保存著一個指針，指向擁有給定文檔的視窗或框架。IE8-瀏覽器不支持defaultView屬性，但IE中有一個等價的屬性名叫parentWindow。所以要確定文檔的歸屬視窗，其相容寫法為：　　

var parentWindow = document.defaultView || document.parentWindow;//Window

【6】相容模式compatMode

　　document.compatMode表示文檔的模式，在標準模式下值為"CSS1Compat"，在相容模式下值為"BackCompat"

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
console.log(document.compatMode)//CSS1Compat
</script>
</body>
</html>  
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
console.log(document.compatMode)//BackCompat
</script>
</body>
</html>

【7】文檔模式documentMode

　　document.documentMode屬性表示當前的文檔模式

　　[註意]該屬性只有IE11-瀏覽器支持

//IE11返回11，IE10返回10，IE9返回9，IE8返回8，IE7返回7，IE6返回6
console.log(document.documentMode);

【8】時間戳lastModified

　　document.lastModified屬性返回當前文檔最後修改的時間戳，格式為字元串

console.log(document.lastModified); //09/02/2016 15:36:15

節點集合

【1】anchors

　　document.anchors包含文檔中所有帶name特性的<a>元素

<a href= "#" name="a1">a1</a>
<a href= "#" name="a2">a2</a>
<a href= "#" >3</a>
<script>
console.log(document.anchors.length)//2
</script>

【2】links

　　document.links包含文檔中所有帶href特性的<a>元素

<a href="#">1</a>
<a href="#">2</a>
<a>3</a>
<script>
console.log(document.links.length)//2
</script>

【3】forms

　　document.forms包含文檔中所有的<form>元素，與document.getElementsByTagName("form")結果相同

<form action="#">1</form>
<form action="#">2</form>
<script>
console.log(document.forms.length)//2
</script>

【4】images

　　document.images包含文檔中所有的<img>元素，與document.getElementsByTagName('img')結果相同

<img src="#" alt="#">
<img src="#" alt="#">
<script>
console.log(document.images.length)//2
</script>

【5】scripts

　　document.scripts屬性返回當前文檔的所有腳本(即script標簽)

<script>
console.log(document.scripts.length)//1
</script>

　　以上五個屬性返回的都是HTMLCollection對象實例

　　[註意]關於HTMLCollection等動態集合的詳細信息移步至此

console.log(document.links instanceof HTMLCollection); // true
console.log(document.images instanceof HTMLCollection); // true
console.log(document.forms instanceof HTMLCollection); // true
console.log(document.anchors instanceof HTMLCollection); // true
console.log(document.scripts instanceof HTMLCollection); // true

　　由於HTMLCollection實例可以用HTML元素的id或name屬性引用，因此如果一個元素有id或name屬性，就可以在上面這五個屬性上引用

<form name="myForm">
<script>
console.log(document.myForm === document.forms.myForm); // true    
</script>

 

文檔寫入方法

　　將輸出流寫入到網頁的能力有4個方法：write()、writeln()、open()、close()

write()和writeln()

　　write()和writeln()方法都接收一個字元串參數，即要寫入到輸出流中的文本

　　write()會原樣寫入，而writeln()則在字元串的末尾添加一個換行符(\n)，但換行符會被頁面解析為空格

　　在頁面被載入的過程中，可以使用這兩個方法向頁面中動態地加入內容

<button id="btn">替換內容</button>
<script>
btn.onclick = function(){
    document.write('123');
    document.writeln('abc');
    document.write('456');
}    
</script>

open()和close()

　　open()和close()方法分別用於打開和關閉網頁的輸出流

　　open()方法實際上等於清除當前文檔

<button id="btn">清除內容</button>
<script>
btn.onclick = function(){
    document.open();
}    
</script>

　　close()方法用於關閉open方法所新建的文檔。一旦關閉，write方法就無法寫入內容了。如果再調用write方法，就等同於又調用open方法，新建一個文檔，再寫入內容。所以，實際上，close()只是和open()方法配套使用而已

<button id="btn">替換內容</button>
<script>
//相當於'123'又把'1'覆蓋了
btn.onclick = function(){
    document.open();
    document.write('1');
    document.close();
    document.write('123');
}    
</script>

　　一般地，先使用open()方法用於新建一個文檔，然後使用write()和writeln()方法寫入文檔，最後使用close()方法，停止寫入

<button id="btn">替換內容</button>
<script>
btn.onclick = function(){
    document.open();
    document.writeln('hello');
    document.write('world');
    document.close();    
}
</script>

　　[註意]如果是在頁面載入期間使用write()和writeln()方法，則不需要用到這兩個方法 

<button id="btn">內容</button>
<script>
document.writeln('hello');
document.write('world');
</script>

 

最後

　　節點類型系列終於完結了

　　DOM共有12種節點類型。其中，常用的有Element元素節點、Attribute特性節點、Text文本節點、Comment註釋節點、Document文檔節點和DocumentFragment文檔片段節點

　　歡迎交流


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【高級功能】使用Web存儲
    Web存儲允許我們在瀏覽器里保存簡單的鍵/值數據。Web存儲和cookie很相似，但它有著更好的實現方式，能保存的數據量也很大。這兩種類型共用相同的機制，但是被保存數據的可見性和壽命存在區別。 PS:還有一種存儲規範名為“索引資料庫API”（Indexed Database API），它允許保存富格 ...
  • 【高級功能】使用地理定位
    地理定位（Geolocation）API讓我們可以獲取用戶當前地理位置的信息（或者至少是正在運行瀏覽器的系統的位置）。它不是HTML5規範的一部分，但經常被歸組到與HTML5相關的新功能中。 1. 使用地理定位 我們通過全局屬性 navigator.geolocation 訪問地理定位功能，它會返回 ...
  • jquery基本選擇器(.class選擇器)
    ...
  • jquery基本選擇器標簽名選擇器
    詳細解釋： ...
  • jquery基本選擇器id
    詳細解釋： ...
  • Vue數據綁定
    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 雙括弧用來數據綁定 (1)寫法一: {{message}},這種可以實時響應 (2)寫法二: {{*message}},單次插值,今後的數據變化就不會再引起插值 ...
  • 亂碼引起的CSS失效原理，解決技巧。
    由於一個中文是兩個字元組成，在編碼不一致的情況下會引發字元的“重新”組合，（半個漢字的編碼字元與後面的字元組合生成新的“文字”）引發原本的結束符合“變異”，從而導致找不到結束符號，使得後面的CSS就會失效。小技巧1：CSS中出現的亂碼都是由於CSS字元編碼與頁面的字元編碼不一致所引起的，因此最直接的 ...
  • a標簽中調用js方法
    1. a href="javascript:void(0);" onclick="js_method()" 這種方法是很多網站最常用的方法，也是最周全的方法，onclick方法負責執行js函數，而void是一個操作符，void(0)返回undefined，地址不發生跳轉。而且這種方法不會像第一種方法 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類