当前位置：
  • 首页
    • >
  • www.icpchaxun.com

JavaScript核心之DOM

www.icpchaxun.com (2) 2小时前

本博客主要介紹內容如下：

1、DOM是什麼；

2、DOM中的Node接口的屬性；

3、DOM中的Node接口的方法；

4、DOM中的Document接口的屬性；

5、DOM中的Document接口的方法

1、DOM是什麼

  • 文檔對象模型DOM英文全稱 Document Object Model，是HTML和XML文檔的編程接口。它提供瞭對文檔的結構化的表述，並定義瞭一種方式可以使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內容。DOM 將文檔解析為一個由節點和對象（包含屬性和方法的對象）組成的結構集合。簡言之，它會將web頁面和腳本或程序語言連接起來；
  • DOM遵循W3C DOM 和WHATWG DOM標準；
  • 所有操作和創建web頁面的屬性，方法和事件都會被組織成對象的形式；
  • DOM 並不是一個編程語言；
  • 不同的瀏覽器都有對DOM不同的實現， 這些實現對當前的DOM標準而言，都會呈現出不同程度的一致性，每個web瀏覽器都會使用一些文檔對象模型，從而使頁面可以被腳本語言訪問；
  • 許多對象都實現瞭多個接口（API）供使用；
  • 重要的數據類型：
  1. document
  2. element
  3. nodeList
  4. attribute
  5. namedNodeMap

詳細可以查看MDN鏈接

通過一張圖來加深瞭解

DOM中的D就是Document，代表文檔結構，以一顆樹的形式展示，這裡都是標簽名字以及文字內容。

DOM中的O就是Object，代表文檔轉換為對象的結構，以一顆樹的形式展示，這裡都是構造函數，前面有學到過構造函數.prototype就是一個對象。這裡最後形成的對象都與Document中的標簽和文字一一對應。

另外文本節點構成的對象後面其實還有String構造函數構造的對象

所以頁面中的節點通過構造函數，構造出對應的對象，這就是DOM的主要功能。

我們繼續在瀏覽中測試一下該對象是否相等。

在瀏覽器中文檔是window.document，也可以直接寫成document，這裡的第一個d是小寫。

而Document作為構造函數，第一個D是大寫的。

文檔中的每一個標簽都可以用一個對象來代替

API（Application Programming Interface,應用程序編程接口）是一些預先定義的函數

通過上面的圖和文字介紹，於是我可以知道JavaScript可以訪問和操作存儲在DOM中的內容，因此我們可以寫成這個近似的等式：

API (web 或 XML 頁面) = DOM + JS (腳本語言)

以上的接口都是構造函數，我們通過typeof 來測試

從上面的構造函數的情況來看們主要後綴就是分為Document、Element、Text

  • Document——根據文檔的類型（例如HTML，XML，SVG，...）分為HTMLDocument接口（使用"text/html"內容類型）和XMLDocument接口（XML和SVG文檔）；
  • Element——是非常通用的基類，所有 Document對象下的對象都繼承它，根據類型還可以分為HTMLElement接口（所有HTML元素的基礎接口）、SVGElement接口（是所有SVG元素的基本接口）、XULElement接口（在web以外的語言,像 XUL）；
  • Text——代表Element或Attr的文本內容的文本內容 ；

那麼既然HTML文檔中有所有的標簽都可以轉換成對應的對象，作為對象肯定會有原型（公用屬性）。

1、document的原型鏈

document分為HTML文檔、XML和SVG文檔，HTML文檔實現瞭HTMLDocument接口，而XML和SVG文檔實現瞭XMLDocument接口;

主要測試HTMLDocument接口

2、Element的原型鏈

Element根據類型還可以分為HTMLElement接口（所有HTML元素的基礎接口）、SVGElement接口（是所有SVG元素的基本接口）、XULElement接口（在web以外的語言,像 XUL）

主要測試HTMLDocument接口

3、Text的原型鏈

Text包括瞭Element或Attr的文本內容的文本內容

這裡主要測試Element的接口

