前端：Element 節點（JavaScript）

實例屬性

元素特性的相關屬性

（1）Element.id

Element.id屬性返回指定元素的id屬性，該屬性可讀寫。

// HTML 代碼爲 <p id="foo">
var p = document.querySelector('p');
p.id // "foo"

注意，id屬性的值是大小寫敏感，即瀏覽器能正確識別<p id="foo">和<p id="FOO">這兩個元素的id屬性，但是最好不要這樣命名。

（2）Element.tagName

Element.tagName屬性返回指定元素的大寫標籤名，與nodeName屬性的值相等。

// HTML代碼爲
// <span id="myspan">Hello</span>
var span = document.getElementById('myspan');
span.id // "myspan"
span.tagName // "SPAN"

（3）Element.dir

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

（4）Element.accessKey

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

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

上面代碼中，btn元素的快捷鍵是h，按下Alt + h就能將焦點轉移到它上面。

（5）Element.draggable

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

（6）Element.lang

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

// HTML 代碼如下
// <html lang="en">
document.documentElement.lang // "en"

（7）Element.tabIndex

Element.tabIndex屬性返回一個整數，表示當前元素在 Tab 鍵遍歷時的順序。該屬性可讀寫。

tabIndex屬性值如果是負值（通常是-1），則 Tab 鍵不會遍歷到該元素。如果是正整數，則按照順序，從小到大遍歷。如果兩個元素的tabIndex屬性的正整數值相同，則按照出現的順序遍歷。遍歷完所有tabIndex爲正整數的元素以後，再遍歷所有tabIndex等於0、或者屬性值是非法值、或者沒有tabIndex屬性的元素，順序爲它們在網頁中出現的順序。

（8）Element.title

Element.title屬性用來讀寫當前元素的 HTML 屬性title。該屬性通常用來指定，鼠標懸浮時彈出的文字提示框。

元素狀態的相關屬性

（1）Element.hidden

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

var btn = document.getElementById('btn');
var mydiv = document.getElementById('mydiv');

btn.addEventListener('click', function () {
  mydiv.hidden = !mydiv.hidden;
}, false);

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

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

（2）Element.contentEditable，Element.isContentEditable

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

<div contenteditable>123</div>

上面代碼中，<div>元素有contenteditable屬性，因此用戶可以在網頁上編輯這個區塊的內容。

Element.contentEditable屬性返回一個字符串，表示是否設置了contenteditable屬性，有三種可能的值。該屬性可寫。

"true"：元素內容可編輯
"false"：元素內容不可編輯
"inherit"：元素是否可編輯，繼承了父元素的設置

Element.isContentEditable屬性返回一個布爾值，同樣表示是否設置了contenteditable屬性。該屬性只讀。

Element.attributes

Element.attributes屬性返回一個類似數組的對象，成員是當前元素節點的所有屬性節點，詳見《屬性的操作》一章。

var p = document.querySelector('p');
var attrs = p.attributes;

for (var i = attrs.length - 1; i >= 0; i--) {
  console.log(attrs[i].name + '->' + attrs[i].value);
}

上面代碼遍歷p元素的所有屬性。

Element.className，Element.classList

className屬性用來讀寫當前元素節點的class屬性。它的值是一個字符串，每個class之間用空格分割。

classList屬性返回一個類似數組的對象，當前元素節點的每個class就是這個對象的一個成員。

// HTML 代碼 <div class="one two three" id="myDiv"></div>
var div = document.getElementById('myDiv');

div.className
// "one two three"

div.classList
// {
//   0: "one"
//   1: "two"
//   2: "three"
//   length: 3
// }

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

classList對象有下列方法。

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

var div = document.getElementById('myDiv');

div.classList.add('myCssClass');
div.classList.add('foo', 'bar');
div.classList.remove('myCssClass');
div.classList.toggle('myCssClass'); // 如果 myCssClass 不存在就加入，否則移除
div.classList.contains('myCssClass'); // 返回 true 或者 false
div.classList.item(0); // 返回第一個 Class
div.classList.toString();

下面比較一下，className和classList在添加和刪除某個 class 時的寫法。

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

// 添加class
foo.className += 'bold';
foo.classList.add('bold');

// 刪除class
foo.classList.remove('bold');
foo.className = foo.className.replace(/^bold$/, '');

