詳解JavaScript Document對象

時間 2020-02-01

標籤詳解 javascript document 對象欄目 JavaScript 简体版

原文原文鏈接

贊助我以寫出更好的文章，give me a cup of coffee?javascript

2017最新最全前端面試題

在瀏覽器中，與用戶進行數據交換都是經過客戶端的javascript代碼來實現的，而完成這些交互工做大多數是document 對象及其部件進行的，所以document對象是一個比較重要的對象。css

document對象概述

document對象是文檔的根節點，window.document屬性就指向這個對象。也就是說，只要瀏覽器開始載入HTML文檔，這個對象就開始存在了，能夠直接調用。html

document.childNodes屬性返回該對象的全部子節點。對於HTML文檔來講，document對象通常有兩個子節點。前端

第一個子節點是document.doctype，表示文檔類型節點（DocumentType）。對於HTML5文檔來講，該節點就表明<!DOCTYPE html>。html5

第二個子節點是document.documentElement，表示元素節點（Element），表明：<html lang="en">。java

document 對象的屬性

document對象主要有以下屬性：git

屬性	說明
document.title	設置文檔標題等價於HTML的<title>標籤
document.bgColor	設置頁面背景色
document.linkColor	未點擊過的連接顏色
document.alinkColor	激活連接(焦點在此連接上)的顏色
document.fgColor	設置前景色(文本顏色)
document.vlinkColor	已點擊過的連接顏色
document.URL	設置URL屬性從而在同一窗口打開另外一網頁
document.fileCreatedDate	文件創建日期，只讀屬性
document.fileModifiedDate	文件修改日期，只讀屬性
document.fileSize	文件大小，只讀屬性
document.cookie	設置和讀出cookie
document.charset	設置字符集簡體中文:gb2312

指向其餘節點或對象的屬性

document.doctype // <!DOCTYPE html>
document.documentElement //返回文檔的根節點 <html>...</html>
document.head // <head>...</head>
document.body // <body>...</body>
document.defaultView // window

document.querySelector('textarea').focus();
document.activeElement // <textarea>

querySelector返回的是一個對象，而querySelectorAll返回的一個集合(NodeList)。IE8以上支持github

詳見：W3C selector API面試

指向特定元素集合的屬性

document.all ：文檔中全部的元素，Firefox不支持該屬性。
document.forms ：全部的form元素。
document.images：全部的img元素。
document.links：全部的a元素。
document.scripts：全部的script元素。
document.styleSheets：全部的link或者style元素。

對象方法：

方法	說明
document.write()	動態向頁面寫入內容
document.createElement(Tag)	建立一個html標籤對象
document.getElementById(ID)	得到指定ID值的對象
document.getElementsByTagName(tagname)	得到指定標籤名的對象
document.getElementsByName(Name)	得到指定Name值的對象
document.getElementsByClassName(classname)	得到指定類名的對象（html5 API）

getElementById(id)方法返回一個對象，該對象對應着文檔裏一個特定的元素節點。
getElementsByTagName()方法將返回一個對象數組，他們分別對應着文檔裏一個特定的元素節點segmentfault

write()和writeln()方法：區別在於後者在傳送到文檔中的字符串末時附加一個回車符。

querySelector方法的參數使用CSS選擇器語法，getElementById方法的參數是HTML標籤元素的id屬性。

document.querySelector('li')
document.getElementById('last')

若是有多個節點知足querySelector方法的條件，則返回第一個匹配的節點。

document.createElement()是在對象中建立一個對象，要與appendChild() 或 insertBefore()方法聯合使用。

其中，appendChild() 方法在節點的子節點列表末添加新的子節點。insertBefore() 方法在節點的子節點列表任意位置插入新的節點。

body-主體子對象

document.body //指定文檔主體的開始和結束等價於body>/body>
document.body.bgColor //設置或獲取對象後面的背景顏色
document.body.link //未點擊過的連接顏色
document.body.alink //激活連接(焦點在此連接上)的顏色
document.body.vlink //已點擊過的連接顏色
document.body.text //文本色
document.body.innerText //設置body>…/body>之間的文本
document.body.innerHTML //設置body>…/body>之間的HTML代碼
document.body.topMargin //頁面上邊距
document.body.leftMargin //頁面左邊距
document.body.rightMargin //頁面右邊距
document.body.bottomMargin //頁面下邊距
document.body.background //背景圖片
document.body.appendChild(oTag) //動態生成一個HTML對象

經常使用對象事件

document.body.onclick=」func()」 //鼠標指針單擊對象是觸發
document.body.onmouseover=」func()」 //鼠標指針移到對象時觸發
document.body.onmouseout=」func()」 //鼠標指針移出對象時觸發

圖層對象的4個屬性

document.getElementById(」ID」).innerText //動態輸出文本
document.getElementById(」ID」).innerHTML //動態輸出HTML
document.getElementById(」ID」).outerText //同innerText
document.getElementById(」ID」).outerHTML //同innerHTML

看以下例子：

<p>hello world!<span>你好</span></p>
<script>
    var p = document.getElementsByTagName('p');//集合
//    alert(p[0].textContent);//firefox
//    alert(p[0].innerText);//IE
    alert(p[0].innerHTML);//hello world!<span>你好</span>
    alert(p[0].outerHTML);//<p>hello world!<span>你好</span></p>
    alert(p[0].textContent);//hello world!你好
</script>

思惟導圖

相關標籤/搜索

每日一句

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