他們最終都是引用Object構造函數所構造的對象，這跟前面說的JavaScript的幾種基本類型的原型鏈一致。

所以我們可以看到document、Element、Text原型鏈總結圖，他們在引用Object.prototype之前都引用瞭Node.prototype。

我們終於引出瞭Node

Node是一種被多種DOM類型繼承的接口接口，它允許各種類型的DOM能以同樣的方式來操作。除瞭上面三種Document、Element、Text繼承瞭Node，還有很多。

Node繼承自EventTarget，而繼承Node的屬性和方法的接口則有：Document，Element，Attr，CharacterData（Text，Comment，和CDATASection繼承原型自CharacterData），ProcessingInstruction，DocumentFragment，DocumentType，Notation，Entity，EntityReference 。

Node就可以代表其他的類型

我們在瀏覽器上測試幾個：

文本節點

元素(標簽)節點

文檔節點

所以DOM 是一棵樹（tree），樹上有 Node，Node 分為 Document（html）、Element（元素）和 Text（文本），以及其他不常用的。

2、DOM中的Node接口的屬性

我們在討論Node有哪些接口（API）的時候，其實是在討論DOM樹中的所有對象有哪些接口（API）

常用的：

  1. childNodes
  2. firstChild
  3. innerText
  4. lastChild
  5. nextSibling
  6. nodeName
  7. nodeType
  8. nodeValue
  9. outerText
  10. ownerDocument
  11. parentElement
  12. parentNode
  13. previousSibling
  14. textContent

（1）childNodes

Node.childNodes返回包含指定節點的子節點的集合，該集合為即時更新的集合（live collection）。

需要註意的是返回的子節點包括回車，回車也是一個文本節點。

（2）children

ParentNode.children 是一個隻讀屬性，返回 一個Node的子elements，是一個動態更新的 HTMLCollection。它是一個偽數組。

它返回的全是元素（標簽）節點，沒有文本節點

e81a4480f4d6a6558112119f10fdd990

(3)parentNode返回父節點(可能是元素或者非元素節點)

ParentNode 是一個原始接口，不能夠創建這種類型的對象；它在Element、Document和DocumentFragment對象上被實現。

如果上個父元素是一個元素節點，會返回元素節點。

如果上個父元素是一個非元素節點，比如文檔節點，會返回文檔節點。

(4)parentElement返回父元素節點

返回當前節點的父元素節點，如果該元素沒有父節點，或者父節點不是一個 DOM元素，則返回null。

如果上個父元素是一個元素節點，會返回元素節點。

如果上個父元素是一個非元素節點，比如文檔節點，會返回null

(5)parent​Element返回父元素（標簽）節點

返回當前節點的父元素節點，如果該元素沒有父節點，或者父節點不是一個 DOM元素，則返回null。

(6)第一個子節點(可能是文本或者元素節點)

開發者工具上面會顯示那種API來自Element或者Node

(7)第一個是元素（標簽）節點的子節點

開發者工具上面會顯示那種API來自Element或者Node

(8)最後一個子節點（可能是文本或者元素節點）

Node.lastChild

(9)最後一個是元素（標簽）節點的子節點。

(10)同級中前面的節點（可能是文本或者元素節點）

使用一次

使用兩次就可以找到前面的元素節點瞭

(11)同級中前面的元素（標簽）節點

(12)同級中後面的節點（可能是文本或者元素節點）

用一次有一個回車text節點，用兩次有一個body元素節點。

(13)同級中後面的元素（標簽）節點

(14)nodename

在XHTML(以及屬於XML類型的文檔)中,變量包含的值會是小寫的"div"，在HTML中,變量text_field包含的值會是大寫的"DIV"

返回大寫的部分情況

不是標簽的文本節點，或者SVG標簽的時候返回的就是小寫

文檔節點返回也是小寫

(15)tagName

在XHTML中 (或者其他的XML格式文件中), 會彈出小寫，而在HTML中, 會彈出大寫。

返回大寫的部分情況

SVG標簽返回小寫

