js——Document類型（三)

時間 2019-11-12

標籤 document 類型欄目 JavaScript 简体版

原文原文鏈接

DOM中的Document類型

Js經過Document表示文檔類型。javascript
document對象是HTMLDocument的實例，HTMLDocument繼承自Document類型。html

document對象是window對象的一個屬性。java
Document與Node的關係：node

Js中因此節點類型都繼承自Node類型，節點類型都享有共同的·基本屬性和方法chrome
Document節點具備如下特徵：瀏覽器
1. nodeType的值爲9
2. nodeName的值爲「#document"
3. nodeValue、parentNode、ownerDocument的值爲null
4. 其子節點多是一個DocumentType,Element,或ProcessingInstrucion,Comment

1.文檔子節點

Document子節點多是一個DocumentType,Element,或ProcessingInstrucion,Commentdom

（1）Document節點訪問Element子節點的方式有兩種：this

documentElement屬性，該屬性始終指向HTML頁面的url

經過childNodes列表也能夠訪問文檔元素code

var html=document.documentElement;
alert(html);//[object HTMLHtmlElement]
alert(document.childNodes[1]);//[object HTMLHtmlElement]
alert(html===document.childNodes[1]);//true

doucment還有body屬性，指向元素。

window.onload=function(){
            document.body.style.backgroundColor = "yellow";//須要事件觸發
        }

（2）Document節點訪問DocumentType子節點的方式:

一般將<!DOCTYPE>標籤當作一個與文檔不一樣的實體

document.childNodes[0]

document.doctype屬性

alert(document.childNodes[0]);//[object DocumentType]
alert(document.childNodes[0]===document.doctype);//true

瀏覽器對document.doctype屬性的支持不一致

（3）對於標籤外的註釋，不一樣的瀏覽器處理的方式多是不一樣的

<!--這裏是註釋-->
<html>
<body>
....
</body>
</html>
<!--這裏是註釋-->

這個頁面看起來一個有兩個子節點：註釋，元素，註釋。可是在瀏覽器中有不一樣處理方式。有的可能忽略註釋，有的可能只爲第一個註釋創造節點，有的會將這兩種註釋都當作節點。

2.文檔信息

document做爲HTMLDocument的實例，有一些Document沒有的屬性

title屬性：獲取內的標題</p>
```
document.title="new page title"
```
URL屬性：包含頁面完整的url
domain屬性：包含頁面的域名，只有domain可設置，但不能將其設置爲URL不包含的域

referrer屬性：保存着連接到當前頁面的那個頁面的url,在沒有來源頁面的狀況下，referrer可能會包含空字符串。

var url=document.URL;
alert(url);
var domain=document.domain;//只有domain可設置
alert(domain);
var referrer=document.referrer;
alert(referrer);

3.查找元素

（1）getElementById(元素的id)

若是不存帶相應id的參數則會返回null，若是有多個元素帶相同的id，則返回文檔中第一次出現的元素

(2) getElementByTagName():接收一個參數，即要獲取的元素標籤名，返回的就是包含0或多個元素的NodeList。在html文檔中，會返回一個與NodeList類似的」動態「集合HTMLCollection。

HTMLCollection對象有一些方法和屬性：

length屬性
item()方法：訪問對象中的項，傳入索引值，和[ ]用法相似

namedItem()方法：經過元素的name特徵取得項，傳入name特徵名

<img src="1.jpg" name="myPic">
...
var images= getElementByTagName("img");
var myPic=images.namedItem("myPic");

要獲取文檔全部的元素，能夠向getElementByTagName()中傳入「*」，這樣返回HTMLCollection就包含整個頁面的全部元素，並按出現的前後順序排序。

（3）getElementByName()：該方法只有HTMLDocument纔有，這個方法會返回全部給定name特性的元素。

4.特殊集合

這些都是HTMLCollection對象爲訪問文檔經常使用部分提供的快捷方式

document.anchors:文檔中全部帶name特性的標籤

document.images:文檔中全部img標籤

document.links:文檔中全部帶href特性的標籤

5.DOM一致性檢測

因爲DOM有多個級別和部分，因此須要檢測瀏覽器實現了DOM的哪些部分。

document.implementation屬性爲此提供了相應的信息和功能對象。

document.implementation.hasFeature():接收兩個參數，要檢測的DOM功能名稱和版本號。若是瀏覽器支持就返回true.
```
alert(document.implementation.hasFeature("CSS","1.0"));//chrome中true
```

hasFeature的缺點：

實現這能夠自行決定是否與DOM規範部分保持一致。因此除了hasFeature檢測外，還可使用能力檢測。

6.文檔寫入

將輸出流寫入網頁中，有四種方法：write(),writeln(),open()和close()。每個都接收一個字符串參數，即要寫入輸出流的文本。

<body>
<p>this time is:</p>
<script type="text/javascript">
    document.write("<b>"+(new Date()).toString()+"</b>");
</script>
</body>

writeln()方法會比write()方法的後面多加「\n"。

若是在文檔加載結束後調用document.write，那麼輸出內容將重寫整個頁面

<body>
<p>this time is:</p>
<script type="text/javascript">
    
window.onload=function(){
document.write("<b>"+(new Date()).toString()+"</b>");
    }
    
</script>

</body>

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

function createNewDoc()
  {
  var newDoc=document.open("text/html","replace");
  var txt="<html><body>Learning about the DOM is FUN!</body></html>";
  newDoc.write(txt);
  newDoc.close();
  }

1. Document類
2. JS window與document
3. js window.onload && $(document).ready()
4. DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型
5. js的類型轉化三兩事兒
6. js基礎（三）數據類型轉換
7. 33 個 js 核心概念（三）：值類型與引用類型
8. js Set類型
9. js類型
10. js數據類型分類
更多相關文章...
• C# 數據類型 - C#教程
• C# 類型轉換 - C#教程
• Kotlin學習（二）基本類型
• RxJava操作符（三）Filtering

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。