javascript
（JS基础）DOM：节点类型
Node 類型
所有節(jié)點(diǎn)類型都繼承于 Node 類型，因此所有節(jié)點(diǎn)類型都共享這相同的基本屬性和方法。
基本屬性和方法
- nodeName ：節(jié)點(diǎn)名。對(duì)于元素類型，則是元素的標(biāo)簽名(均為大寫)，如"SPAN"、"DIV"；對(duì)于其他類型會(huì)有不同的值，下面每個(gè)類型會(huì)分別指出。
- nodeValue ：節(jié)點(diǎn)值。對(duì)于元素類型為null；對(duì)于其他類型會(huì)有不同的值，下面每個(gè)類型會(huì)分別指出。
- hasChildNodes() ：布爾值，是否含有子節(jié)點(diǎn)。
- childNodes ：NodeList 對(duì)象的集合，是一個(gè)類數(shù)組，實(shí)際是基于 DOM 結(jié)構(gòu)動(dòng)態(tài)查詢的結(jié)果。
- firstChild ：等效于 childNodes[0] ；
- lastChild ：等效于 childNodes[childNodes.length - 1] 。
- parentNode ：指向父節(jié)點(diǎn)。
- previousSibling ：前一個(gè)同胞節(jié)點(diǎn)；
- nextSibling ：后一個(gè)同胞節(jié)點(diǎn)。
- ownerDocument ：指向節(jié)點(diǎn)所在的整個(gè)文檔節(jié)點(diǎn)。
下面 4 個(gè)是比較常用的方法，但必須是含有子節(jié)點(diǎn)或能有子節(jié)點(diǎn)的節(jié)點(diǎn)對(duì)象才能使用：
- appendChild(newNode) ：向 childNodes 集合的末尾添加一個(gè)新節(jié)點(diǎn)。
- removeChild(node) ：移除指定的子節(jié)點(diǎn)，并返回被移除的節(jié)點(diǎn)。
- repalceChild(newNode, node) ：用新節(jié)點(diǎn)替換原子節(jié)點(diǎn)，返回被替換的原節(jié)點(diǎn)。
- insertBefore(newNode, node) ：在參照子節(jié)點(diǎn)(可為null)后添加新節(jié)點(diǎn)，返回新節(jié)點(diǎn)。
下面 2 個(gè)方法是所有節(jié)點(diǎn)都能使用：
- clone(isDeepClone?) ：克隆當(dāng)前節(jié)點(diǎn)，可以接收一個(gè)參數(shù)：是否深克隆，深克隆表示包含其所有子節(jié)點(diǎn)，否則只復(fù)制節(jié)點(diǎn)本身。
- normalize() ：移除空的文本節(jié)點(diǎn)，并連接相鄰的文本節(jié)點(diǎn)。
還有一個(gè)屬性，用于表示節(jié)點(diǎn)的類型：
- nodeType ：常量值，一共有 12 種，如 "Node.ELEMENT_NODE" 或 數(shù)字 1 ，下面每個(gè)類型會(huì)分別給出對(duì)象的值。
節(jié)點(diǎn)比較的方法
用于比較兩個(gè)節(jié)點(diǎn)，如div1.isSameNode(div2)，返回結(jié)果為布爾值。以下有兩個(gè)概念：相同，表示兩個(gè)對(duì)象指向的是同一個(gè) DOM 節(jié)點(diǎn)對(duì)象；相等，表示兩個(gè)對(duì)象的類型、屬性、內(nèi)容等均相同，但不一定是同一個(gè)對(duì)象。
- isSameNode(node) ：判斷與 node 對(duì)象是否相同，document 對(duì)象可用。
- isEqualNode(node) ：判斷與 node 對(duì)象是否相等，document 對(duì)象不可用。
Document 類型
document 類型表示文檔。在瀏覽器中，document 對(duì)象是 HTMLDocument (繼承自 Document 類型) 的一個(gè)實(shí)例，表示整個(gè) HTML 頁(yè)面。且 document 對(duì)象 是 window 對(duì)象 的一個(gè)屬性。
特征：
一般屬性
- documentElement ：指向文檔中的<html>元素。
- body ：指向文檔中的<body>元素。
- doctype ：指向文檔中的<!DOCTYPE>元素。
- title ：指向文檔中的<title>元素。
- URL ：文檔的 完整 URL 。
- domain ：文檔 URL 的主機(jī)名。
獲取元素的方法
- getElementById() ：獲取指定 ID 的元素，不存在這返回null。
- getElementsByTagName() ：獲取給定標(biāo)簽名的所有元素的集合，返回 HTMLCollection 對(duì)象，該對(duì)象是一個(gè)類數(shù)組，找不到指定標(biāo)簽則集合為空。
- getElementsByClassName() ：獲取給定 CSS 類名的所有元素的集合，返回 HTMLCollection 對(duì)象。
- getElementsByName() ：獲取給定 name 特性的所有元素的集合，返回 NodeList 。
- querySelector() ：獲取給定 CSS 選擇符的第一個(gè)元素，無(wú)則返回null。
- querySelectorAll() ：獲取給定 CSS 選擇符的所有元素的集合，返回 NodeList 。
特殊集合
獲取的集合都是 HTMLCollection 對(duì)象。
- anchors：包含所有待 name 特性的<a>元素
- forms：包含所有<form>元素
- images：包含所有<img>元素
- links：包含所有帶有 href 特性的<link>元素
焦點(diǎn)管理
HTML5 新增了 1 個(gè)屬性和 1 個(gè)方法用于輔助管理 DOM 的焦點(diǎn)。
- activeElement ：引用 DOM 中當(dāng)前獲得焦點(diǎn)的元素。
- hasFocus() ：當(dāng)前文檔是否獲得了焦點(diǎn)，布爾值。用于確認(rèn)用戶是否與頁(yè)面在交互。
HTML5 擴(kuò)展的 HTMLDocument 屬性：
- readyState ：文檔加載情況，值有兩種，加載中(loading)、加載完成(complete)。
- compatMode ：渲染模式，值有兩種，標(biāo)準(zhǔn)(CSS1Compat)、混集(BackCompat)。
- head ：指向文檔中的<head>元素。
字符集屬性
- chartset ：文檔使用的字符集，如 "UTF-8"。
專有擴(kuò)展
以下屬性方法并未寫入標(biāo)準(zhǔn)，并非所有瀏覽器都支持，使用前請(qǐng)檢測(cè)是否存在。
- children：與 childNodes 類似。返回的是一個(gè) HTMLCollection 實(shí)例，只包含元素中同樣還是元素的子節(jié)點(diǎn)，除此外和 childNodes 無(wú)差別。
- contains(node) ：檢測(cè) node 元素是否為本元素的后代節(jié)點(diǎn)，返回布爾值。注意，以自身作為參數(shù)，結(jié)果也是 true 。
- innerText ：可讀寫。讀模式，由淺入深的順序?qū)⒆游臋n樹的所有文本拼接起來；寫模式，刪除所有子節(jié)點(diǎn)，插入指定的文本節(jié)點(diǎn)。
Element 類型
Element是非常通用的基類，所有Document對(duì)象下的對(duì)象都繼承它。以下內(nèi)容主要針對(duì) HTMLElement類型（HTML文檔）。
特征
- nodeType： Node.ELEMENT_NODE(1)
- nodeName： 元素的標(biāo)簽名（與 tagName 的值相同）
- nodeValue： null
- parentNode： Document 或 Element
- childNodes：可能是 Element、Text、Comment、ProcessingInstruction、CDATASection、EntityReference 。
標(biāo)準(zhǔn)特性
以下是 HTML 元素都存在的標(biāo)準(zhǔn)特性，屬性值均為可讀寫。標(biāo)準(zhǔn)特性可以作為對(duì)象的屬性直接訪問，而自定義特性需要用特定方法獲取/修改。
- id： 元素在文檔的唯一標(biāo)識(shí)符
- title：有關(guān)元素的附加說明信息，一般通過工具提示條顯示出來
- lang：元素內(nèi)容的語(yǔ)言代碼，很少使用
- dir：語(yǔ)言的方向，值為"ltr"(左到右)或"rtl"(右到左)，很少使用
- className：元素的 CSS 類名
獲取/操作特性的方法
上面提到標(biāo)準(zhǔn)特性，以下 3 個(gè)方法可以訪問對(duì)象的所有特性(包括標(biāo)準(zhǔn)與自定義特性)。舉個(gè)例，對(duì)于<div class="myDiv" my-prop="myProp"></div>來說，class就是標(biāo)準(zhǔn)特性，my-prop就是自定義特性。下面方法的第一個(gè)參數(shù)為特性名。
- getAttribute() ：獲取特性。
- setAttribute() ：修改特性，需要第二個(gè)參數(shù)：新的特性值。若特性不存在，則為其添加新特性并賦值
- removeAttribute() ：移除特性。
特殊特性
特殊特性也可以作為對(duì)象的屬性直接訪問，但與標(biāo)準(zhǔn)特性有點(diǎn)不同，屬性訪問的值與使用方法getAttribute()得到的值并不一致。
- ?.style：得到一個(gè) CSSStyleDeclaration 對(duì)象，該對(duì)象包含所有能設(shè)置的內(nèi)聯(lián)樣式。更多關(guān)于樣式請(qǐng)點(diǎn)擊鏈接。
- .getAttribute('style')：返回style特性的字符串值，如"width: 571px;"，未設(shè)置任何值則返回null。
- .onclick：得到一個(gè)事件處理的 JavaScript 函數(shù)，如未指定則返回null。
- .getAttribute('onclick')：返回事件處理函數(shù)的字符串值，如未指定則返回null。
- 順帶一說，.click()可以觸發(fā)該元素的單擊事件，其他事件同理。
attributes 屬性
attributes 屬性只能被 Element 類型使用，指向 NamedNodeMap 對(duì)象，是類似與 NodeList 的"動(dòng)態(tài)"集合，包含該元素的每個(gè)特性，每個(gè)特性都由一個(gè) Attr 節(jié)點(diǎn)表示 (下面介紹) 。
- NamedNodeMap 對(duì)象的方法：
- attributes.getNamedItem(name)：獲取指定特性節(jié)點(diǎn)。
- attributes.setNamedItem(name, value)：添加或設(shè)置特性節(jié)點(diǎn)。
- attributes.removeNamedItem(name)：移除指定特性節(jié)點(diǎn)。
- attributes.getNamedItem(name)：獲取指定特性節(jié)點(diǎn)。
- 屬性值訪問：
如，attributes['class']，和attributes.getNamedItem('class')等效。
創(chuàng)建元素
使用document.createElement(tagName)方法創(chuàng)建并返回該新元素，tagName 在 html 文檔中不區(qū)分大小寫，然后通過上面的屬性或方法為其添加特性，最后通過appendChild()等方法插入到文檔樹中。
Selectors API Level 2 規(guī)范新增的一個(gè)方法
matchesSelector()：接收一個(gè) CSS 選擇符為參數(shù)，返回布爾值，表示是否該選擇符是否與調(diào)用元素匹配。如，document.body.matchesSelector('body.page1');? // true。
Element Traversal API 添加的 5 個(gè)屬性
一般情況下，使用 childNodes 和 firstChild 等屬性時(shí)，獲得的值是包含回車/空格/注釋的節(jié)點(diǎn)，例如<div> <span>content</span> </div>中，div對(duì)象的 firstChild 是一個(gè)空格。為了是篩除掉這種文本/注釋節(jié)點(diǎn)，所以有了以下屬性。值得注意的是，除了最后兩個(gè)指向同輩元素的屬性，Document 類型的也包含前三個(gè)屬性。
- childElementCount ：返回子元素（不包括文本節(jié)點(diǎn)和注釋）的個(gè)數(shù)。
- firstElementChild ：（非文本和注釋節(jié)點(diǎn)的）第一個(gè)子元素。
- lastElementChild ：（非文本和注釋節(jié)點(diǎn)的）最后一個(gè)子元素。
- previousElementSibling ：（非文本和注釋節(jié)點(diǎn)的）前一個(gè)同輩元素。
- nextElementSibling ：（非文本和注釋節(jié)點(diǎn)的）后一個(gè)同輩元素。
classList 屬性
由于可以對(duì)一個(gè) Element 對(duì)象添加多個(gè) className ，但多個(gè) className 卻只是用空格隔開，但我們一般只想修該一個(gè)或部分，操作整個(gè) className 字符串顯得比較麻煩。所以有了 classList 屬性，它是新集合類型 DOMTokenList 的實(shí)例，同樣是類數(shù)組，可以通過方括號(hào)語(yǔ)法訪問項(xiàng)。classList 對(duì)象包含如下屬性和方法：
- length ：該集合的長(zhǎng)度，即類名的個(gè)數(shù)。
- add(<string>) ：將給定的字符串添加到列表中，存在則不添加。
- contains(<string>) ：判斷集合是否存在給定的值，存在則返回 true ，反之 false 。
- remove(<string>) ：從集合中刪除給定的字符串。
- toggle(<string>) ：開關(guān)，即給定的字符串存在則刪除，否則添加。
自定義數(shù)據(jù)屬性
HTML5 規(guī)定可以為元素添加非標(biāo)準(zhǔn)的屬性，但要添加前綴 "data-"，目的是為元素提供與渲染無(wú)關(guān)的信息，或提供語(yǔ)義信息。
例如，<div id="div1" data-appId="123" data-myname="lisi"><div>。
添加屬性后，可以通過元素的 "dataset" 屬性訪問自定義屬性的值。dataset 屬性指向 DOMStringMap 的實(shí)例，就是一個(gè)鍵值對(duì)的映射。
如上述例子中，可以通過document.getElementById('div1').dataset.appid訪問或改寫（注意，"appid" 會(huì)被轉(zhuǎn)成小寫；若標(biāo)簽內(nèi)是"data-app-id"，則 JavaScript 訪問其值時(shí)，會(huì)被轉(zhuǎn)化成駝峰式，即"appId"；JavaScript 獲取其的數(shù)據(jù)值類型必定是字符串）。）。
插入標(biāo)記
使用插入標(biāo)記的技術(shù)，可以直接插入 HTML 字符串。以下是 2 個(gè)屬性，均為可讀寫，和 1 個(gè)方法。需要注意的是，使用這些屬性方法替換子節(jié)點(diǎn)可能會(huì)導(dǎo)致瀏覽器的內(nèi)存占用問題，主要是事件綁定和頻繁添加導(dǎo)致，所以建議先手工刪除要被替換的元素的所有事件處理程序和循環(huán)添加添加 HTML 標(biāo)記時(shí)應(yīng)處理好所有的字符串再一次過插入到指定位置。
- innerHTML ：讀模式下，返回與調(diào)用元素的所有子節(jié)點(diǎn)（包括元素、文本和注釋節(jié)點(diǎn)）對(duì)應(yīng)的 HTML 標(biāo)記；寫模式下，則指定相對(duì)于的字符串量。注意，通過此屬性插入到 <script>元素并不會(huì)執(zhí)行其中的代碼。不支持此屬性的元素有：<col>、<colgroup>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>、<tr>。
- outerHTML ：與 innerHTML 類似，此屬性還包含自身元素標(biāo)簽。例如，某div元素調(diào)用 outerHTML ，獲取的是"<div>......</div>"。
- insertAdjacentHTML(location, HtmlText) ：此方法用于在指定位置插入 HTML 文本。location 表示要插入的位置，值必須是以下之一(均為小寫)：
- "beforebegin"：在當(dāng)前元素之前插入一個(gè)緊鄰的同輩元素；
- "afterbegin"：在當(dāng)前元素之下的起始位置插入一個(gè)新的子元素；
- "beforeend"：在當(dāng)前元素之下的起始位置插入一個(gè)新的子元素；
- "afterend"：在當(dāng)前元素之后插入一個(gè)緊鄰的同輩元素。
scrollIntoView() 方法
當(dāng)容器內(nèi)容很多，則需要使用滾動(dòng)條顯示，而此方法是為了更好的控制頁(yè)面滾動(dòng)。元素對(duì)象調(diào)用此方法時(shí)，會(huì)使元素出項(xiàng)在最外層的帶滾動(dòng)條的元素中，下面用"視口元素"指代"最外層的帶滾動(dòng)條的元素"。可以接收一個(gè)布爾值為參數(shù)，不傳默認(rèn)為 true 。
- true ：默認(rèn)值，表示元素頂部盡可能與視口元素頂部平齊。
- false ：表示元素底部盡可能與視口元素底部平齊。
專有擴(kuò)展方法(滾動(dòng))
這三個(gè)方法都只是在 safari 和 chrome 瀏覽器(可能更多,目前Firefox不支持)部署了。都是與滾動(dòng)相關(guān)。
- scrollIntoViewIfNeeded(isAlignCenter) ：當(dāng)元素已經(jīng)在視口中，不作任何操作；當(dāng)元素不在視口中，使?jié)L動(dòng)窗口滾動(dòng)到元素可見位置。可傳入一個(gè)布爾值，isAlignCenter 表示元素是否垂直居中對(duì)其。
- scrollByLines(lineCount) ：將元素的內(nèi)容滾動(dòng)指定的行高，lineCount 可正可負(fù)。
- scrollByPages(pageCount) ：將元素的內(nèi)容滾動(dòng)到指定的頁(yè)面高度，具體的高度有元素的高度決定。
表單元素
表單元素由<form>表示，對(duì)應(yīng)的是HTMLFormElement類型，繼承自HTMLElement。這里不多介紹，請(qǐng)點(diǎn)擊鏈接查看另一篇文章。
Attribute 類型
該類型在討論 Element 類型的 attributes 屬性已有提及。元素的特性在 DOM 中以 Attr 類型表示。盡管他們是節(jié)點(diǎn)，但特性去不被認(rèn)為是 DOM 文檔樹的一部分。一般通過 Elment 類型的方法增刪改查元素的特性。
特征
- nodeType：Node.ATTRIBUTE_NODE(2)
- nodeName：特性的名稱
- nodeValue：? 特性的值。
- parentNode：null
- (在 HTML 中) 沒有子節(jié)點(diǎn)
對(duì)象的屬性
- name：特性的名稱，與 nodeName 的值一致。
- value：特性的值，與 nodeValue 的值一致。
- specified：是否自定義特性，布爾值。
DocumentFragment 類型
文檔片段，在添加大量 DOM 節(jié)點(diǎn)時(shí)可作為"倉(cāng)庫(kù)"，再一次性添加到文檔中，以減少文檔的回流和重繪。
特征
- nodeType：Node.DOCUMENT_FRAGMENT_NODE(11)
- nodeName： "#document-fragment"
- nodeValue：null
- parentNode：null
- 子節(jié)點(diǎn)的種類與 Element 類型一致
創(chuàng)建節(jié)點(diǎn)的方法
使用document.createDocumentFragment()可以創(chuàng)建 DocumentFragment 節(jié)點(diǎn)，無(wú)傳入?yún)?shù)。之后想 Element 類型一樣使用appendChild()方法為其添加子節(jié)點(diǎn)，刪除和插入同理。
Text 類型
文本節(jié)點(diǎn)由 Text 類型表示，包含的是可以照字面解釋的純文本內(nèi)容。純文本中可以包含轉(zhuǎn)移后的 HTML 字符，但不能包含 HTML 代碼。
特征
- nodeType：Node.TEXT_NODE(3)
- nodeName： "#text"
- nodeValue：節(jié)點(diǎn)所包含的文本
- parentNode： Element 類型
- 沒有子節(jié)點(diǎn)
對(duì)象的屬性和方法
- data：該節(jié)點(diǎn)的文本內(nèi)容，可讀寫，與"nodeValue"的值一致。
- appendData(text)：添加文本到尾部。
- deleteData(offset, count)：刪除從 offset 位置開始的 count 個(gè)字符。
- insertData(offset, text)：指定位置插入文本。
- replaceData(offset, count, text)：替換指定位置的字符串。
- splitText(offset)：從 offset 位置將文本節(jié)點(diǎn)分成兩個(gè)。
- substringData(offset, count)：提取指定位置的字符串。
創(chuàng)建節(jié)點(diǎn)的方法
使用document.createTextNode(text)方法創(chuàng)建文本節(jié)點(diǎn)，"text" 只支持字符串，若文本內(nèi)容包含 HTML 標(biāo)簽，只會(huì)被當(dāng)成純字符串解析。
Comment 類型
該類型表示的是注釋節(jié)點(diǎn)。與 Text 類型繼承自相同的基類，所以擁有splitText()之外的所有字符串操作方法。
特征
- nodeType：Node.COMMENT_NODE(8)
- nodeName： "#comment"
- nodeValue：注釋的內(nèi)容
- parentNode： Document 類型 或 Element 類型
- 沒有子節(jié)點(diǎn)
創(chuàng)建節(jié)點(diǎn)的方法
使用document.createComment(text)可以創(chuàng)建注釋節(jié)點(diǎn)，實(shí)際生產(chǎn)中很少會(huì)用到就不細(xì)說。
CDATASection 類型
該類型只針對(duì)基于 XML 的文檔，表示的是 CDATA 區(qū)域。與 Comment 類型類似，繼承自 Text 類型，所以擁有splitText()之外的所有字符串操作方法。
特征
- nodeType：Node.CDATA_SECTION_NODE(4)
- nodeName： "#cdata-section"
- nodeValue：CDATA 區(qū)域中的內(nèi)容
- parentNode： Document 類型 或 Element 類型
- 沒有子節(jié)點(diǎn)
創(chuàng)建節(jié)點(diǎn)的方法
使用document.createCDataSection(text)可以創(chuàng)建 CDATASection 節(jié)點(diǎn)，傳入節(jié)點(diǎn)的內(nèi)容即可。
DocumentType 類型
包含著與文檔的 doctype 有關(guān)的所有信息。對(duì)象保存在document.doctype中。
特征
- nodeType：Node.DOCUMENT_TYPE_NODE(10)
- nodeName： doctype 的名稱
- nodeValue：null
- parentNode： Document 類型
- 沒有子節(jié)點(diǎn)
對(duì)象的屬性
- name：文檔類型的名稱，如<!DOCTYPE HTML>中 name 的值為"HTML"。
關(guān)于性能的兩點(diǎn)
轉(zhuǎn)載于:https://juejin.im/post/5c98cacbf265da60d00048e4
總結(jié)
以上是生活随笔為你收集整理的（JS基础）DOM：节点类型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++系列总结——构造与析构
- 下一篇： gradle idea java ssm