Document 對象

Document 對象集合

1. all[]

返回對文檔中所有 HTML 元素的引用

說明

all[] 是一個多功能的類似數組的對象，它提供了對文檔中所有 HTML 元素的訪問。all[] 數組源自 IE 4 並且已經被很多其他的瀏覽器所採用。

all[] 已經被 Document 接口的標準的 getElementById() 方法和 getElementsByTagName() 方法以及 Document 對象的 getElementsByName() 方法所取代。儘管如此，這個 all[] 數組在已有的代碼中仍然使用。

all[] 包含的元素保持了最初的順序，如果你知道它們在數組中的確切數字化位置，可以直接從數組中提取它們。然而，更爲常見的是使用 all[] 數組，根據它們的 HTML 屬性 name 或 id 來訪問元素。如果多個元素擁有指定的 name，將得到共享同一名稱的元素的一個數組。

document.write(document.all["i"])
document.write(document.all["name"])

2. anchors []

返回對文檔中所有 Anchor 對象的引用，A標籤

document.anchors[]

<html>

<body>
<a name="first">First anchor</a><br />
<a name="second">Second anchor</a><br />
<a name="third">Third anchor</a><br />
<br />

Number of anchors in this document:
<script type="text/javascript">
document.write(document.anchors.length)
</script>
</body>

</html>

3. applets

返回對文檔中所有 Applet 對象的引用

document.applets

4. forms[]

返回對文檔中所有 Form 對象引用

document.forms[]

<html>
<body>

<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>

<script type="text/javascript">
document.write("This document contains: ")
document.write(document.forms.length + " forms.")
</script>

</body>
</html>

5. images[]

返回對文檔中所有 Image 對象的引用

提示：註釋：爲了與 0 級 DOM 兼容，該集合不包括由標記定義的圖像。

document.images[]

<html>

<body>
<img border="0" src="hackanm.gif" width="48" height="48">
<br />
<img border="0" src="compman.gif" width="107" height="98">
<br /><br />

<script type="text/javascript">
document.write("This document contains: ")
document.write(document.images.length + " images.")
</script>
</body>

</html>

6. links []

返回對文檔中所有 Area 和 Link 對象的引用

document.links[]

<html>
<body>

<img src="planets.gif" 
width="145" height="126" 
usemap="#planetmap" />

<map name="planetmap">
<area id="venus" shape="circle" 
coords="124,58,8" 
alt="Venus"
href="venus.htm" />
</map>
<br />

Number of links in this document:
<script type="text/javascript">
document.write(document.links.length)
</script>

</body>
</html>

7. scripts[]

返回頁面中所有腳本的集合

document.scripts[]

<html>
    <head>
    <meta charset="utf-8">
    <title>zsh</title>
</head>
<body>

<script type="text/javascript">
document.write(document.links.length)
</script>

</body>
</html>

Document 對象屬性

每個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。

提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。

1. body

提供對元素的直接訪問。對於定義了框架集的文檔，該屬性引用最外層的。

設置或返回與當前文檔有關的所有 cookie

說明

該屬性是一個可讀可寫的字符串，可使用該屬性對當前文檔的 cookie 進行讀取、創建、修改和刪除操作。

提示：該屬性的行爲與普通的讀/寫屬性是不同的。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

標準寫法

document.cookie="cookie1=value; cookie2=value; cookie3=value;

過期時間

document.cookie="username=John Doe; expires=Thu, 18 Dec 2018 12:00:00 GMT"

Cookie路徑

document.cookie="username=John Doe; expires=Thu, 18 Dec 2018 12:00:00 GMT; path=/";

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

刪除 cookie 非常簡單。您只需要設置 expires 參數爲以前的時間即可
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

函數解析：

以上的函數參數中，cookie 的名稱爲 cname，cookie 的值爲 cvalue，並設置了 cookie 的過期時間 expires。
該函數設置了 cookie 名、cookie 值、cookie過期時間。

function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

函數解析：

