摘要:也就是說,只要瀏覽器開始載入文檔,這個對象就開始存在了,可以直接調用。屬性返回該對象的所有子節點。第一個子節點是,表示文檔類型節點。第二個子節點是,表示元素節點,代表。是在對象中創建一個對象,要與或方法聯合使用。
贊助我以寫出更好的文章,give me a cup of coffee?
2017最新最全前端面試題
在瀏覽器中,與用戶進行數據交換都是通過客戶端的javascript代碼來實現的,而完成這些交互工作大多數是document 對象及其部件進行的,因此document對象是一個比較重要的對象。
document對象概述document對象是文檔的根節點,window.document屬性就指向這個對象。也就是說,只要瀏覽器開始載入HTML文檔,這個對象就開始存在了,可以直接調用。
document.childNodes屬性返回該對象的所有子節點。對于HTML文檔來說,document對象一般有兩個子節點。
第一個子節點是document.doctype,表示文檔類型節點(DocumentType)。對于HTML5文檔來說,該節點就代表。
第二個子節點是document.documentElement,表示元素節點(Element),代表:。
document 對象的屬性document對象主要有如下屬性:
屬性 | 說明 |
---|---|
document.title | 設置文檔標題等價于HTML的 |
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 // document.documentElement //返回文檔的根節點 ... document.head // ... document.body // ... document.defaultView // window document.querySelector("textarea").focus(); document.activeElement //
querySelector返回的是一個對象,而querySelectorAll返回的一個集合(NodeList)。IE8以上支持
詳見: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()方法將返回一個對象數組,他們分別對應著文檔里一個特定的元素節點
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
看如下例子:
思維導圖hello world!你好
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87622.html
摘要:超詳細并且帶的跨域指南來了本文基于你了解的同源策略,并且了解使用跨域跨域的理由。使用方法就是將符合上述條件頁面的設置為同樣的二級域名。這兩個網站都是協議,端口都是,且二級域名都是。 超詳細并且帶 Demo 的 JavaScript 跨域指南來了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由。 1. JSONP 首先要介紹的跨域方法必然是 JSONP。 ...
摘要:有級級級共個級別。事件類型事件類型鼠標事件鍵盤事件事件事件處理器執行代碼的程序在事件發生時會對事件做出響應。在標簽中使用事件處理器的語法是標簽事件處理器代碼事件處理程序事件就是用戶或瀏覽器自身執行的某種動作。 DOM介紹 D(文檔)可以理解為整個Web加載的網頁文檔,O(對象)可以理解為類似window對象只來的東西,可以調用屬性和方法,這里我們說的是document對象,M(模型)可...
摘要:響應某個事件的函數就叫事件處理程序或事件偵聽器。為事件指定事件處理程序的方法主要有種。事件處理程序事件直接加在元素上。事件委托利用冒泡的原理,把事件加到父元素或祖先元素上,觸發執行效果,解決事件處理程序過多問題。事件委托優點提高性能。 JavaScript簡單入門可以看看我丑丑的Github博客JavaScript簡單入門 事件 JavaScript與HTML之間的交互是通過事件實現的...
摘要:布爾值表示捕獲階段調用事件處理程序,表示冒泡階段通過對象的方法,也可以定義事件的回調函數。對象會被作為第一個參數傳遞給事件監聽的回調函數。布爾默認值是,當設置成時用以取消事件的默認行為與中的相同。 其實這篇文章挺早之前就寫了,但是由于sf保存方面的bug,所以當時寫了一大堆,結果沒保存,覺得這個沒寫完是個不小的遺憾,今天正好有空,就給補充下了,也正好給我的javascript學習總結做...
摘要:理解的函數基礎要搞好深入淺出原型使用原型模型,雖然這經常被當作缺點提及,但是只要善于運用,其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法,包括,,。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。 怎樣使用 this 因為本人屬于偽前端,因此文中只看懂了 8 成左右,希望能夠給大家帶來幫助....(據說是阿里的前端妹子寫的) this 的值到底...
閱讀 3469·2023-04-25 21:43
閱讀 3098·2019-08-29 17:04
閱讀 797·2019-08-29 16:32
閱讀 1533·2019-08-29 15:16
閱讀 2144·2019-08-29 14:09
閱讀 2732·2019-08-29 13:07
閱讀 1623·2019-08-26 13:32
閱讀 1320·2019-08-26 12:00