js文檔筆記5——DOM

時間  2019-12-01
標籤 文檔 筆記 dom 欄目 JavaScript 简体版
原文   原文鏈接

一.概述

1.DOM

DOM 是 JavaScript 操做網頁的接口，全稱爲「文檔對象模型」（Document Object Model）。它的做用是將網頁轉爲一個 JavaScript 對象，從而能夠用腳本進行各類操做（好比增刪內容）。javascript

瀏覽器會根據 DOM 模型，將結構化文檔（好比 HTML 和 XML）解析成一系列的節點，再由這些節點組成一個樹狀結構（DOM Tree）。全部的節點和最終的樹狀結構，都有規範的對外接口。css

DOM 只是一個接口規範，能夠用各類語言實現。因此嚴格地說，DOM 不是 JavaScript 語法的一部分，可是 DOM 操做是 JavaScript 最多見的任務，離開了 DOM，JavaScript 就沒法控制網頁。另外一方面，JavaScript 也是最經常使用於 DOM 操做的語言。後面介紹的就是 JavaScript 對 DOM 標準的實現和用法。html

2.節點

DOM 的最小組成單位叫作節點（node）。文檔的樹形結構（DOM 樹），就是由各類不一樣類型的節點組成。每一個節點能夠看做是文檔樹的一片葉子。java

節點的類型有七種。node

  • Document：整個文檔樹的頂層節點
  • DocumentType：doctype標籤（好比<!DOCTYPE html>）
  • Element：網頁的各類HTML標籤（好比<body>、<a>等）
  • Attribute：網頁元素的屬性（好比class="right"）
  • Text：標籤之間或標籤包含的文本
  • Comment：註釋
  • DocumentFragment：文檔的片斷

瀏覽器提供一個原生的節點對象Node，上面這七種節點都繼承了Node，所以具備一些共同的屬性和方法。jquery

3.節點樹

一個文檔的全部節點，按照所在的層級，能夠抽象成一種樹狀結構。這種樹狀結構就是 DOM 樹。數組

二.Node 接口

1.屬性

1.Node.prototype.nodeType

1.nodeType屬性返回一個整數值，表示節點的類型。瀏覽器

不一樣節點的nodeType屬性值和對應的常量以下。bash

  • 文檔節點（document）：9，對應常量Node.DOCUMENT_NODE
  • 元素節點（element）：1，對應常量Node.ELEMENT_NODE
  • 屬性節點（attr）：2，對應常量Node.ATTRIBUTE_NODE
  • 文本節點（text）：3，對應常量Node.TEXT_NODE
  • 文檔片段節點（DocumentFragment）：11，對應常量Node.DOCUMENT_FRAGMENT_NODE
  • 文檔類型節點（DocumentType）：10，對應常量Node.DOCUMENT_TYPE_NODE
  • 註釋節點（Comment）：8，對應常量Node.COMMENT_NODE

2.Node.prototype.nodeName

nodeName屬性返回節點的名稱。cookie

// HTML 代碼以下
// <div id="d1">hello world</div>
var div = document.getElementById('d1');
div.nodeName // "DIV"
複製代碼

不一樣節點的nodeName屬性值以下。

  • 文檔節點（document）：#document
  • 元素節點（element）：大寫的標籤名
  • 屬性節點（attr）：屬性的名稱
  • 文本節點（text）：#text
  • 文檔片段節點（DocumentFragment）：#document-fragment
  • 文檔類型節點（DocumentType）：文檔的類型
  • 註釋節點（Comment）：#comment

3.Node.prototype.nodeValue

nodeValue屬性返回一個字符串，表示當前節點自己的文本值，該屬性可讀寫。

只有文本節點（text）、註釋節點（comment）和屬性節點（attr）有文本值，所以這三類節點的nodeValue能夠返回結果，其餘類型的節點一概返回null。

4.Node.prototype.textContent

textContent屬性返回當前節點和它的全部後代節點的文本內容。（可讀可寫）

5. Node.prototype.baseURI

baseURI屬性返回一個字符串，表示當前網頁的絕對路徑。瀏覽器根據這個屬性，計算網頁上的相對路徑的 URL。該屬性爲只讀。

// 當前網頁的網址爲
// http://www.example.com/index.html
document.baseURI
// "http://www.example.com/index.html"
複製代碼

該屬性的值通常由當前網址的 URL（即window.location屬性）決定，可是可使用 HTML 的<base>標籤，改變該屬性的值。

<base href="http://www.example.com/page.html">
複製代碼

設置了之後，baseURI屬性就返回<base>標籤設置的值。

6.Node.prototype.ownerDocument

Node.ownerDocument屬性返回當前節點所在的頂層文檔對象，即document對象。

var d = p.ownerDocument;
d === document // true
複製代碼

document對象自己的ownerDocument屬性，返回null。

7.Node.prototype.parentNode

parentNode屬性返回當前節點的父節點。對於一個節點來講，它的父節點只多是三種類型：元素節點（element）、文檔節點（document）和文檔片斷節點（documentfragment）。