非元素（標簽）節點，比如文本節點的時候返回undefined

文檔節點返回的也是undefined

如果是元素節點,nodeName屬性和tagName屬性返回相同的值,但如果是文本節點,nodeName屬性會返回"#text",而tagName屬性會返回undefined.

(16)nodeType

這裡可以用數字1到11來代替不同的node類型，因為以前的內存不夠，為瞭節省內存所有用單個數字來代替node類型。

但是後面內存越來越大，於是就可以是某個數字等於某個node類型的常量。

舉兩個例子，比如元素節點和文本節點可以直接與數字相等

DocumentFragment的性能優化屬於面試的考點

(17)ownDocument

Node.ownerDocument隻讀屬性會返回當前節點的頂層的 document 對象。

被此屬性返回的 document對象是在實際的HTML文檔中的所有子節點所屬的主對象。如果在文檔節點自身上使用此屬性，則結果是null。

如果用到瞭iframe標簽，那麼他的頂層document就不同

比如iframe裡面的document

iframe外面的document

(18)node​Value

Node.nodeValue 屬性返回或設置當前節點的值。它是一個包含當前節點的值的字符串（如果有的話）

舉兩個例子：

文本節點會返回文本節點的內容

元素（標簽）節點會返回null

另外如果一個節點通過使用childNodes[0]獲得一個文本節點後，還可以使用nodeValue，說明文本節點後面才是字符串。

所以前面的圖形應該加入字符串在文本節點後面。

(19)innerText

Node.innerText 是一個表示一個節點及其後代的“渲染”文本內容的屬性。

作為一個獲取器，如果用光標突出顯示元素的內容，然後將其復制到剪貼板，則它將近似於用戶將獲得的文本。此功能最初由Internet Explorer引入，並在所有主要瀏覽器供應商采用後於2016年在HTML標準中正式規定。

返回的是字符串

innerText針對文本節點無效，會返回undefined。

innerText針對文檔節點無效，會返回undefined。

innerText受 CSS 樣式的影響，並且不會返回隱藏元素的文本

如果CSS有display:none等隱藏的樣式，不會打印出來。

如果innerText在head標簽裡面的script標簽或者style標簽會打印出來裡面的內容

如果innerText在body標簽裡面的script標簽或者style標簽不會打印出來裡面的內容

並且，樣式也不會改變。

由於innerText受 CSS 樣式的影響，它會觸發重排（reflow）;

在 Internet Explorer (對於小於等於 IE11 的版本) 中對 innerText 進行修改， 不僅會移除當前元素的子節點，而且還會永久性地破壞所有後代文本節點（所以不可能再次將節點再次插入到任何其他元素或同一元素中）。

如果用innerText修改文本內容，會把元素的其他子節點信息都覆蓋掉

http://www.icpchaxun.com/video/1105802715170660352

(20)textContent

innerText出現在IE瀏覽器中後，Firefox和Chrome就出現瞭textContent，之後多個新版瀏覽器都可以使用，這兩個屬性。

Node.textContent屬性表示一個節點及其後代的文本內容，返回的是字符串。

innerText針對文本節點無效，會返回undefined。

如果節點是個CDATA片段，註釋，ProcessingInstruction節點或一個文本節點，textContent 返回節點內部的文本內容（即 nodeValue）。

舉例文本節點會返回文本內容，這與nodeValue效果一樣。

如果 element 是 Document，DocumentType 或者 Notation 類型節點，則 textContent 返回null。

舉例Document文檔節點會返回null

對於其他節點類型，textContent 將所有子節點的 textContent 合並後返回，除瞭註釋、ProcessingInstruction節點。如果該節點沒有子節點的話，返回一個空字符串。

在節點上設置 textContent 屬性的話，會刪除它的所有子節點，並替換為一個具有給定值的文本節點。

textContent不受CSS 樣式的影響，就算隱藏瞭文本，也會返回該文本。

如果CSS有display:none等隱藏的樣式，會打印出來。

如果textContent在head標簽裡面的script標簽或者style標簽會打印出來裡面的內容