toggle方法可以接受一個布爾值，作爲第二個參數。如果爲true，則添加該屬性；如果爲false，則去除該屬性。

el.classList.toggle('abc', boolValue);

// 等同於
if (boolValue) {
  el.classList.add('abc');
} else {
  el.classList.remove('abc');
}

Element.dataset

網頁元素可以自定義data-屬性，用來添加數據。

<div data-timestamp="1522907809292"></div>

上面代碼中，<div>元素有一個自定義的data-timestamp屬性，用來爲該元素添加一個時間戳。

Element.dataset屬性返回一個對象，可以從這個對象讀寫data-屬性。

// <article
//   id="foo"
//   data-columns="3"
//   data-index-number="12314"
//   data-parent="cars">
//   ...
// </article>
var article = document.getElementById('foo');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

注意，dataset上面的各個屬性返回都是字符串。

HTML 代碼中，data-屬性的屬性名，只能包含英文字母、數字、連詞線（-）、點（.）、冒號（:）和下劃線（_）。它們轉成 JavaScript 對應的dataset屬性名，規則如下。

開頭的data-會省略。
如果連詞線後面跟了一個英文字母，那麼連詞線會取消，該字母變成大寫。
其他字符不變。

因此，data-abc-def對應dataset.abcDef，data-abc-1對應dataset["abc-1"]。

除了使用dataset讀寫data-屬性，也可以使用Element.getAttribute()和Element.setAttribute()，通過完整的屬性名讀寫這些屬性。

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

mydiv.dataset.foo = 'bar';
mydiv.getAttribute('data-foo') // "bar"

Element.innerHTML

Element.innerHTML屬性返回一個字符串，等同於該元素包含的所有 HTML 代碼。該屬性可讀寫，常用來設置某個節點的內容。它能改寫所有元素節點的內容，包括<HTML>和<body>元素。

如果將innerHTML屬性設爲空，等於刪除所有它包含的所有節點。

el.innerHTML = '';

上面代碼等於將el節點變成了一個空節點，el原來包含的節點被全部刪除。

注意，讀取屬性值的時候，如果文本節點包含&、小於號（<）和大於號（>），innerHTML屬性會將它們轉爲實體形式&、<、>。如果想得到原文，建議使用element.textContent屬性。

// HTML代碼如下 <p id="para"> 5 > 3 </p>
document.getElementById('para').innerHTML
// 5 &gt; 3

寫入的時候，如果插入的文本包含 HTML 標籤，會被解析成爲節點對象插入 DOM。注意，如果文本之中含有<script>標籤，雖然可以生成script節點，但是插入的代碼不會執行。

var name = "<script>alert('haha')</script>";
el.innerHTML = name;

上面代碼將腳本插入內容，腳本並不會執行。但是，innerHTML還是有安全風險的。

var name = "<img src=x onerror=alert(1)>";
el.innerHTML = name;

上面代碼中，alert方法是會執行的。因此爲了安全考慮，如果插入的是文本，最好用textContent屬性代替innerHTML。

Element.outerHTML

Element.outerHTML屬性返回一個字符串，表示當前元素節點的所有 HTML 代碼，包括該元素本身和所有子元素。

// HTML 代碼如下
// <div id="d"><p>Hello</p></div>
var d = document.getElementById('d');
d.outerHTML
// '<div id="d"><p>Hello</p></div>'

outerHTML屬性是可讀寫的，對它進行賦值，等於替換掉當前元素。

// HTML 代碼如下
// <div id="container"><div id="d">Hello</div></div>
var container = document.getElementById('container');
var d = document.getElementById('d');
container.firstChild.nodeName // "DIV"
d.nodeName // "DIV"

d.outerHTML = '<p>Hello</p>';
container.firstChild.nodeName // "P"
d.nodeName // "DIV"

上面代碼中，變量d代表子節點，它的outerHTML屬性重新賦值以後，內層的div元素就不存在了，被p元素替換了。但是，變量d依然指向原來的div元素，這表示被替換的DIV元素還存在於內存中。

注意，如果一個節點沒有父節點，設置outerHTML屬性會報錯。

var div = document.createElement('div');
div.outerHTML = '<p>test</p>';
// DOMException: This element has no parent node.