8.Node.prototype.parentElement

parentElement屬性返回當前節點的父元素節點。若是當前節點沒有父節點，或者父節點類型不是元素節點，則返回null。

9.Node.prototype.childNodes

childNodes屬性返回一個相似數組的對象（NodeList集合），成員包括當前節點的全部子節點。

10.Node.prototype.isConnected

isConnected屬性返回一個布爾值，表示當前節點是否在文檔之中。

var test = document.createElement('p');
test.isConnected // false

document.body.appendChild(test);
test.isConnected // true
複製代碼

2.方法

1.Node.prototype.hasChildNodes()

hasChildNodes方法返回一個布爾值，表示當前節點是否有子節點。

var foo = document.getElementById('foo');

if (foo.hasChildNodes()) {
  foo.removeChild(foo.childNodes[0]);
}
複製代碼

hasChildNodes方法結合firstChild屬性和nextSibling屬性，能夠遍歷當前節點的全部後代節點。

function DOMComb(parent, callback) {
  if (parent.hasChildNodes()) {
    for (var node = parent.firstChild; node; node = node.nextSibling) {
      DOMComb(node, callback);
    }
  }
  callback(parent);
}

// 用法
DOMComb(document.body, console.log)
複製代碼

2.Node.prototype.cloneNode()

cloneNode方法用於克隆一個節點。它接受一個布爾值做爲參數，表示是否同時克隆子節點。它的返回值是一個克隆出來的新節點。

var cloneUL = document.querySelector('ul').cloneNode(true);
複製代碼

注意：

1.克隆一個節點，會拷貝該節點的全部屬性，可是會喪失addEventListener方法和on-屬性（即node.onclick = fn），添加在這個節點上的事件回調函數。

2.克隆一個節點以後，DOM 有可能出現兩個有相同id屬性（即id="xxx"）的網頁元素，這時應該修改其中一個元素的id屬性。若是原節點有name屬性，可能也須要修改。

3.該方法返回的節點不在文檔之中，即沒有任何父節點，必須使用諸如Node.appendChild這樣的方法添加到文檔之中。

3.Node.prototype.insertBefore()

insertBefore方法接受兩個參數，第一個參數是所要插入的節點newNode，第二個參數是父節點parentNode內部的一個子節點referenceNode。newNode將插在referenceNode這個子節點的前面。返回值是插入的新節點newNode。

4.Node.prototype.replaceChild()

replaceChild方法用於將一個新的節點，替換當前節點的某一個子節點。

var replacedNode = parentNode.replaceChild(newChild, oldChild);
複製代碼

只能替換下一級子節點

5.Node.prototype.contains()

contains方法返回一個布爾值，表示參數節點是否知足如下三個條件之一。

  • 參數節點爲當前節點。
  • 參數節點爲當前節點的子節點。
  • 參數節點爲當前節點的後代節點。

6.Node.prototype.isEqualNode()，Node.prototype.isSameNode()

isEqualNode方法返回一個布爾值，用於檢查兩個節點是否相等。所謂相等的節點，指的是兩個節點的類型相同、屬性相同、子節點相同。

isSameNode方法返回一個布爾值，表示兩個節點是否爲同一個節點

7.Node.prototype.normalize()

normalize方法用於清理當前節點內部的全部文本節點（text）。它會去除空的文本節點，而且將毗鄰的文本節點合併成一個，也就是說不存在空的文本節點，以及毗鄰的文本節點。

該方法是Text.splitText的逆方法，能夠查看《Text 節點對象》一章，瞭解更多內容。

8.Node.prototype.getRootNode()

getRootNode()方法返回當前節點所在文檔的根節點document，與ownerDocument屬性的做用相同。

三.NodeList 接口，HTMLCollection 接口

節點都是單個對象，有時須要一種數據結構，可以容納多個節點。DOM 提供兩種節點集合，用於容納多個節點：NodeList和HTMLCollection。

1.NodeList

NodeList實例是一個相似數組的對象，它的成員是節點對象。經過如下方法能夠獲得NodeList實例。

  • Node.childNodes
  • document.querySelectorAll()等節點搜索方法

方法

1.NodeList.prototype.item()

item方法接受一個整數值做爲參數，表示成員的位置，返回該位置上的成員。

document.body.childNodes.item(0)
複製代碼

2.NodeList.prototype.keys()，NodeList.prototype.values()，NodeList.prototype.entries()

這三個方法都返回一個 ES6 的遍歷器對象，能夠經過for...of循環遍歷獲取每個成員的信息。區別在於，keys()返回鍵名的遍歷器，values()返回鍵值的遍歷器，entries()返回的遍歷器同時包含鍵名和鍵值的信息。

var children = document.body.childNodes;

for (var key of children.keys()) {
  console.log(key);
}
// 0
// 1
// 2
// ...

for (var value of children.values()) {
  console.log(value);
}
// #text
// <script>
// ...

for (var entry of children.entries()) {
  console.log(entry);
}
// Array [ 0, #text ]
// Array [ 1, <script> ]
// ...
複製代碼