如果textContent在body標簽裡面的script標簽或者style標簽會打印出來裡面的內容

並且，樣式也會改變。

另外如果一個節點通過使用childNodes[0]獲得一個文本節點後，還可以使用textContent，說明文本節點後面才是字符串，這與前面說到的nodeValue一樣。

如果用textContent修改文本內容，隻覆蓋文本節點

http://www.icpchaxun.com/video/1105803223360958464

如果元素後面沒有文字，隻是想增加文本節點，也可以直接用appendChild插入到末尾。

0f5ce543e74184cf9b9c6aa73942acafhttp://www.icpchaxun.com/video/1105807686138146816

(21)innerHTML

Element.innerHTML屬性設置或獲取HTML語法表示的元素的後代，返回的是字符串。

正如其名稱，innerHTML返回HTML文本。通常，為瞭在元素中檢索或寫入文本，人們使用innerHTML。但是，textContent通常具有更好的性能，因為文本不會被解析為HTML。此外，使用textContent可以防止 XSS 攻擊。

如果一個元素節點有一個文本子節點，該節點包含字符 <, >等, innerHTML 將這些字符分別返回為&lt; 和 &gt;。使用Node.textContent 可獲取一個這些文本節點內容的正確副本。

小結：

帶element和children都返回元素節點

nodename在HTML標簽中返回的是大寫，在文檔節點、SVG節點返回的是小寫。

tagName在HTML標簽中返回的是大寫，在文檔節點無效，SVG節點返回的是小寫。

innerText和textContent的區分

nodeValue和textContent的區分

innerHTML和textContent的區分

3、DOM中的Node接口的方法

方法（如果一個屬性是函數，那麼這個屬性就也叫做方法；換言之，方法是函數屬性）

常用的

  • appendChild()
  • cloneNode()
  • contains()
  • hasChildNodes()
  • insertBefore()
  • isEqualNode()
  • isSameNode()
  • removeChild()
  • replaceChild()
  • normalize() // 常規化

(1)appendChild()

Node.appendChild()方法將一個節點添加到指定父節點的子節點列表末尾。

(2)cloneNode()

Node.cloneNode(deep)方法返回調用該方法的節點的一個副本.

deep——是否采用深度克隆（深淺拷貝）,如果為true,則該節點的所有後代節點也都會被克隆,如果為false,則隻克隆該節點本身.

前面博客也有說到過深淺拷貝

如果寫瞭true，這裡的深入是指所有子代節點都拷貝，如果沒有寫true，就代表隻克隆表面的子節點

http://www.icpchaxun.com/video/1105602865497964544

如果參數deep沒有寫，一般默認都是false。

(3)contains()

Node.contains()返回的是一個佈爾值，來表示傳入的節點是否為該節點的後代節點。

(4)hasChildNodes()

hasChildNodes方法返回一個佈爾值,表明當前節點是否包含有子節點.

(5)insertBefore()

Node.insertBefore()方法在參考節點之前插入一個擁有指定父節點的子節點。

(6)isEqualNode()

Node.isEqualNode()方法可以判斷兩個節點是否相等。當兩個節點的類型相同，定義特征(defining characteristics)相同（對元素來說，即 id，孩子節點的數量等等），屬性一致等，這兩個節點就是相等的。一些具體的數據指出：多數時候的比較是根據節點的類型來的。

(7)isSameNode()

中文版面顯示該方法已被棄用

Node.isSameNode() 方法測試兩個節點是否相同，即它們是否引用相同的對象。

對於節點來說，該isSameNode()方法可以簡寫為

node1 === node2 或者 node1 == node2

(8)removeChild()

Node.removeChild() 方法從DOM中刪除一個子節點。返回刪除的節點。

被移除的這個子節點仍然存在於內存中,隻是沒有添加到當前文檔的DOM樹中,因此,你還可以把這個節點重新添加回文檔中,當然,實現要用另外一個變量來保存這個節點的引用.

若有沒有用變量來保存這個移除的子節點，則認為被移除的節點已經是無用的, 在短時間內將會被內存管理回收.