上面代碼中，div元素沒有父節點，設置outerHTML屬性會報錯。

Element.clientHeight，Element.clientWidth

Element.clientHeight屬性返回一個整數值，表示元素節點的 CSS 高度（單位像素），只對塊級元素生效，對於行內元素返回0。如果塊級元素沒有設置 CSS 高度，則返回實際高度。

除了元素本身的高度，它還包括padding部分，但是不包括border、margin。如果有水平滾動條，還要減去水平滾動條的高度。注意，這個值始終是整數，如果是小數會被四捨五入。

Element.clientWidth屬性返回元素節點的 CSS 寬度，同樣只對塊級元素有效，也是隻包括元素本身的寬度和padding，如果有垂直滾動條，還要減去垂直滾動條的寬度。

document.documentElement的clientHeight屬性，返回當前視口的高度（即瀏覽器窗口的高度），等同於window.innerHeight屬性減去水平滾動條的高度（如果有的話）。document.body的高度則是網頁的實際高度。一般來說，document.body.clientHeight大於document.documentElement.clientHeight。

// 視口高度
document.documentElement.clientHeight

// 網頁總高度
document.body.clientHeight

Element.clientLeft，Element.clientTop

Element.clientLeft屬性等於元素節點左邊框（left border）的寬度（單位像素），不包括左側的padding和margin。如果沒有設置左邊框，或者是行內元素（display: inline），該屬性返回0。該屬性總是返回整數值，如果是小數，會四捨五入。

Element.clientTop屬性等於網頁元素頂部邊框的寬度（單位像素），其他特點都與clientLeft相同。

Element.scrollHeight，Element.scrollWidth

Element.scrollHeight屬性返回一個整數值（小數會四捨五入），表示當前元素的總高度（單位像素），包括溢出容器、當前不可見的部分。它包括padding，但是不包括border、margin以及水平滾動條的高度（如果有水平滾動條的話），還包括僞元素（::before或::after）的高度。

Element.scrollWidth屬性表示當前元素的總寬度（單位像素），其他地方都與scrollHeight屬性類似。這兩個屬性只讀。

整張網頁的總高度可以從document.documentElement或document.body上讀取。

// 返回網頁的總高度
document.documentElement.scrollHeight
document.body.scrollHeight

注意，如果元素節點的內容出現溢出，即使溢出的內容是隱藏的，scrollHeight屬性仍然返回元素的總高度。

// HTML 代碼如下
// <div id="myDiv" style="height: 200px; overflow: hidden;">...<div>
document.getElementById('myDiv').scrollHeight // 356

上面代碼中，即使myDiv元素的 CSS 高度只有200像素，且溢出部分不可見，但是scrollHeight仍然會返回該元素的原始高度。

Element.scrollLeft，Element.scrollTop

Element.scrollLeft屬性表示當前元素的水平滾動條向右側滾動的像素數量，Element.scrollTop屬性表示當前元素的垂直滾動條向下滾動的像素數量。對於那些沒有滾動條的網頁元素，這兩個屬性總是等於0。

如果要查看整張網頁的水平的和垂直的滾動距離，要從document.documentElement元素上讀取。

document.documentElement.scrollLeft
document.documentElement.scrollTop

這兩個屬性都可讀寫，設置該屬性的值，會導致瀏覽器將當前元素自動滾動到相應的位置。

Element.offsetParent

Element.offsetParent屬性返回最靠近當前元素的、並且 CSS 的position屬性不等於static的上層元素。

<div style="position: absolute;">
  <p>
    <span>Hello</span>
  </p>
</div>

上面代碼中，span元素的offsetParent屬性就是div元素。

該屬性主要用於確定子元素位置偏移的計算基準，Element.offsetTop和Element.offsetLeft就是offsetParent元素計算的。

如果該元素是不可見的（display屬性爲none），或者位置是固定的（position屬性爲fixed），則offsetParent屬性返回null。

<div style="position: absolute;">
  <p>
    <span style="display: none;">Hello</span>
  </p>
</div>

上面代碼中，span元素的offsetParent屬性是null。

如果某個元素的所有上層節點的position屬性都是static，則Element.offsetParent屬性指向<body>元素。

Element.offsetHeight，Element.offsetWidth