2.HTMLCollection

TMLCollection是一個節點對象的集合，只能包含元素節點（element），不能包含其餘類型的節點。它的返回值是一個相似數組的對象，可是與NodeList接口不一樣，HTMLCollection沒有forEach方法，只能使用for循環遍歷。

返回HTMLCollection實例的，主要是一些Document對象的集合屬性，好比document.links、document.forms、document.images等。

若是元素節點有id或name屬性，那麼HTMLCollection實例上面，可使用id屬性或name屬性引用該節點元素。若是沒有對應的節點，則返回null。

// HTML 代碼以下
// <img id="pic" src="http://example.com/foo.jpg">

var pic = document.getElementById('pic');
document.images.pic === pic // true
複製代碼

方法

1.HTMLCollection.prototype.namedItem()

namedItem方法的參數是一個字符串，表示id屬性或name屬性的值，返回對應的元素節點。若是沒有對應的節點，則返回null。

四.ParentNode 接口，ChildNode 接口

節點對象除了繼承 Node 接口之外，還會繼承其餘接口。ParentNode接口表示當前節點是一個父節點，提供一些處理子節點的方法。ChildNode接口表示當前節點是一個子節點，提供一些相關方法。

1.ParentNode有對子節點操做的方法

  1. ParentNode.append()，ParentNode.prepend()能夠添加文本；appendChild()插入node對象這只是簡單的插入應用

2.ChildNode有對自身操做的方法

1.ChildNode.remove()

remove方法用於從父節點移除當前節點。

2.ChildNode.before()，ChildNode.after()

before方法用於在當前節點的前面，插入一個或多個同級節點。二者擁有相同的父節點。

3.ChildNode.replaceWith()

replaceWith方法使用參數節點，替換當前節點。參數能夠是元素節點，也能夠是文本節點。

var span = document.createElement('span');
el.replaceWith(span);
複製代碼

上面代碼中，el節點將被span節點替換。

五.Document 節點

document節點對象表明整個文檔，每張網頁都有本身的document對象。

document對象有不一樣的辦法能夠獲取。

  • 正常的網頁，直接使用document或window.document。
  • iframe框架裏面的網頁，使用iframe節點的contentDocument屬性。
  • Ajax 操做返回的文檔，使用XMLHttpRequest對象的responseXML屬性。
  • 內部節點的ownerDocument屬性。

document對象繼承了EventTarget接口、Node接口、ParentNode接口。這意味着，這些接口的方法均可以在document對象上調用。除此以外，document對象還有不少本身的屬性和方法。

1.屬性

1.快捷方式屬性

document.doctype

對於 HTML 文檔來講，document對象通常有兩個子節點。第一個子節點是document.doctype

document.documentElement

document.documentElement屬性返回當前文檔的根元素節點（root）。即第二個節點

document.body，document.head

能夠直接獲取body，head

document.scrollingElement

document.scrollingElement屬性返回文檔的滾動元素。也就是說，當文檔總體滾動時，究竟是哪一個元素在滾動。

標準模式下，這個屬性返回的文檔的根元素document.documentElement（即<html>）。兼容（quirk）模式下，返回的是<body>元素，若是該元素不存在，返回null。

// 頁面滾動到瀏覽器頂部
document.scrollingElement.scrollTop = 0;
複製代碼

document.activeElement

document.activeElement屬性返回得到當前焦點（focus）的 DOM 元素。一般，這個屬性返回的是<input>、<textarea>、<select>等表單元素，若是當前沒有焦點元素，返回<body>元素或null。

2.節點集合屬性

document.links

document.links屬性返回當前文檔全部設定了href屬性的<a>及<area>節點。

document.forms

document.forms屬性返回全部<form>表單節點。

document.images

document.images屬性返回頁面全部<img>圖片節點。

document.embeds，document.plugins

document.embeds屬性和document.plugins屬性，都返回全部<embed>節點。

document.scripts

document.scripts屬性返回全部<script>節點。

document.styleSheets

document.styleSheets屬性返回文檔內嵌或引入的樣式表集合，詳細介紹請看《CSS 對象模型》一章。

總結：以上的集合屬性返回的都是HTMLCollection實例

3.文檔靜態信息屬性

document.documentURI，document.URL

document.documentURI屬性和document.URL屬性都返回一個字符串，表示當前文檔的網址。不一樣之處是它們繼承自不一樣的接口，documentURI繼承自Document接口，可用於全部文檔；URL繼承自HTMLDocument接口，只能用於 HTML 文檔。

document.domain

document.domain屬性返回當前文檔的域名，不包含協議和接口。

document.location

Location對象是瀏覽器提供的原生對象，提供 URL 相關的信息和操做方法。經過window.location和document.location屬性，能夠拿到這個對象。

document.lastModified

document.lastModified屬性返回一個字符串，表示當前文檔最後修改的時間。不一樣瀏覽器的返回值，日期格式是不同的。

document.title

document.title屬性返回當前文檔的標題。

document.characterSet