垃圾回收前面的博客也有說到

(9)replaceChild()

用指定的節點替換當前節點的一個子節點，並返回被替換掉的節點。

被替換的這個子節點仍然存在於內存中,隻是沒有添加到當前文檔的DOM樹中,因此,你還可以把這個節點重新添加回文檔中,當然,實現要用另外一個變量來保存這個節點的引用.

若有沒有用變量來保存這個移除的子節點，則認為被移除的節點已經是無用的, 在短時間內將會被內存管理回收.

(10)normalize() // 常規化

Node.normalize() 方法將當前節點和它的後代節點”規范化“（normalized）。在一個"規范化"後的DOM樹中，不存在一個空的文本節點，或者兩個相鄰的文本節點。

註1：“空的文本節點”並不包括空白字符(空格，換行等)構成的文本節點。

註2：兩個以上相鄰文本節點的產生原因包括：

  1. 通過腳本調用有關的DOM接口進行瞭文本節點的插入和分割等。
  2. HTML中超長的文本節點會被瀏覽器自動分割為多個相鄰文本節點。

小結：

以上說的基本上都是增刪改。

nextsibiling和privossibiling有可能會獲取到文本節點。回車也算文本節點

innerText和textcontent區別

nodeType的值，主要的兩個值是1表示元素節點，3表示文本節點

clonenode分深淺拷貝

isSame​Node()和isEqual​Node()分清楚

normalize()的意思

4、DOM中的Document接口的屬性

document接口中大部分都是查詢功能

屬性

  • anchors
  • body
  • characterSet
  • childElementCount
  • children
  • doctype
  • documentElement
  • domain
  • fullscreen
  • head
  • hidden
  • images
  • links
  • location
  • onxxxxxxxxx
  • origin
  • plugins
  • readyState
  • referrer
  • scripts
  • scrollingElement
  • styleSheets
  • title
  • visibilityState

(1)anchors

該標簽已經被棄用

anchors屬性返回當前文檔中的所有錨點元素.返回的是HTMLCollection，它是一個偽數組。

由於向後兼容的原因,該屬性隻返回那些擁有name屬性的a元素,而不是那些擁有id屬性的a元素.

但是我測試瞭下還是可以用的，返回的僅僅是帶name屬性的a元素。

因為用document.querySelectorAll('a')返回的a標簽會更多，而且是NodeList。

(2)body

返回當前文檔中的<body>元素或者<frameset>元素.

document.body是包含當前頁面內容的元素,對於擁有<body>元素的文檔來說,返回的是<body>元素,對於一個擁有<frameset>元素的文檔來說,返回的是最外層的<frameset>元素.

該屬性是可寫的,且為該屬性賦的值必須是一個<body>元素.

(3)characterSet

Document.characterSet隻讀屬性返回當前文檔的字符編碼。該字符編碼是用於渲染此文檔的字符集，可能與該頁面指定的編碼不同。（用戶可以重寫編碼方式。）

(4)childElementCount

隻讀屬性返回一個無符號長整型數字，表示給定元素的子元素數。

(5)children

ParentNode.children 是一個隻讀屬性，返回 一個Node的子elements，是一個動態更新的 HTMLCollection。它是一個偽數組。

返回的對象類型是HTMLCollection

(6)doctype

返回當前文檔關聯的文檔類型定義(DTD). 返回的對象實現瞭DocumentType接口

如果當前文檔沒有DTD,則該屬性返回null.

在HTML文檔中,如果文檔有DTD,則該屬性等價於document.firstChild.

(7)documentElement

Document.documentElement 是一個會返回文檔對象（document）的根元素的隻讀屬性（如HTML文檔的 <html> 元素）。

HTML 文檔通常包含一個子節點 <html>，可能在它前面還有個 DOCTYPE 聲明。

所以你應該使用 document.documentElement 來獲取根元素, 而不是 document.firstChild。 當然用document.firstElementChild也可以獲取根元素。

(8)domain

獲取/設置當前文檔的原始域部分, 用於 同源策略.