Element.offsetHeight屬性返回一個整數，表示元素的 CSS 垂直高度（單位像素），包括元素本身的高度、padding 和 border，以及水平滾動條的高度（如果存在滾動條）。

Element.offsetWidth屬性表示元素的 CSS 水平寬度（單位像素），其他都與Element.offsetHeight一致。

這兩個屬性都是隻讀屬性，只比Element.clientHeight和Element.clientWidth多了邊框的高度或寬度。如果元素的 CSS 設爲不可見（比如display: none;），則返回0。

Element.offsetLeft，Element.offsetTop

Element.offsetLeft返回當前元素左上角相對於Element.offsetParent節點的水平位移，Element.offsetTop返回垂直位移，單位爲像素。通常，這兩個值是指相對於父節點的位移。

下面的代碼可以算出元素左上角相對於整張網頁的座標。

function getElementPosition(e) {
  var x = 0;
  var y = 0;
  while (e !== null)  {
    x += e.offsetLeft;
    y += e.offsetTop;
    e = e.offsetParent;
  }
  return {x: x, y: y};
}

Element.style

每個元素節點都有style用來讀寫該元素的行內樣式信息，具體介紹參見《CSS 操作》一章。

Element.children，Element.childElementCount

Element.children屬性返回一個類似數組的對象（HTMLCollection實例），包括當前元素節點的所有子元素。如果當前元素沒有子元素，則返回的對象包含零個成員。

if (para.children.length) {
  var children = para.children;
    for (var i = 0; i < children.length; i++) {
      // ...
    }
}

上面代碼遍歷了para元素的所有子元素。

這個屬性與Node.childNodes屬性的區別是，它只包括元素類型的子節點，不包括其他類型的子節點。

Element.childElementCount屬性返回當前元素節點包含的子元素節點的個數，與Element.children.length的值相同。

Element.firstElementChild，Element.lastElementChild

Element.firstElementChild屬性返回當前元素的第一個元素子節點，Element.lastElementChild返回最後一個元素子節點。

如果沒有元素子節點，這兩個屬性返回null。

Element.nextElementSibling，Element.previousElementSibling

Element.nextElementSibling屬性返回當前元素節點的後一個同級元素節點，如果沒有則返回null。

// HTML 代碼如下
// <div id="div-01">Here is div-01</div>
// <div id="div-02">Here is div-02</div>
var el = document.getElementById('div-01');
el.nextElementSibling
// <div id="div-02">Here is div-02</div>

Element.previousElementSibling屬性返回當前元素節點的前一個同級元素節點，如果沒有則返回null。

實例方法

屬性相關方法

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

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

這些方法的介紹請看《屬性的操作》一章。

Element.querySelector()

Element.querySelector方法接受 CSS 選擇器作爲參數，返回父元素的第一個匹配的子元素。如果沒有找到匹配的子元素，就返回null。

var content = document.getElementById('content');
var el = content.querySelector('p');

上面代碼返回content節點的第一個p元素。

Element.querySelector方法可以接受任何複雜的 CSS 選擇器。

document.body.querySelector("style[type='text/css'], style:not([type])");

注意，這個方法無法選中僞元素。

它可以接受多個選擇器，它們之間使用逗號分隔。

element.querySelector('div, p')

上面代碼返回element的第一個div或p子元素。

需要注意的是，瀏覽器執行querySelector方法時，是先在全局範圍內搜索給定的 CSS 選擇器，然後過濾出哪些屬於當前元素的子元素。因此，會有一些違反直覺的結果，下面是一段 HTML 代碼。

<div>
<blockquote id="outer">
  <p>Hello</p>
  <div id="inner">
    <p>World</p>
  </div>
</blockquote>
</div>

那麼，像下面這樣查詢的話，實際上返回的是第一個p元素，而不是第二個。

var outer = document.getElementById('outer');
outer.querySelector('div p')
// <p>Hello</p>

Element.querySelectorAll()

Element.querySelectorAll方法接受 CSS 選擇器作爲參數，返回一個NodeList實例，包含所有匹配的子元素。

var el = document.querySelector('#test');
var matches = el.querySelectorAll('div.highlighted > p');

該方法的執行機制與querySelector方法相同，也是先在全局範圍內查找，再過濾出當前元素的子元素。因此，選擇器實際上針對整個文檔的。