document.characterSet屬性返回當前文檔的編碼，好比UTF-8、ISO-8859-1等等

document.referrer

document.referrer屬性返回一個字符串，表示當前文檔的訪問者來自哪裏。

document.dir

document.dir返回一個字符串，表示文字方向。

<html dir="rtl" lang="zh" i18n-processed="">

document.dir  //"rtl"
複製代碼

document.compatMode

compatMode屬性返回瀏覽器處理文檔的模式，可能的值爲BackCompat（向後兼容模式）和CSS1Compat（嚴格模式）。

通常來講，若是網頁代碼的第一行設置了明確的DOCTYPE（好比<!doctype html>），document.compatMode的值都爲CSS1Compat。

4.文檔狀態屬性

1.document.hidden

document.hidden屬性返回一個布爾值，表示當前頁面是否可見。若是窗口最小化、瀏覽器切換了 Tab，都會致使致使頁面不可見，使得document.hidden返回true。

2.document.visibilityState

document.visibilityState返回文檔的可見狀態。

它的值有四種可能。

  • visible：頁面可見。注意，頁面多是部分可見，即不是焦點窗口，前面被其餘窗口部分擋住了。
  • hidden：頁面不可見，有可能窗口最小化，或者瀏覽器切換到了另外一個 Tab。
  • prerender：頁面處於正在渲染狀態，對於用戶來講，該頁面不可見。
  • unloaded：頁面從內存裏面卸載了。

這個屬性能夠用在頁面加載時，防止加載某些資源；或者頁面不可見時，停掉一些頁面功能。

3.document.readyState

document.readyState屬性返回當前文檔的狀態，共有三種可能的值。

  • loading：加載 HTML 代碼階段（還沒有完成解析）
  • interactive：加載外部資源階段
  • complete：加載完成

這個屬性變化的過程以下。

  1. 瀏覽器開始解析 HTML 文檔，document.readyState屬性等於loading。
  2. 瀏覽器遇到 HTML 文檔中的<script>元素，而且沒有async或defer屬性，就暫停解析，開始執行腳本，這時document.readyState屬性仍是等於loading。
  3. HTML 文檔解析完成，document.readyState屬性變成interactive。
  4. 瀏覽器等待圖片、樣式表、字體文件等外部資源加載完成，一旦所有加載完成，document.readyState屬性變成complete。

5.document.cookie

document.cookie屬性用來操做瀏覽器 Cookie

6.document.designMode

document.designMode屬性控制當前文檔是否可編輯。該屬性只有兩個值on和off，默認值爲off。一旦設爲on，用戶就能夠編輯整個文檔的內容。

7.document.implementation

document.implementation屬性返回一個DOMImplementation對象。該對象有三個方法，主要用於建立獨立於當前文檔的新的 Document 對象。

  • DOMImplementation.createDocument()：建立一個 XML 文檔。
  • DOMImplementation.createHTMLDocument()：建立一個 HTML 文檔。
  • DOMImplementation.createDocumentType()：建立一個 DocumentType 對象。

下面是建立 HTML 文檔的例子。

var doc = document.implementation.createHTMLDocument('Title');
var p = doc.createElement('p');
p.innerHTML = 'hello world';
doc.body.appendChild(p);

document.replaceChild(
  doc.documentElement,
  document.documentElement
);
複製代碼

上面代碼中，第一步生成一個新的 HTML 文檔doc，而後用它的根元素document.documentElement替換掉document.documentElement。這會使得當前文檔的內容所有消失，變成hello world。

2.方法

1.document.open()，document.close()

document.open方法清除當前文檔全部內容，使得文檔處於可寫狀態，供document.write方法寫入內容。

2.document.write()，document.writeln()

document.write方法用於向當前文檔寫入內容。

在網頁的首次渲染階段，只要頁面沒有關閉寫入（即沒有執行document.close()），document.write寫入的內容就會追加在已有內容的後面。

若是頁面已經解析完成（DOMContentLoaded事件發生以後），再調用write方法，它會先調用open方法，擦除當前文檔全部內容，而後再寫入。

若是在頁面渲染過程當中調用write方法，並不會自動調用open方法。（能夠理解成，open方法已調用，但close方法還未調用。）

document.writeln方法與write方法徹底一致，除了會在輸出內容的尾部添加換行符

3.document.elementFromPoint()，document.elementsFromPoint()

document.elementFromPoint方法返回位於頁面指定位置最上層的元素節點。

var element = document.elementFromPoint(50, 50);
複製代碼

上面代碼選中在(50, 50)這個座標位置的最上層的那個 HTML 元素。

document.elementsFromPoint()返回一個數組，成員是位於指定座標（相對於視口）的全部元素。

4.document.caretRangeFromPoint()

document.caretRangeFromPoint方法返回位於頁面指定位置最上層的Range對象。

5.document.createTextNode()

document.createTextNode方法用來生成文本節點（Text實例），並返回該節點。它的參數是文本節點的內容。

var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);
複製代碼

上面代碼新建一個div節點和一個文本節點，而後將文本節點插入div節點。