cookie 名的參數爲 cname。
創建一個文本變量用於檢索指定 cookie :cname + “=”。
使用分號來分割 document.cookie 字符串，並將分割後的字符串數組賦值給 ca (ca = document.cookie.split(‘;’))。
循環 ca 數組 (i=0;i

function checkCookie()
{
  var username=getCookie("username");
  if (username!="")
  {
    alert("Welcome again " + username);
  }
  else 
  {
    username = prompt("Please enter your name:","");
    if (username!="" && username!=null)
    {
      setCookie("username",username,365);
    }
  }
}

function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

函數解析：

如果設置了 cookie，將顯示一個問候信息。
如果沒有設置 cookie，將會顯示一個彈窗用於詢問訪問者的名字，並調用 setCookie 函數將訪問者的名字存儲 365 天

3. activeElement

返回文檔中當前獲得焦點的元素

返回值: 當前獲得焦點的元素。

注意：該屬性是隻讀的。

提示：爲元素設置焦點，可以使用 element.focus() 方法。

提示：可以使用 document.hasFocus() 方法來查看當前元素是否獲取焦點。

瀏覽器支持

google	IE	firefox	safari	opera
2.0	4.0	3.0	4.0	9.6

document.activeElement

4. addEventListener

用於向文檔添加事件句柄

返回值: 沒有返回值。

提示：可以使用 document.removeEventListener() 方法來移除 addEventListener() 方法添加的事件句柄。

提示：IE9以下使用 element.addEventListener() 方法爲指定元素添加事件句柄。

瀏覽器支持

google	IE	firefox	safari	opera
1.0	9.0	1.0	1.0	7.0

document.addEventListener(event, function, useCapture)

參數

必需
- event 描述事件名稱的字符串。注意：不要使用 “on” 前綴。例如，使用 “click” 來取代 “onclick”。
- function 描述了事件觸發後執行的函數。
  當事件觸發時，事件對象會作爲第一個參數傳入函數。事件對象的類型取決於特定的事件。例如， “click” 事件屬於 MouseEvent(鼠標事件) 對象。
可選
- useCapture 布爾值，指定事件是否在捕獲或冒泡階段執行。可能值：
  true - 事件句柄在捕獲階段執行
  false- 默認。事件句柄在冒泡階段執行。
  在 Firefox 6 和 Opera 11.60 中 useCapture 參數是可選的。（在 Chrome、IE 和 Safari 中一直都是可選的）。

document.addEventListener("click", myFunction);

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}

5. baseURI

返回 HTML 文檔的基礎URI

返回值: 字符串, 代表節點頁面的URI。

瀏覽器支持

google	IE	firefox	safari	opera
true	false	true	true	true

document.baseURI

console.log(document.baseURI)

6. createAttribute

用於創建一個指定名稱的屬性，並返回Attr 對象屬性

返回值: 創建的屬性。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.createAttribute(attributename)

參數