它也可以接受多個 CSS 選擇器，它們之間使用逗號分隔。如果選擇器裏面有僞元素的選擇器，則總是返回一個空的NodeList實例。

Element.getElementsByClassName()

Element.getElementsByClassName方法返回一個HTMLCollection實例，成員是當前元素節點的所有具有指定 class 的子元素節點。該方法與document.getElementsByClassName方法的用法類似，只是搜索範圍不是整個文檔，而是當前元素節點。

element.getElementsByClassName('red test');

注意，該方法的參數大小寫敏感。

由於HTMLCollection實例是一個活的集合，document對象的任何變化會立刻反應到實例，下面的代碼不會生效。

// HTML 代碼如下
// <div id="example">
//   <p class="foo"></p>
//   <p class="foo"></p>
// </div>
var element = document.getElementById('example');
var matches = element.getElementsByClassName('foo');

for (var i = 0; i< matches.length; i++) {
  matches[i].classList.remove('foo');
  matches.item(i).classList.add('bar');
}
// 執行後，HTML 代碼如下
// <div id="example">
//   <p></p>
//   <p class="foo bar"></p>
// </div>

上面代碼中，matches集合的第一個成員，一旦被拿掉 class 裏面的foo，就會立刻從matches裏面消失，導致出現上面的結果。

Element.getElementsByTagName()

Element.getElementsByTagName方法返回一個HTMLCollection實例，成員是當前節點的所有匹配指定標籤名的子元素節點。該方法與document.getElementsByClassName方法的用法類似，只是搜索範圍不是整個文檔，而是當前元素節點。

var table = document.getElementById('forecast-table');
var cells = table.getElementsByTagName('td');

注意，該方法的參數是大小寫不敏感的。

Element.closest()

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

// HTML 代碼如下
// <article>
//   <div id="div-01">Here is div-01
//     <div id="div-02">Here is div-02
//       <div id="div-03">Here is div-03</div>
//     </div>
//   </div>
// </article>

var div03 = document.getElementById('div-03');

// div-03 最近的祖先節點
div03.closest("#div-02") // div-02
div03.closest("div div") // div-03
div03.closest("article > div") //div-01
div03.closest(":not(div)") // article

上面代碼中，由於closest方法將當前節點也考慮在內，所以第二個closest方法返回div-03。

Element.matches()

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

if (el.matches('.someClass')) {
  console.log('Match!');
}

事件相關方法

以下三個方法與Element節點的事件相關。這些方法都繼承自EventTarget接口，詳見相關章節。

Element.addEventListener()：添加事件的回調函數
Element.removeEventListener()：移除事件監聽函數
Element.dispatchEvent()：觸發事件

element.addEventListener('click', listener, false);
element.removeEventListener('click', listener, false);

var event = new Event('click');
element.dispatchEvent(event);

Element.scrollIntoView()

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

el.scrollIntoView(); // 等同於el.scrollIntoView(true)
el.scrollIntoView(false);

該方法可以接受一個布爾值作爲參數。如果爲true，表示元素的頂部與當前區域的可見部分的頂部對齊（前提是當前區域可滾動）；如果爲false，表示元素的底部與當前區域的可見部分的尾部對齊（前提是當前區域可滾動）。如果沒有提供該參數，默認爲true。

Element.getBoundingClientRect()

Element.getBoundingClientRect方法返回一個對象，提供當前元素節點的大小、位置等信息，基本上就是 CSS 盒狀模型的所有信息。

var rect = obj.getBoundingClientRect();

上面代碼中，getBoundingClientRect方法返回的rect對象，具有以下屬性（全部爲只讀）。

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

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

注意，getBoundingClientRect方法的所有屬性，都把邊框（border屬性）算作元素的一部分。也就是說，都是從邊框外緣的各個點來計算。因此，width和height包括了元素本身 + padding + border。

另外，上面的這些屬性，都是繼承自原型的屬性，Object.keys會返回一個空數組，這一點也需要注意。

var rect = document.body.getBoundingClientRect();
Object.keys(rect) // []

上面代碼中，rect對象沒有自身屬性，而Object.keys方法只返回對象自身的屬性，所以返回了一個空數組。

Element.getClientRects()