返回的是字符串。

(9)fullscreen

該特性是非標準的。Document.fullscreen該特性是非標準的。

返回一個佈爾值,表明當前文檔是否處於全屏模式.

(10)head

返回當前文檔中的<head>元素。如果有多個<head>元素，則返回第一個。

(11)hidden

Document.hidden （隻讀屬性）返回佈爾值，表示頁面是（true）否（false）隱藏。

(12)images

Document接口的隻讀屬性images返回當前文檔中所有image元素的集合.

返回的是一個HTMLCollection 它是一個偽數組。

(13)links

links 屬性返回一個文檔中所有具有 href 屬性值的<area>元素與<a>元素的集合。

返回值是一個HTMLCollection。它是一個偽數組。

(14)location

Document.location 是一個隻讀屬性，返回一個 Location 對象，包含有文檔的 URL 相關的信息，並提供瞭改變該 URL 和加載其他 URL 的方法。

盡管 Document.location 是一個隻讀的 Location 對象，你也能夠賦給它一個 DOMString。這意味著你能夠賦給 document.location 字符串，大多數情況下像這樣使用：document.location = 'http://www.example.com'，也可寫為document.location.href = 'http://www.example.com'。

隻是想獲取字符串形式的 URL，可以使用隻讀屬性 document.URL。

(15)onxxxxxxxxx

部分事件，比如onclick、onblur等

(16)origin

Document.origin （隻讀屬性） 返回文檔的來源。

該屬性在很多瀏覽器中還不可以實現功能。

可以通過 document.defaultView.location.origin 代替，他們功能類似。

(17)plugins

Document接口的插件隻讀屬性返回一個HTMLCollection對象，它是一個偽數組。該對象包含一個或多個HTMLEmbedElements表示當前文檔中的<embed> 元素。

返回的是 HTMLCollection, 或者為null。

(18)readyState

一個document 的Document.readyState 屬性描述瞭文檔的加載狀態。

一個文檔的readyState 可以是以下之一：

loading / 加載——document 仍在加載。

interactive / 互動——文檔已經完成加載，文檔已被解析，但是諸如圖像，樣式表和框架之類的子資源仍在加載。

complete / 完成——文檔和所有子資源已完成加載。狀態表示load事件即將被觸發。

當這個屬性的值變化時，document對象上的readystatechange事件將被觸發。

用把網速調慢，QQ主頁來測試下

http://www.icpchaxun.com/video/1105870969964621824

(19)referrer

返回跳轉或打開到當前頁面的那個頁面的URI。

如果用戶直接打開瞭這個頁面（不是通過頁面跳轉，而是通過地址欄或者書簽等打開的），則該屬性為空字符串。由於該屬性隻是返回一個字符串，所以不能夠通過該屬性引用頁面的 DOM。

某些情況下可以禁止通過直接輸入網站地址來范圍網頁，必須通過網頁跳轉的方式訪問網頁。

(20)scripts

返回一個HTMLCollection對象,包含瞭當前文檔中所有<script>元素的集合.它是一個偽數組。

(21)scrollingElement

scrollingElement （ Document 的隻讀屬性）返回滾動文檔的 Element 對象的引用。 在標準模式下, 這是文檔的根元素, document.documentElement.

當在怪異模式下， scrollingElement 屬性返回 HTML body 元素（若不存在返回 null ）。

(22)styleSheets

Document.styleSheets 隻讀屬性，返回一個由StyleSheet對象組成的 StyleSheetList，每個StyleSheet對象都是一個文檔中鏈接或嵌入的樣式表。

返回的對象是一個StyleSheetList。

它是一個StyleSheet對象的有序集合。styleSheetList.item(index) 或 styleSheetList[index] 根據它的索引（索引基於0）返回一個單獨的樣式表對象。

(23)title

獲取或設置文檔的標題。返回字符串

title 是一個包含 document 標題的字符串。如果通過設置 document.title 將標題覆蓋，則返回覆蓋後的值。否則返回標簽裡指定的標題（參見下面的Notes）。