必需
- attributename 要創建的屬性名稱。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
    <style>
        .democlass{
            color:red;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
    <p id="demo">單擊按鈕來創建一個“類”屬性值“democlass”插入到上面的H1元素。</p>
    <button onclick="myFunction()">點我</button>
</body>
<script>
    function myFunction(){
        var h1=document.getElementsByTagName("H1")[0];
        var att=document.createAttribute("class");
        att.value="democlass";
        h1.setAttributeNode(att);
    }
</script>
</html>

7. createComment

可創建註釋節點

返回值: 創建的註釋節點。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.createComment(text)

參數

可選
- text 添加的註釋文本。

<script>
    var Cdom = document.createComment("This is Comment Dom");
    document.body.appendChild(Cdom)
</script>

8. createDocumentFragment

創建了一虛擬的節點對象，節點對象包含所有屬性和方法

當你想提取文檔的一部分，改變，增加，或刪除某些內容及插入到文檔末尾可以使用createDocumentFragment() 方法。
你也可以使用文檔的文檔對象來執行這些變化，但要防止文件結構被破壞，createDocumentFragment() 方法可以更安全改變文檔的結構及節點。

返回值: 創建文檔片段對象。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.createDocumentFragment()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

<ul><li>Coffee</li><li>Tea</li></ul>
<p id="demo">單擊按鈕更改列表項,使用createDocumentFragment方法,然後在列表的最後一個孩子添加列表項。</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction(){
    var d=document.createDocumentFragment();
    d.appendChild(document.getElementsByTagName("LI")[0]);
    d.childNodes[0].childNodes[0].nodeValue="Milk";
    document.getElementsByTagName("UL")[0].appendChild(d);
};

</script>

</body>
</html>

9. createElement

通過指定名稱創建一個元素

返回值: 創建的元素節點。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.createElement(nodename)

參數

必需
- nodename 創建元素的名稱。

var aLink = document.createElement("a");

aLink.href = 'http://www.zshgrwz.cn';
aLink.target = "_blank";
aLink.innerText = "我是被創建的A標籤哦";

document.body.appendChild(aLink)

10. createTextNode

創建文本節點

返回值: 創建的文本節點。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.createElement(text)

參數

必需
- text 文本節點的文本。

var aLink = document.createElement("a");

aLink.href = 'http://www.zshgrwz.cn';
aLink.target = "_blank";

var text = document.createTextNode("我是被創建的A標籤哦");

aLink.appendChild(text)

document.body.appendChild(aLink)

11. doctype

返回與文檔相關的文檔類型聲明

返回值: 文檔的文檔類型, 作爲一個 DocumentType 對象。

注意：如果文檔沒有指定文檔類型,返回值爲 null.

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

注意： Internet Explorer 8 及 IE 更早版本顯示HTML 和 XHTML文檔時該屬性返回 null ,但是支持 XML 文檔。

document.doctype

console.log(document.doctype);

12. documentElement

以一個元素對象返回一個文檔的文檔元素。HTML 文檔返回對象爲HTML元素。

注意：如果 HTML 元素缺失，返回值爲 null。

返回值: 文檔的文檔元素,作爲一個元素對象。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.documentElement

console.log(document.documentElement);

13. documentURI

可設置或返回文檔的位置。
如果文檔由 DocumentImplementation 對象創建, 或者如果它未定義，則返回 null。

返回值: 字符串, 代表文檔的URI。

瀏覽器支持

google	IE	firefox	safari	opera
true	false	true	true	true

除了 Internet Explorer 瀏覽器，其他瀏覽器都支持 documentURI 屬性。

document.documentURI

console.log(document.documentURI);

14. domain

返回下載當前文檔的服務器域

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.domain

console.log(document.domain);

15. embeds

返回文檔中所有嵌入的內容（embed）集合

document.embeds

console.log(document.embeds);

16. getElementsByClassName

返回文檔中所有指定類名的元素集合，作爲 NodeList 對象

NodeList 對象代表一個有順序的節點列表。NodeList 對象我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始)。

提示：你可以使用 NodeList 對象的 length 屬性來確定指定類名的元素個數，並循環各個元素來獲取你需要的那個元素。

返回值

NodeList 對象，表示指定類名的元素集合。元素在集合中的順序以其在代碼中的出現次序排序。

瀏覽器支持

google	IE	firefox	safari	opera
4.0	9.0	3.0	3.1	9.5

document.getElementsByClassName(classname)

參數

必需
- classname 你需要獲取的元素類名。
  多個類名使用空格分隔，如 “test demo”。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

<div class="example">第一 Div 元素 class="example"。</div>
<div class="example">第二個 Div 元素 class="example"。</div>
<p>點擊按鈕修改第一個 Div 元素的文本信息（索引值爲 0 的 class="example")。</p>
<button onclick="myFunction()">點我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<script>
function myFunction() {
    var x = document.getElementsByClassName("example");
    x[0].innerHTML = "Hello World!";
}
</script>

</body>
</html>

17. getElementById

可返回對擁有指定 ID 的第一個對象的引用

HTML DOM 定義了多種查找元素的方法，除了 getElementById() 之外，還有 getElementsByName() 和 getElementsByTagName()。

如果沒有指定 ID 的元素返回 null

如果存在多個指定ID的元素則返回 undefined。

提示：擁有ID屬性的DOM元素會在Window下創建一個同名對象，此對象就是這個DOM元素。

返回值

指定ID的元素

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.getElementById(elementID)

參數

必需
- elementID 元素ID屬性值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

<p id="demo">單擊按鈕來改變這一段中的文本。</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction(){
    document.getElementById("demo").innerHTML="Hello World";
};

</script>

</body>
</html>

18. getElementsByName

返回帶有指定名稱的對象的集合

返回值

指定name的元素集合。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.getElementsByName(name)

參數

必需
- name 元素name屬性值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
<script>
function getElements(){
    var x=document.getElementsByName("x");
    alert(x.length);
}
</script>
</head>
<body>

貓:
<input name="x" type="radio" value="貓">
狗:
<input name="x" type="radio" value="狗">
<input type="button" onclick="getElements()" value="多少名稱爲 'x'的元素?">

