10.1.2 Document類型

Document類型表示文檔，document對象是HTMLDocument的一個實例，document是window對象的一個屬性：

Document節點的特征：

• nodeType=9
• nodeName=”#document”
• nodeValue=null
• parentNode=null
• ownerDocument=null

子節點可能是：DocumentType()、Element(html)、ProcessingInstruction或注釋

1、文檔的子節點

當HTML文檔結構如下時：

以下三種方式都可以表示html節點：

• document.documentElement
• document.childNodes[0]
• document.firstChild

document.body可直接指向body元素

document.doctype可直接指向

IE8及以前版本，會將當作Comment節點，而document.doctype始終為null

IE9+與firefox，將作為文檔的第一個子節點，可通過document.firstChild和document.childNodes[0]和document.doctype來訪問。

在safari、Chrome和Opera中，用document.docType表示，但不在document.childNodes中。

2、文檔信息

以下為示例代碼：

第10章 1 2

ul中的p

abc

// document.title代表中的文本，注意不是title節點alert(document.title); // 第10章// 還可設置標題，源碼中還是原來的文本document.title = "設置的新的title";// 取得完整的URLalert(document.URL);// 取得域名alert(document.domain);// 取得來源頁面的URLalert(document.referrer);

3、查找元素

// 獲取id="outer"的節點，id名字區分大小寫var div = document.getElementById("outer");// 根據標簽名獲得節點var liNodes = document.getElementsByTagName("li");

注意上述兩者有差異，一個是Element，一個是Elements，多一個字母s

alert(liNodes.length); // 節點數量alert(liNodes[0].id); // 顯示第0個節點的id屬性alert(liNodes.item(0).id) // 顯示第0個節點的id屬性// 獲得name="myLi"的li元素var myli = liNodes.namedItem("myLi");var myli = liNodes['myLi'] // 此方法與上一行相同// 顯示li的id值alert(myli.id); // li2getElementsByName方法可返回給定name特性的所有元素

4、特殊集合

document.anchors// 所有帶有name屬性的元素document.applets// 所有元素document.forms// 所有元素document.images// 所有元素document.links// 所有帶有href屬性的元素

6、文檔寫入

// 重寫頁面，頁面上只有Hello world!字樣window.onload = function () { document.write("Hello world!");}// 運行到js代碼處時，向頁面中添加Hello world!字樣document.write("Hello world!");

writeln()方法會在最后加上

open()和close()則是打開和關閉網頁的輸出流

總結

以上是生活随笔為你收集整理的什么是document对象?如何获取文档对象上的元素?_javascript自学记录：Document类型...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。