(24)visibilityState

Document.visibilityState （隻讀屬性）, 返回document的可見性, 即當前可見元素的上下文環境. 由此可以知道當前文檔(即為頁面)是在背後, 或是不可見的隱藏的標簽頁，或者(正在)預渲染.可用的值如下：

  • 'visible' : 此時頁面內容至少是部分可見. 即此頁面在前景標簽頁中，並且窗口沒有最小化.
  • 'hidden' : 此時頁面對用戶不可見. 即文檔處於背景標簽頁或者窗口處於最小化狀態，或者操作系統正處於 '鎖屏狀態' .
  • 'prerender' : 頁面此時正在渲染中, 因此是不可見的 (considered hidden for purposes of document.hidden). 文檔隻能從此狀態開始，永遠不能從其他值變為此狀態.註意: 瀏覽器支持是可選的.
  • 'unloaded' : 頁面從內存中卸載清除. 註意: 瀏覽器支持是可選的.

典型用法是防止當頁面正在渲染時加載資源, 或者當頁面在背景中或窗口最小化時禁止某些活動.

我們用個延時間隔的函數來測試，結果在網頁中切換頁面或者最小化頁面是可以顯示出hidden，如果把活動頁面窗口切換為別的頁面窗口，不會顯示出hidden。

http://www.icpchaxun.com/video/1105895873011261440

5、DOM中的Document接口的方法

方法：

  • close()
  • createDocumentFragment()
  • createElement()
  • createTextNode()
  • execCommand()
  • exitFullscreen()
  • getElementById()
  • getElementsByClassName()
  • getElementsByName()
  • getElementsByTagName()
  • getSelection()
  • hasFocus()
  • open()
  • querySelector()
  • querySelectorAll()
  • registerElement()
  • write()
  • writeln()

(1)close()、write()、writeln()、open()

一個document寫入信息有三個動作，打開——寫入——關閉

document.close()方法用來關閉向當前文檔的數據寫入

Document.open()方法打開一個要寫入的文檔。如果目標中存在文檔，則此方法將清除它。

document​.write()將一個文本字符串寫入由document.open() 打開的一個文檔流。

document​.writeln向文檔中寫入一串文本，並緊跟著一個換行符，僅僅相對於document​.write多瞭一個換行符。