</body>
</html>

19. getElementsByTagName

返回帶有指定標籤名的對象的集合

提示：參數值 “*” 返回文檔的所有元素。

返回值

指定標籤名的元素集合。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.getElementsByTagName(tagname)

參數

必需
- tagname 你要獲取元素的標籤名。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

<p id="demo">單擊按鈕來改變這一段中的文本。</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction(){
    document.getElementsByTagName("P")[0].innerHTML="Hello World";
};
</script>

</body>
</html>

20. implementation

返回處理該文檔的 DOMImplementation 對象

提示：參數值 “*” 返回文檔的所有元素。

返回值

文檔的 implementation 對象, 作爲一個DocumentImplementation 對象。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.implementation

console.log(document.implementation);

21. importNode

把一個節點從另一個文檔複製到該文檔以便應用

imported 節點可以試試任何節點類型。

如果第二個值設置爲 true，那麼還要複製該節點的所有子孫節點。

返回值

另一個文檔的節點。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

注意： Internet explorer 8 及 IE 更早版本不支持該方法。

document.importNode(node,deep)

參數

必需
- node 要獲取的節點。
- deep 如果爲 true，還要遞歸複製 importedNode 節點的所有子孫節點。

提示：非本域名下網址涉及到跨域請求無法直接獲取信息

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

<button onclick="myFunction()">點我</button>
<p id="demo">點擊上面的按鈕以獲取和顯示在iframe第一個H1元素的值:</p>
<script>
function myFunction(){
    var frame=document.getElementsByTagName("iframe")[0]
    var h=frame.contentWindow.document.getElementsByTagName("h1")[0];
    var x=document.importNode(h,true);
    document.getElementById("demo").appendChild(x);
};
</script>
<iframe src="http://www.zshgrwz.cn" style="height:280px;width:420px;"></iframe>
<p><strong>Note:</strong> IE 8 及更早的版本不支持importNote方法</p>

</body>
</html>

22. inputEncoding

可返回文檔的編碼（在解析時）

返回值

字符串，返回文檔編碼。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	false

注意： Internet explorer 8 及 IE 更早版本不支持該方法。

document.inputEncoding

console.log(document.inputEncoding)

23. lastModified

合併相鄰的文本節點並刪除空的文本節點

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

node.normalize()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

<p id="demo">點擊一個按鈕來添加文本,點擊另一個按鈕規範化文檔</p>
<button onclick="addTextNode()">添加一個文本節點</button>
<button onclick="normPara()">規範文本</button>
<script>
function addTextNode(){
    var y=document.createTextNode(" Click again");
    var x=document.getElementById("demo");
    x.appendChild(y);
    var z=document.getElementById("cc");
    z.innerHTML=x.childNodes.length;
}
function normPara(){
    document.normalize();
    var x=document.getElementById("demo");  
    var z=document.getElementById("cc");
    z.innerHTML=x.childNodes.length;
}
</script>
<p>上面的段落有 <span id="cc">1</span>個子節點。</p>

</body>
</html>

24. open

打開一個輸出流來收集 document.write() 或 document.writeln() 方法輸出的內容。

調用 open() 方法打開一個新文檔並且用 write() 方法設置文檔內容後，必須記住用 document.close() 方法關閉文檔，並迫使其內容顯示出來。

注意：如果目標文件已經存在，它將被清除。如果這個方法沒有參數，會顯示一個新窗口(about:blank)。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.open(MIMEtype,replace)

參數

可選
- MIMEtype 規定正在寫的文檔的類型。默認值是 “text/html”。
- replace 當此參數設置後，可引起新文檔從父文檔繼承歷史條目。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>zsh</title> 
<script> 
function createDoc(){ 
    var doc=document.open("text/html","replace"); 
    var txt="<!DOCTYPE html><html><body>學習 HTML DOM 很有趣!</body></html>"; 
    doc.write(txt); 
    doc.close(); 
} 
</script> 
</head> 

<body> 
<input type="button" value="新文檔" onclick="createDoc()"> 
</body> 
</html>

25. querySelector

返回文檔中匹配指定 CSS 選擇器的一個元素

注意： querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代。

返回值

CSS 選擇器的第一個元素。如果沒有找到，返回 null。如果指定了非法選擇器則拋出 SYNTAX_ERR 異常。

瀏覽器支持