這個方法能夠確保返回的節點，被瀏覽器看成文本渲染，而不是看成 HTML 代碼渲染。所以，能夠用來展現用戶的輸入，避免 XSS 攻擊。

6.document.createAttribute()

document.createAttribute方法生成一個新的屬性節點（Attr實例），並返回它。

7.document.createAttribute()

document.createAttribute方法生成一個新的屬性節點（Attr實例），並返回它。

var attribute = document.createAttribute(name);
複製代碼

document.createAttribute方法的參數name，是屬性的名稱。

var node = document.getElementById('div1');

var a = document.createAttribute('my_attrib');
a.value = 'newVal';

node.setAttributeNode(a);
// 或者
node.setAttribute('my_attrib', 'newVal');
複製代碼

8.document.createComment()

document.createComment方法生成一個新的註釋節點，並返回該節點。

var CommentNode = document.createComment(data);
複製代碼

document.createComment方法的參數是一個字符串，會成爲註釋節點的內容。

9.document.createDocumentFragment()

document.createDocumentFragment方法生成一個空的文檔片斷對象（DocumentFragment實例）。

var docFragment = document.createDocumentFragment();
複製代碼

DocumentFragment是一個存在於內存的 DOM 片斷，不屬於當前文檔，經常用來生成一段較複雜的 DOM 結構，而後再插入當前文檔。這樣作的好處在於，由於DocumentFragment不屬於當前文檔，對它的任何改動，都不會引起網頁的從新渲染，比直接修改當前文檔的 DOM 有更好的性能表現。

var docfrag = document.createDocumentFragment();

[1, 2, 3, 4].forEach(function (e) {
  var li = document.createElement('li');
  li.textContent = e;
  docfrag.appendChild(li);
});

var element  = document.getElementById('ul');
element.appendChild(docfrag);
複製代碼

上面代碼中，文檔片段docfrag包含四個<li>節點，這些子節點被一次性插入了當前文檔。

10.document.createEvent()

document.createEvent方法生成一個事件對象（Event實例），該對象能夠被element.dispatchEvent方法使用，觸發指定事件。

var event = document.createEvent(type);
複製代碼

document.createEvent方法的參數是事件類型，好比UIEvents、MouseEvents、MutationEvents、HTMLEvents。

var event = document.createEvent('Event');
event.initEvent('build', true, true);
document.addEventListener('build', function (e) {
  console.log(e.type); // "build"
}, false);
document.dispatchEvent(event);
複製代碼

上面代碼新建了一個名爲build的事件實例，而後觸發該事件。

11.document.addEventListener()，document.removeEventListener()，document.dispatchEvent()

這三個方法用於處理document節點的事件。它們都繼承自EventTarget接口，詳細介紹參見《EventTarget 接口》一章。

// 添加事件監聽函數
document.addEventListener('click', listener, false);

// 移除事件監聽函數
document.removeEventListener('click', listener, false);

// 觸發事件
var event = new Event('click');
document.dispatchEvent(event);
複製代碼

12.document.hasFocus()

document.hasFocus方法返回一個布爾值，表示當前文檔之中是否有元素被激活或得到焦點。

13.document.adoptNode()，document.importNode()

document.adoptNode方法將某個節點及其子節點，從原來所在的文檔或DocumentFragment裏面移除，歸屬當前document對象，返回插入後的新節點。（返回DocumentFragment裏面移除的節點）

document.importNode方法則是從原來所在的文檔或DocumentFragment裏面，拷貝某個節點及其子節點，讓它們歸屬當前document對象。

var node = document.importNode(externalNode, deep);
複製代碼

14.document.createNodeIterator()

document.createNodeIterator方法返回一個子節點遍歷器。

var nodeIterator = document.createNodeIterator(
  document.body,
  NodeFilter.SHOW_ELEMENT
);
複製代碼

document.createNodeIterator方法第一個參數爲所要遍歷的根節點，第二個參數爲所要遍歷的節點類型，這裏指定爲元素節點（NodeFilter.SHOW_ELEMENT）。幾種主要的節點類型寫法以下。

  • 全部節點：NodeFilter.SHOW_ALL
  • 元素節點：NodeFilter.SHOW_ELEMENT
  • 文本節點：NodeFilter.SHOW_TEXT
  • 評論節點：NodeFilter.SHOW_COMMENT

document.createNodeIterator方法返回一個「遍歷器」對象（NodeFilter實例）。該實例的nextNode()方法和previousNode()方法，能夠用來遍歷全部子節點。

15.document.createTreeWalker()

document.createTreeWalker方法返回一個 DOM 的子樹遍歷器。它與document.createNodeIterator方法基本是相似的，區別在於它返回的是TreeWalker實例，後者返回的是NodeIterator實例。另外，它的第一個節點不是根節點。

document.createTreeWalker方法的第一個參數是所要遍歷的根節點，第二個參數指定所要遍歷的節點類型（與document.createNodeIterator方法的第二個參數相同）。

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT
);

var nodeList = [];