因為writeln(）和write(）很相似，所以這裡僅用write(）測試。

通過查看MDN文檔，發現部分部分描述存在一些問題，我就按照我自己測試來總結吧

  • 通過直接在開發者工具中（單獨使用）輸入document.open()，那麼整個頁面會消失，也就是清除掉瞭。

這裡本來做瞭一個視頻，但是審核沒通過，不知道為啥不讓我通過。。。

  • 通過直接使用document.open()和document​.close()，並不能清除原本的頁面信息也關閉文檔流。
  • 在關閉(已加載)的文檔上調用 document.write 會自動調用 document.open，這將清空該文檔的內容。
  • 上面的document.write會自動調用document.open滿足兩個條件，1、在關閉(已加載)的文檔上調用 document.write；2、如果 document.write和document.open一起使用。此時document.open()已經沒有存在的必要。
  • 在關閉(已加載)的文檔上調用document​.close()，它會實現它的功能，也就是關閉文檔流，無法再寫入文檔信息。
  • 通過window.onload，或者setTimeout可以實現在關閉(已加載)的文檔上調用document.write

下面的視頻實現瞭close關閉文檔流後無法再次寫入的功能；

在關閉(已加載)的文檔上調用 document.write 會自動調用 document.open的功能。

4300030a86982c816c7c69fd932a02a3http://www.icpchaxun.com/video/1105934137348939776

由於每篇文章隻能發送十個視頻限制，所以還有一個問題文字說明，就是如果在開發者模式中輸入setTimeout來清除整個頁面的時候，document.write並不是自動調用document.open，而添加瞭document.open後，整個頁面才會清空。

(2)createDocumentFragment()

創建一個新的空白的文檔片段( DocumentFragment)。

DocumentFragments 是DOM節點。它們不是主DOM樹的一部分。通常的用例是創建文檔片段，將元素附加到文檔片段，然後將文檔片段附加到DOM樹。在DOM樹中，文檔片段被其所有的子元素所代替。

因為文檔片段存在於內存中，並不在DOM樹中，所以將子元素插入到文檔片段時不會引起頁面回流（對元素位置和幾何上的計算）。因此，使用文檔片段通常會帶來更好的性能。

(3)createElement()

在一個HTML 文檔中， Document.createElement() 方法創建由tagName指定的HTML元素，或一個HTMLUnknownElement，如果tagName不被識別。

返回元素節點

(4)createTextNode()

創建一個新的文本節點.

(5)execCommand()

該方法是當需要寫一個富文本編輯器的時候需要用到它。

copy拷貝當前選中內容到剪貼板。啟用這個功能的條件因瀏覽器不同而不同，而且不同時期，其啟用條件也不盡相同。使用之前請檢查瀏覽器兼容表，以確定是否可用。

它還可以拷貝選中文字

(6)exitFullscreen()

Document.exitFullscreen() 方法用於讓當前文檔退出全屏模式

測試瞭下報錯瞭，不知道具體為啥

(7)getElementById()

Document的方法 getElementById()返回一個匹配特定 ID的元素. 由於元素的 ID 在大部分情況下要求是獨一無二的，這個方法自然而然地成為瞭一個高效查找特定元素的方法。

返回一個匹配到 ID 的 DOMElement對象。若在當前 Document下沒有找到，則返回 null。

不同於其他Element查找方法（如Document.querySelector()以及Document.querySelectorAll()），getElementById() 隻有在作為 document 的方法時才能起作用，而在DOM中的其他元素下無法生效。這是因為 ID 值在整個網頁中必須保持唯一。因此沒有必要為這個方法創建所謂的 “局部” 版本。

(8)getElementsByClassName()

Element.getElementsByClassName() 方法返回一個即時更新的（live）HTMLCollection，包含瞭所有擁有指定 class 的子元素。它是一個偽數組。

可以在任何HTMLCollection上面使用Array.prototype的方法，要把HTMLCollection作為該方法的上下文對象（this）。下例，查找類名為test的元素中的所有<div>元素：

我們可以通過數組的方法在HTMLCollection上傳遞它的值作為this的值，

var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement) {
return testElement.nodeName === 'DIV';
});//這裡的Array.prototype可以直接寫成空數組[]

上一篇

有適合大學生的賺錢副業推薦嗎？視頻剪輯怎麼樣？

下一篇

玩转长隆！垂直过山车、飓风飞椅、自由落体、欢乐巡游表演…..

发表回复

相关推荐

五谷搭配有講究，5款雜糧營養粥，你學會瞭嗎？

粥，是中國人崇尚的五谷養生法裡相當重要的食療方之一，且老少咸宜。粥的包容性很強，往裡放、肉、蛋、奶、蔬、果都等不同食...

· 12秒前

《流光之城》：原著小說中大尺度床戲被刪，網友：刪得好，該刪

不知道大傢看瞭《流光之城》沒有？有沒有註意到這部劇的吻戲很多，男主好會親？套用時下流行語就是：許魏洲這人能處，有事真...

· 37秒前

最愛的戀愛番！超全！快收藏起來慢慢看叭！

最喜歡的校園戀愛番1.《會長大人是女仆》我的戀愛啟蒙番啊，拓海太帥瞭！！還去追瞭完結漫畫。也是因為這部番喜歡上瞭小信的...

· 1分钟前

為什麼要入黨？

1、是黨的性質決定的。黨是中國工人階級的先鋒隊，同時是中國人民和中華民族的先鋒隊，是中國特色社會主義事業的領導核心，代...

· 2分钟前

“醉駕”案件處理詳細流程

本文僅供業內人士參考，不構成任何意義上的法律意見或建議。未經事先書面同意，本文不得用於其他目的。如需轉載，請聯系嶽力...

· 2分钟前