google	IE	firefox	safari	opera
4.0	8.0	3.5	3.1	10.0

document.querySelector(CSS selectors)

參數

可選
- CSS selectors 指定一個或多個匹配元素的 CSS 選擇器。可以使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。對於多個選擇器，使用逗號隔開，返回一個匹配的元素。

document.querySelector('body')

26. querySelectorAll()

是 HTML5中引入的新方法，返回文檔中匹配的CSS選擇器的所有元素節點列表

返回值

CSS 選擇器的所有元素。如果沒有找到，返回 null。如果指定了非法選擇器則拋出 SYNTAX_ERR 異常。

瀏覽器支持

google	IE	firefox	safari	opera
4.0	8.0	3.5	3.1	10.0

document.querySelectorAll(CSS selectors)

參數

可選
- CSS selectors 指定一個或多個匹配元素的 CSS 選擇器。可以使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。對於多個選擇器，使用逗號隔開，返回一個匹配的元素。

document.querySelectorAll('body')

27. readyState

返回當前文檔的狀態（載入中……）

返回值

uninitialized - 還未開始載入
loading - 載入中
interactive - 已加載，文檔與用戶可以開始交互
complete - 載入完成

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.readyState

document.write(document.readyState);

28. referrer

返回載入當前文檔的來源文檔的URL
如果當前文檔不是通過超級鏈接訪問的，則爲 null。這個屬性允許客戶端 JavaScript 訪問 HTTP 引用頭部。

返回值

返回載入當前文檔的來源文檔的URL

注意：本地調試無用

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.referrer

document.write(document.referrer);

29. removeEventListener

用於移除由 document.addEventListener() 方法添加的事件句柄

注意: 如果要移除事件句柄，addEventListener() 的執行函數必須使用外部函數，匿名函數，類似 “document.removeEventListener(“event”, function(){ myScript });” 該事件是無法移除的。

瀏覽器支持

google	IE	firefox	safari	opera
1.0	9.0	1.0	1.0	7.0

注意： Internet Explorer 8 及更早IE版本不支持 removeEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。但是，對於這些不支持該函數的瀏覽器，你可以使用 detachEvent() 方法來移除由 attachEvent() 方法添加的事件句柄，具體查看

document.removeEventListener(event, function, useCapture)

參數：

必需
- event 要移除的事件名稱。注意：不要使用 “on” 前綴。例如，使用 “click” ,而不是使用 “onclick”。
- funciton 指定要移除的函數。
可選
- useCapture 布爾值，指定移除事件句柄的階段。
- - true - 事件句柄在捕獲階段移除
- - false- 默認。事件句柄在冒泡階段移除
- 注意：如果添加兩次事件句柄，一次在捕獲階段，一次在冒泡階段，你必須單獨移除該事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

<p> Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法。</p>
<p>該實例演示了跨瀏覽器的解決方法。</p>
<p>文檔中使用 addEventListener() 方法添加 onmousemove 事件句柄，當鼠標移動時會顯示隨機數。</p>
<p>點擊按鈕移除事件句柄。</p>
<button onclick="removeHandler()" id="myBtn">點我</button>
<p id="demo"></p>
<script>
if (document.addEventListener) {
    document.addEventListener("mousemove", myFunction);
} else if (document.attachEvent) {
    document.attachEvent("onmousemove", myFunction);
}
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    if (document.removeEventListener) {
        document.removeEventListener("mousemove", myFunction);
    } else if (document.detachEvent) {
        document.detachEvent("onmousemove", myFunction);
    }
}
</script>

</body>
</html>

30. title

可返回當前文檔的標題（ HTML title 元素中的文本）

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.title

console.log(document.title);

31. URL

可返回當前文檔的 URL

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.URL

console.log(document.URL);

32. write

法可向文檔寫入 HTML 表達式或 JavaScript 代碼

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.write(exp1,exp2,exp3,...)

參數

可選
- exp1,exp2,exp3,… 要寫入的輸出流。多個參數可以列出，他們將按出現的順序被追加到文檔中。

document.write("exp1,exp2,exp3,...");

33. writeln

writeln() 方法與 write() 方法作用相同，外加可在每個表達式後寫一個換行符

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

document.writeln(exp1,exp2,exp3,...)

參數

可選
- exp1,exp2,exp3,… 要寫入的輸出流。多個參數可以列出，他們將按出現的順序被追加到文檔中。