while(treeWalker.nextNode()) {
  nodeList.push(treeWalker.currentNode);
}
複製代碼

16.document.execCommand()，document.queryCommandSupported()，document.queryCommandEnabled()

若是document.designMode屬性設爲on，那麼整個文檔用戶可編輯；若是元素的contenteditable屬性設爲true，那麼該元素可編輯。這兩種狀況下，可使用document.execCommand()方法，改變內容的樣式。

該方法接受三個參數。

  • command：字符串，表示所要實施的樣式。
  • showDefaultUI：布爾值，表示是否要使用默認的用戶界面，建議老是設爲false。
  • input：字符串，表示該樣式的輔助內容，好比生成超級連接時，這個參數就是所要連接的網址。若是第二個參數設爲true，那麼瀏覽器會彈出提示框，要求用戶在提示框輸入該參數。可是，不是全部瀏覽器都支持這樣作，爲了兼容性，仍是須要本身部署獲取這個參數的方式。

document.execCommand()方法能夠執行的樣式改變有不少種，下面是其中的一些：bold、insertLineBreak、selectAll、createLink、insertOrderedList、subscript、delete、insertUnorderedList、superscript、formatBlock、insertParagraph、undo、forwardDelete、insertText、unlink、insertImage、italic、unselect、insertHTML、redo。這些值均可以用做第一個參數，它們的含義不難從字面上看出來。

document.queryCommandEnabled()方法返回一個布爾值，表示瀏覽器是否容許使用這個方法。

document.queryCommandSupported()方法返回一個布爾值，表示當前是否可用某種樣式改變。

17.document.getSelection()

這個方法指向window.getSelection()，參見window對象一節的介紹。

更多

document.querySelector()，document.querySelectorAll()

document.getElementsByTagName()

document.getElementsByClassName()

document.getElementsByName()

六.Element 節點

Element節點對象對應網頁的 HTML 元素。每個 HTML 元素，在 DOM 樹上都會轉化成一個Element節點對象（如下簡稱元素節點）。

Element對象繼承了Node接口，所以Node的屬性和方法在Element對象都存在。

1.實例屬性

1.元素特性的相關屬性

Element.id

Element.tagName

Element.dir

Element.dir屬性用於讀寫當前元素的文字方向，多是從左到右（"ltr"），也多是從右到左（"rtl"）。

Element.accessKey

Element.accessKey屬性用於讀寫分配給當前元素的快捷鍵。

Element.accessKey 屬性不多使用，由於它很容易與現代瀏覽器自帶的快捷鍵衝突。爲了解決這個問題，瀏覽器約定accessKey鍵與特定按鍵一塊兒按（好比 Alt + accessKey）來生效快捷鍵行爲。*

// HTML 代碼以下
// <button accesskey="h" id="btn">點擊</button>
var btn = document.getElementById('btn');
btn.accessKey // "h"
複製代碼

Element.draggable

Element.draggable屬性返回一個布爾值，表示當前元素是否可拖動。該屬性可讀寫。

Element.lang

Element.lang屬性返回當前元素的語言設置。該屬性可讀寫。

Element.title

2.元素狀態的相關屬性

Element.hidden

Element.hidden屬性返回一個布爾值，表示當前元素的hidden屬性，用來控制當前元素是否可見。該屬性可讀寫。

該屬性與 CSS 設置是互相獨立的

CSS 對這個元素可見性的設置，Element.hidden並不能反映出來。也就是說，這個屬性並不能用來判斷當前元素的實際可見性。

CSS 的設置高於Element.hidden。若是 CSS 指定了該元素不可見（display: none）或可見（display: hidden），那麼Element.hidden並不能改變該元素實際的可見性。換言之，這個屬性只在 CSS 沒有明確設定當前元素的可見性時纔有效。

Element.contentEditable，Element.isContentEditable

HTML 元素能夠設置contentEditable屬性，使得元素的內容能夠編輯。

Element.attributes

Element.className，Element.classList

上面代碼中，className屬性返回一個空格分隔的字符串，而classList屬性指向一個相似數組的對象，該對象的length屬性（只讀）返回當前元素的class數量。

classList對象有下列方法。

  • add()：增長一個 class。
  • remove()：移除一個 class。
  • contains()：檢查當前元素是否包含某個 class。
  • toggle()：將某個 class 移入或移出當前元素。
  • item()：返回指定索引位置的 class。
  • toString()：將 class 的列表轉爲字符串。

其餘屬性

2.實例方法

1.屬性相關方法

  • getAttribute()：讀取某個屬性的值
  • getAttributeNames()：返回當前元素的全部屬性名
  • setAttribute()：寫入屬性值
  • hasAttribute()：某個屬性是否存在
  • hasAttributes()：當前元素是否有屬性
  • removeAttribute()：刪除屬性

2.Element.closest()

Element.closest方法接受一個 CSS 選擇器做爲參數，返回匹配該選擇器的、最接近當前節點的一個祖先節點（包括當前節點自己）。若是沒有任何節點匹配 CSS 選擇器，則返回null。