Element.getClientRects方法返回一個類似數組的對象，裏面是當前元素在頁面上形成的所有矩形（所以方法名中的Rect用的是複數）。每個矩形都有bottom、height、left、right、top和width六個屬性，表示它們相對於視口的四個座標，以及本身的高度和寬度。

對於盒狀元素（比如<div>和<p>），該方法返回的對象中只有該元素一個成員。對於行內元素（比如<span>、<a>、<em>），該方法返回的對象有多少個成員，取決於該元素在頁面上佔據多少行。這是它和Element.getBoundingClientRect()方法的主要區別，後者對於行內元素總是返回一個矩形。

<span id="inline">Hello World Hello World Hello World</span>

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

var el = document.getElementById('inline');
el.getClientRects().length // 3
el.getClientRects()[0].left // 8
el.getClientRects()[0].right // 113.908203125
el.getClientRects()[0].bottom // 31.200000762939453
el.getClientRects()[0].height // 23.200000762939453
el.getClientRects()[0].width // 105.908203125

這個方法主要用於判斷行內元素是否換行，以及行內元素的每一行的位置偏移。

注意，如果行內元素包括換行符，那麼該方法會把換行符考慮在內。

<span id="inline">
  Hello World
  Hello World
  Hello World
</span>

上面代碼中，<span>節點內部有三個換行符，即使 HTML 語言忽略換行符，將它們顯示爲一行，getClientRects()方法依然會返回三個成員。如果行寬設置得特別窄，上面的<span>元素顯示爲6行，那麼就會返回六個成員。

Element.insertAdjacentElement()

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

element.insertAdjacentElement(position, element);

Element.insertAdjacentElement方法一共可以接受兩個參數，第一個參數是一個字符串，表示插入的位置，第二個參數是將要插入的節點。第一個參數只可以取如下的值。

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

注意，beforebegin和afterend這兩個值，只在當前節點有父節點時纔會生效。如果當前節點是由腳本創建的，沒有父節點，那麼插入會失敗。

var p1 = document.createElement('p')
var p2 = document.createElement('p')
p1.insertAdjacentElement('afterend', p2) // null

上面代碼中，p1沒有父節點，所以插入p2到它後面就失敗了。

如果插入的節點是一個文檔裏現有的節點，它會從原有位置刪除，放置到新的位置。

Element.insertAdjacentHTML()，Element.insertAdjacentText()

Element.insertAdjacentHTML方法用於將一個 HTML 字符串，解析生成 DOM 結構，插入相對於當前節點的指定位置。

element.insertAdjacentHTML(position, text);

該方法接受兩個參數，第一個是一個表示指定位置的字符串，第二個是待解析的 HTML 字符串。第一個參數只能設置下面四個值之一。

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

// HTML 代碼：<div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// 執行後的 HTML 代碼：
// <div id="one">one</div><div id="two">two</div>

該方法只是在現有的 DOM 結構裏面插入節點，這使得它的執行速度比innerHTML方法快得多。

注意，該方法不會轉義 HTML 字符串，這導致它不能用來插入用戶輸入的內容，否則會有安全風險。

Element.insertAdjacentText方法在相對於當前節點的指定位置，插入一個文本節點，用法與Element.insertAdjacentHTML方法完全一致。

// HTML 代碼：<div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentText('afterend', 'two');
// 執行後的 HTML 代碼：
// <div id="one">one</div>two

Element.remove()

Element.remove方法繼承自 ChildNode 接口，用於將當前元素節點從它的父節點移除。

var el = document.getElementById('mydiv');
el.remove();

上面代碼將el節點從 DOM 樹裏面移除。

Element.focus()，Element.blur()

Element.focus方法用於將當前頁面的焦點，轉移到指定元素上。

document.getElementById('my-span').focus();

該方法可以接受一個對象作爲參數。參數對象的preventScroll屬性是一個布爾值，指定是否將當前元素停留在原始位置，而不是滾動到可見區域。

function getFocus() {
  document.getElementById('btn').focus({preventScroll:false});
}

上面代碼會讓btn元素獲得焦點，並滾動到可見區域。

最後，從document.activeElement屬性可以得到當前獲得焦點的元素。

Element.blur方法用於將焦點從當前元素移除。

Element.click()

Element.click方法用於在當前元素上模擬一次鼠標點擊，相當於觸發了click事件。

來源：https://wangdoc.com/javascript/dom/element.html