document.writeln("exp1,exp2,exp3,...");
document.writeln("exp1,exp2,exp3,...");

警告 !!!

在 W3C DOM核心，文檔對象繼承節點對象的所有屬性和方法。很多屬性和方法在文檔中是沒有意義的。

HTML 文檔對象可以避免使用這些節點對象和屬性：

document.attributes
document.hasAttributes()
document.nextSibling
document.nodeName
document.nodeType
document.nodeValue
document.ownerDocument
document.ownerElement
document.parentNode
document.previousSibling
document.textContent

文檔內容出自 W3cSchool和菜鳥教程，
如需查看更詳細的有關內容請登錄 http://www.w3school.com.cn/ 和 http://www.runoob.com/

zzzzzzz周紹輝

發佈了44 篇原創文章 · 獲贊 12 · 訪問量 5萬+

私信關注

Document 對象集合

1. all[]

說明

2. anchors []

3. applets

4. forms[]

5. images[]

提示：註釋：爲了與 0 級 DOM 兼容，該集合不包括由 標記定義的圖像。

6. links []

7. scripts[]

Document 對象屬性

提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。

1. body

2. cookie

說明

提示：該屬性的行爲與普通的讀/寫屬性是不同的。

瀏覽器支持

標準寫法

過期時間

Cookie路徑

修改 Cookie

刪除 Cookie

設置 cookie 值的函數

函數解析：

獲取 cookie 值的函數

函數解析：

檢測 cookie 值的函數

函數解析：

3. activeElement

返回值: 當前獲得焦點的元素。

注意： 該屬性是隻讀的。

提示： 爲元素設置焦點，可以使用 element.focus() 方法。

提示：可以使用 document.hasFocus() 方法來查看當前元素是否獲取焦點。

瀏覽器支持

4. addEventListener

返回值: 沒有返回值。

提示： 可以使用 document.removeEventListener() 方法來移除 addEventListener() 方法添加的事件句柄。

提示：IE9以下使用 element.addEventListener() 方法爲指定元素添加事件句柄。

瀏覽器支持

參數

5. baseURI

返回值: 字符串, 代表節點頁面的URI。

瀏覽器支持

6. createAttribute

返回值: 創建的屬性。

瀏覽器支持

參數

7. createComment

返回值: 創建的註釋節點。

瀏覽器支持

參數

8. createDocumentFragment

返回值: 創建文檔片段對象。

瀏覽器支持

9. createElement

返回值: 創建的元素節點。

瀏覽器支持

參數

10. createTextNode

返回值: 創建的文本節點。

瀏覽器支持

參數

11. doctype

返回值: 文檔的文檔類型, 作爲一個 DocumentType 對象。

注意： 如果文檔沒有指定文檔類型,返回值爲 null.

瀏覽器支持

注意： Internet Explorer 8 及 IE 更早版本顯示HTML 和 XHTML文檔時該屬性返回 null ,但是支持 XML 文檔。

12. documentElement

注意： 如果 HTML 元素缺失，返回值爲 null。

返回值: 文檔的文檔元素,作爲一個元素對象。

瀏覽器支持

13. documentURI

返回值: 字符串, 代表文檔的URI。

瀏覽器支持

14. domain

瀏覽器支持

15. embeds

16. getElementsByClassName

提示： 你可以使用 NodeList 對象的 length 屬性來確定指定類名的元素個數，並循環各個元素來獲取你需要的那個元素。

提示：註釋：爲了與 0 級 DOM 兼容，該集合不包括由標記定義的圖像。

注意：該屬性是隻讀的。

提示：爲元素設置焦點，可以使用 element.focus() 方法。

提示：可以使用 document.removeEventListener() 方法來移除 addEventListener() 方法添加的事件句柄。

注意：如果文檔沒有指定文檔類型,返回值爲 null.

注意：如果 HTML 元素缺失，返回值爲 null。

提示：你可以使用 NodeList 對象的 length 屬性來確定指定類名的元素個數，並循環各個元素來獲取你需要的那個元素。

提示：參數值 “*” 返回文檔的所有元素。

提示：參數值 “*” 返回文檔的所有元素。

注意： Internet Explorer 8 及更早IE版本不支持 removeEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。但是，對於這些不支持該函數的瀏覽器，你可以使用 detachEvent() 方法來移除由 attachEvent() 方法添加的事件句柄，具體查看