div03.closest("#div-02") // div-02
div03.closest("div div") // div-03
div03.closest("article > div") //div-01
div03.closest(":not(div)") // article
複製代碼

和jquery操做同樣

3.Element.matches()

Element.matches方法返回一個布爾值，表示當前元素是否匹配給定的 CSS 選擇器。

el.matches('.someClass')  //樣式包含someClass 返回true
document.querySelector('input').matches('[accessKey]')  //包含屬性accessKey 返回true
複製代碼

4.Element.scrollIntoView()

Element.scrollIntoView方法滾動當前元素，進入瀏覽器的可見區域，相似於設置window.location.hash的效果。

el.scrollIntoView(); // 等同於el.scrollIntoView(true)
el.scrollIntoView(false);
複製代碼

5.Element.getBoundingClientRect()

面代碼中，getBoundingClientRect方法返回的rect對象，具備如下屬性（所有爲只讀）。

  • x：元素左上角相對於視口的橫座標
  • y：元素左上角相對於視口的縱座標
  • height：元素高度
  • width：元素寬度
  • left：元素左上角相對於視口的橫座標，與x屬性相等
  • right：元素右邊界相對於視口的橫座標（等於x + width）
  • top：元素頂部相對於視口的縱座標，與y屬性相等
  • bottom：元素底部相對於視口的縱座標（等於y + height）

因爲元素相對於視口（viewport）的位置，會隨着頁面滾動變化，所以表示位置的四個屬性值，都不是固定不變的。若是想獲得絕對位置，能夠將left屬性加上window.scrollX，top屬性加上window.scrollY。

6.Element.getClientRects()

上面代碼是一個行內元素<span>，若是它在頁面上佔據三行，getClientRects方法返回的對象就有三個成員，若是它在頁面上佔據一行，getClientRects方法返回的對象就只有一個成員。

7.Element.insertAdjacentElement()，Element.insertAdjacentHTML()，Element.insertAdjacentText()

Element.insertAdjacentElement方法在相對於當前元素的指定位置，插入一個新的節點。該方法返回被插入的節點，若是插入失敗，返回null。

element.insertAdjacentElement(position, element);
複製代碼

第一個參數只能夠取以下的值。

  • beforebegin：當前元素以前
  • afterbegin：當前元素內部的第一個子節點前面
  • beforeend：當前元素內部的最後一個子節點後面
  • afterend：當前元素以後

七.屬性的操做

HTML 元素包括標籤名和若干個鍵值對，這個鍵值對就稱爲「屬性」（attribute）。

屬性自己是一個對象（Attr對象），可是實際上，這個對象極少使用。通常都是經過元素節點對象（HTMlElement對象）來操做屬性。本章介紹如何操做這些屬性。

元素節點提供六個方法，用來操做屬性。

  • getAttribute()
  • getAttributeNames()
  • setAttribute()
  • hasAttribute()
  • hasAttributes()
  • removeAttribute()

dataset 屬性

有時，須要在HTML元素上附加數據，供 JavaScript 腳本使用。更好的解決方法是，使用標準提供的data-*屬性。能夠添加複雜的數據。

八.Text 節點的概念

文本節點（Text）表明元素節點（Element）和屬性節點（Attribute）的文本內容。若是一個節點只包含一段文本，那麼它就有一個文本子節點，表明該節點的文本內容。

一般咱們使用父節點的firstChild、nextSibling等屬性獲取文本節點，或者使用Document節點的createTextNode方法創造一個文本節點。

1.Text 節點的屬性

data屬性等同於nodeValue屬性，用來設置或讀取文本節點的內容。

2.Text 節點的方法

appendData()，deleteData()，insertData()，replaceData()，subStringData()

九.CSS 操做

1.HTML 元素的 style 屬性

div.setAttribute(
  'style',
  'background-color:red;' + 'border:1px solid black;'
);
複製代碼

2.CSSStyleDeclaration實例

1.CSSStyleDeclaration 接口

CSSStyleDeclaration 接口用來操做元素的樣式。三個地方部署了這個接口。

  • 元素節點的style屬性（Element.style）
  • CSSStyle實例的style屬性
  • window.getComputedStyle()的返回值

個對象所包含的屬性與 CSS 規則一一對應，可是名字須要改寫，好比background-color寫成backgroundColor。改寫的規則是將橫槓從 CSS 屬性名中去除，而後將橫槓後的第一個字母大寫。若是 CSS 屬性名是 JavaScript 保留字，則規則名以前須要加上字符串css，好比float寫成cssFloat。

注意，該對象的屬性值都是字符串，設置時必須包括單位，可是不含規則結尾的分號。好比，divStyle.width不能寫爲100，而要寫爲100px。

2.CSSStyleDeclaration 實例屬性

CSSStyleDeclaration.cssText

CSSStyleDeclaration.length

CSSStyleDeclaration.length屬性返回一個整數值，表示當前規則包含多少條樣式聲明。

CSSStyleDeclaration.parentRule

CSSStyleDeclaration.parentRule屬性返回當前規則所屬的那個樣式塊（CSSRule 實例）。若是不存在所屬的樣式塊，該屬性返回null。

該屬性只讀，且只在使用 CSSRule 接口時有意義。

var declaration = document.styleSheets[0].rules[0].style;
declaration.parentRule === document.styleSheets[0].rules[0]
// true
複製代碼

3.CSSStyleDeclaration 實例方法

SSStyleDeclaration.getPropertyPriority方法接受 CSS 樣式的屬性名做爲參數，返回一個字符串，表示有沒有設置important優先級。若是有就返回important，不然返回空字符串。

style.getPropertyPriority('margin') // "important"
style.getPropertyPriority('color') // ""
複製代碼

CSSStyleDeclaration.getPropertyValue方法接受 CSS 樣式屬性名做爲參數，返回一個字符串，表示該屬性的屬性值。

CSSStyleDeclaration.item方法接受一個整數值做爲參數，返回該位置的 CSS 屬性名。

// HTML 代碼爲
// <div id="myDiv" style="color: red; background-color: white;"/>
var style = document.getElementById('myDiv').style;
style.item(0) // "color"
style.item(1) // "background-color"
複製代碼

CSSStyleDeclaration.removeProperty方法接受一個屬性名做爲參數，在 CSS 規則裏面移除這個屬性，返回這個屬性原來的值。

CSSStyleDeclaration.setProperty方法用來設置新的 CSS 屬性。該方法沒有返回值。

該方法能夠接受三個參數。

  • 第一個參數：屬性名，該參數是必需的。
  • 第二個參數：屬性值，該參數可選。若是省略，則參數值默認爲空字符串。
  • 第三個參數：優先級，該參數可選。若是設置，惟一的合法值是important，表示 CSS 規則裏面的!important。

4.偵測屬性

這種偵測方法能夠寫成一個函數。

function isPropertySupported(property) {
  if (property in document.body.style) return true;
  var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'];
  var prefProperty = property.charAt(0).toUpperCase() + property.substr(1);

  for(var i = 0; i < prefixes.length; i++){
    if((prefixes[i] + prefProperty) in document.body.style) return true;
  }

  return false;
}

isPropertySupported('background-clip')
// true
複製代碼

3.CSS 對象

CSS.escape方法用於轉義 CSS 選擇器裏面的特殊字符。

<div id="foo#bar">
document.querySelector('#' + CSS.escape('foo#bar'))
複製代碼

CSS.supports方法返回一個布爾值，表示當前環境是否支持某一句 CSS 規則。

它的參數有兩種寫法，一種是第一個參數是屬性名，第二個參數是屬性值；另外一種是整個參數就是一行完整的 CSS 語句。

window.getComputedStyle方法，就用來返回瀏覽器計算後獲得的最終規則。它接受一個節點對象做爲參數，返回一個 CSSStyleDeclaration 實例，包含了指定節點的最終樣式信息。所謂「最終樣式信息」，指的是各類 CSS 規則疊加後的結果。

var div = document.querySelector('div');
var styleObj = window.getComputedStyle(div);
styleObj.backgroundColor
複製代碼

上面代碼中，獲得的背景色就是div元素真正的背景色。

4.StyleSheet 接口

StyleSheet接口表明網頁的一張樣式表，包括<link>元素加載的樣式表和<style>元素內嵌的樣式表。

獲取StyleSheet實例

var sheets = document.styleSheets;
var sheet = document.styleSheets[0];
sheet instanceof StyleSheet // true
複製代碼

5.CSSRuleList 接口

StyleSheet實例的cssRules屬性指向的就是CSSRuleList實例

6.CSSRule 接口

CSSRule實例組成CSSRuleList實例

7.CSSStyleRule 接口

若是一條 CSS 規則是普通的樣式規則（不含特殊的 CSS 命令），那麼除了 CSSRule 接口，它還部署了 CSSStyleRule 接口。

8.CSSMediaRule 接口

若是一條 CSS 規則是@media代碼塊，那麼它除了 CSSRule 接口，還部署了 CSSMediaRule 接口。

具體參考文檔：wangdoc.com/javascript/…

十.Mutation Observer API

Mutation Observer API 用來監視 DOM 變更。DOM 的任何變更，好比節點的增減、屬性的變更、文本內容的變更，這個 API 均可以獲得通知。

概念上，它很接近事件，能夠理解爲 DOM 發生變更就會觸發 Mutation Observer 事件。可是，它與事件有一個本質不一樣：事件是同步觸發，也就是說，DOM 的變更馬上會觸發相應的事件；Mutation Observer 則是異步觸發，DOM 的變更並不會立刻觸發，而是要等到當前全部 DOM 操做都結束才觸發。

Mutation Observer 有如下特色。

  • 它等待全部腳本任務完成後，纔會運行（即異步觸發方式）。
  • 它把 DOM 變更記錄封裝成一個數組進行處理，而不是一條條個別處理 DOM 變更。
  • 它既能夠觀察 DOM 的全部類型變更，也能夠指定只觀察某一類變更。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程