JavaScript Element對(duì)象

目錄

Element對(duì)象對(duì)應(yīng)網(wǎng)頁的HTML標(biāo)簽元素。每一個(gè)HTML標(biāo)簽元素，在DOM樹上都會(huì)轉(zhuǎn)化成一個(gè)Element節(jié)點(diǎn)對(duì)象（以下簡稱元素節(jié)點(diǎn)）。

元素節(jié)點(diǎn)的nodeType屬性都是1，但是不同HTML標(biāo)簽生成的元素節(jié)點(diǎn)是不一樣的。JavaScript內(nèi)部使用不同的構(gòu)造函數(shù)，生成不同的Element節(jié)點(diǎn)，比如<a>標(biāo)簽的節(jié)點(diǎn)對(duì)象由HTMLAnchorElement()構(gòu)造函數(shù)生成，<button>標(biāo)簽的節(jié)點(diǎn)對(duì)象由HTMLButtonElement()構(gòu)造函數(shù)生成。因此，元素節(jié)點(diǎn)不是一種對(duì)象，而是一組對(duì)象。

以下屬性與元素特點(diǎn)本身的特征相關(guān)。

Element.attributes

Element.attributes屬性返回一個(gè)類似數(shù)組的對(duì)象，成員是當(dāng)前元素節(jié)點(diǎn)的所有屬性節(jié)點(diǎn)，詳見本章《屬性的操作》一節(jié)。

Element.id，Element.tagName

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

Element.tagName屬性返回指定元素的大寫標(biāo)簽名，與nodeName屬性的值相等。

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

Element.innerHTML

Element.innerHTML屬性返回該元素包含的 HTML 代碼。該屬性可讀寫，常用來設(shè)置某個(gè)節(jié)點(diǎn)的內(nèi)容。

如果將innerHTML屬性設(shè)為空，等于刪除所有它包含的所有節(jié)點(diǎn)。

el.innerHTML = '';

上面代碼等于將el節(jié)點(diǎn)變成了一個(gè)空節(jié)點(diǎn)，el原來包含的節(jié)點(diǎn)被全部刪除。

注意，如果文本節(jié)點(diǎn)中包含&、小于號(hào)（<）和大于號(hào)（>），innerHTML屬性會(huì)將它們轉(zhuǎn)為實(shí)體形式&、<、>。

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

如果插入的文本包含 HTML 標(biāo)簽，會(huì)被解析成為節(jié)點(diǎn)對(duì)象插入 DOM。注意，如果文本之中含有<script>標(biāo)簽，雖然可以生成script節(jié)點(diǎn)，但是插入的代碼不會(huì)執(zhí)行。

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

上面代碼將腳本插入內(nèi)容，腳本并不會(huì)執(zhí)行。但是，innerHTML還是有安全風(fēng)險(xiǎn)的。

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

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

Element.outerHTML

Element.outerHTML屬性返回一個(gè)字符串，內(nèi)容為指定元素節(jié)點(diǎn)的所有HTML代碼，包括它自身和包含的所有子元素。

// HTML代碼如下
// <div id="d"><p>Hello</p></div>

d = document.getElementById('d');
d.outerHTML
// '<div id="d"><p>Hello</p></div>'

outerHTML屬性是可讀寫的，對(duì)它進(jìn)行賦值，等于替換掉當(dāng)前元素。

// HTML代碼如下
// <div id="container"><div id="d">Hello</div></div>

container = document.getElementById('container');
d = document.getElementById("d");
container.firstChild.nodeName // "DIV"
d.nodeName // "DIV"

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

上面代碼中，outerHTML屬性重新賦值以后，內(nèi)層的div元素就不存在了，被p元素替換了。但是，變量d依然指向原來的div元素，這表示被替換的DIV元素還存在于內(nèi)存中。

Element.className，Element.classList

className屬性用來讀寫當(dāng)前元素節(jié)點(diǎn)的class屬性。它的值是一個(gè)字符串，每個(gè)class之間用空格分割。

classList屬性則返回一個(gè)類似數(shù)組的對(duì)象，當(dāng)前元素節(jié)點(diǎn)的每個(gè)class就是這個(gè)對(duì)象的一個(gè)成員。

<div class="one two three" id="myDiv"></div>

上面這個(gè)div元素的節(jié)點(diǎn)對(duì)象的className屬性和classList屬性，分別如下。

document.getElementById('myDiv').className
// "one two three"

document.getElementById('myDiv').classList
// {
//   0: "one"
//   1: "two"
//   2: "three"
//   length: 3
// }

從上面代碼可以看出，className屬性返回一個(gè)空格分隔的字符串，而classList屬性指向一個(gè)類似數(shù)組的對(duì)象，該對(duì)象的length屬性（只讀）返回當(dāng)前元素的class數(shù)量。

classList對(duì)象有下列方法。

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

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

下面比較一下，className和classList在添加和刪除某個(gè)類時(shí)的寫法。

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

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

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

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

// 等同于

if (boolValue){
  el.classList.add('abc');
} else {
  el.classList.remove('abc');
}

Element.clientHeight，Element.clientWidth

Element.clientHeight屬性返回元素節(jié)點(diǎn)可見部分的高度，Element.clientWidth屬性返回元素節(jié)點(diǎn)可見部分的寬度。所謂“可見部分”，指的是不包括溢出（overflow）的大小，只返回該元素在容器中占據(jù)的大小，對(duì)于有滾動(dòng)條的元素來說，它們等于滾動(dòng)條圍起來的區(qū)域大小。這兩個(gè)屬性的值包括Padding、但不包括滾動(dòng)條、邊框和Margin，單位為像素。這兩個(gè)屬性可以計(jì)算得到，等于元素的CSS高度（或?qū)挾龋┘由螩SS的Padding，減去滾動(dòng)條（如果存在）。

對(duì)于整張網(wǎng)頁來說，當(dāng)前可見高度（即視口高度）要從document.documentElement對(duì)象（即<html>節(jié)點(diǎn)）上獲取，等同于window.innerHeight屬性減去水平滾動(dòng)條的高度。沒有滾動(dòng)條時(shí)，這兩個(gè)值是相等的；有滾動(dòng)條時(shí)，前者小于后者。

var rootElement = document.documentElement;

// 沒有水平滾動(dòng)條時(shí)
rootElement.clientHeight === window.innerHeight // true

// 沒有垂直滾動(dòng)條時(shí)
rootElement.clientWidth === window.innerWidth // true

注意，這里不能用document.body.clientHeight或document.body.clientWidth，因?yàn)?code class="highlighter-rouge">document.body返回<body>節(jié)點(diǎn)，與視口大小是無關(guān)的。

Element.clientLeft，Element.clientTop

Element.clientLeft屬性等于元素節(jié)點(diǎn)左邊框（left border）的寬度，Element.clientTop屬性等于網(wǎng)頁元素頂部邊框的寬度，單位為像素。

這兩個(gè)屬性包括滾動(dòng)條的寬度，但不包括Margin和Padding。不過，一般來說，除非排版方向是從右到左，且發(fā)生元素高度溢出，否則不可能存在左側(cè)滾動(dòng)條，亦不可能存在頂部的滾動(dòng)條。

如果元素的顯示設(shè)為display: inline，它的clientLeft屬性一律為0，不管是否存在左邊框。

Element.scrollHeight，Element.scrollWidth

Element.scrollHeight屬性返回某個(gè)網(wǎng)頁元素的總高度，Element.scrollWidth屬性返回總寬度，可以理解成元素在垂直和水平兩個(gè)方向上可以滾動(dòng)的距離。它們都包括由于溢出容器而無法顯示在網(wǎng)頁上的那部分高度或?qū)挾?。這兩個(gè)屬性是只讀屬性。

它們返回的是整個(gè)元素的高度或?qū)挾?，包括由于存在滾動(dòng)條而不可見的部分。默認(rèn)情況下，它們包括Padding，但不包括Border和Margin。

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

document.documentElement.scrollHeight

如果內(nèi)容正好適合它的容器，沒有溢出，那么Element.scrollHeight和Element.clientHeight是相等的，scrollWidth屬性與clientWidth屬性是相等的。如果存在溢出，那么scrollHeight屬性大于clientHeight屬性，scrollWidth屬性大于clientWidth屬性。

存在溢出時(shí)，當(dāng)滾動(dòng)條滾動(dòng)到內(nèi)容底部時(shí)，下面的表達(dá)式為true。

element.scrollHeight - element.scrollTop === element.clientHeight

如果滾動(dòng)條沒有滾動(dòng)到內(nèi)容底部，上面的表達(dá)式為false。這個(gè)特性結(jié)合onscroll事件，可以判斷用戶是否滾動(dòng)到了指定元素的底部，比如向用戶展示某個(gè)內(nèi)容區(qū)塊時(shí)，判斷用戶是否滾動(dòng)到了區(qū)塊的底部。

var rules = document.getElementById('rules');
rules.onscroll = checking;

function checking(){
  if (this.scrollHeight - this.scrollTop === this.clientHeight) {
    console.log('謝謝閱讀');
  } else {
    console.log('您還未讀完');
  }
}

Element.scrollLeft，Element.scrollTop

Element.scrollLeft屬性表示網(wǎng)頁元素的水平滾動(dòng)條向右側(cè)滾動(dòng)的像素?cái)?shù)量，Element.scrollTop屬性表示網(wǎng)頁元素的垂直滾動(dòng)條向下滾動(dòng)的像素?cái)?shù)量。對(duì)于那些沒有滾動(dòng)條的網(wǎng)頁元素，這兩個(gè)屬性總是等于0。

如果要查看整張網(wǎng)頁的水平的和垂直的滾動(dòng)距離，要從document.body元素上讀取。

document.body.scrollLeft
document.body.scrollTop

這兩個(gè)屬性都可讀寫，設(shè)置該屬性的值，會(huì)導(dǎo)致瀏覽器將指定元素自動(dòng)滾動(dòng)到相應(yīng)的位置。

Element.offsetHeight，Element.offsetWidth

Element.offsetHeight屬性返回元素的垂直高度，Element.offsetWidth屬性返回水平寬度。offsetHeight可以理解成元素左下角距離左上角的位移，offsetWidth是元素右上角距離左上角的位移。它們的單位為像素，都是只讀。

這兩個(gè)屬性值包括Padding和Border、以及滾動(dòng)條。這也意味著，如果不存在內(nèi)容溢出，Element.offsetHeight只比Element.clientHeight多了邊框的高度。

整張網(wǎng)頁的高度，可以在document.documentElement和document.body上讀取。

// 網(wǎng)頁總高度
document.documentElement.offsetHeight
document.body.offsetHeight

// 網(wǎng)頁總寬度
document.documentElement.offsetWidth
document.body.offsetWidth

Element.offsetLeft，Element.offsetTop

Element.offsetLeft返回當(dāng)前元素左上角相對(duì)于Element.offsetParent節(jié)點(diǎn)的水平位移，Element.offsetTop返回垂直位移，單位為像素。通常，這兩個(gè)值是指相對(duì)于父節(jié)點(diǎn)的位移。

下面的代碼可以算出元素左上角相對(duì)于整張網(wǎng)頁的坐標(biāo)。

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};
}

注意，上面的代碼假定所有元素都適合它的容器，不存在內(nèi)容溢出。

Element.style

每個(gè)元素節(jié)點(diǎn)都有style用來讀寫該元素的行內(nèi)樣式信息，具體介紹參見《CSS操作》一節(jié)。

總結(jié)

整張網(wǎng)頁的高度和寬度，可以從document.documentElement（即<html>元素）或<body>元素上讀取。

// 網(wǎng)頁總高度
document.documentElement.offsetHeight
document.documentElement.scrollHeight
document.body.offsetHeight
document.body.scrollHeight

// 網(wǎng)頁總寬度
document.documentElement.offsetWidth
document.documentElement.scrollWidth
document.body.offsetWidth
document.body.scrollWidth

由于<html>和<body>的寬度可能設(shè)得不一樣，因此從<body>上取值會(huì)更保險(xiǎn)一點(diǎn)。

視口的高度和寬度（包括滾動(dòng)條），有兩種方法可以獲得。

// 視口高度
window.innerHeight // 包括滾動(dòng)條
document.documentElement.clientHeight // 不包括滾動(dòng)條

// 視口寬度
window.innerWidth // 包括滾動(dòng)條
document.documentElement.clientWidth // 不包括滾動(dòng)條

某個(gè)網(wǎng)頁元素距離視口左上角的坐標(biāo)，使用Element.getBoundingClientRect方法讀取。

// 網(wǎng)頁元素左上角的視口橫坐標(biāo)
Element.getBoundingClientRect().left

// 網(wǎng)頁元素左上角的視口縱坐標(biāo)
Element.getBoundingClientRect().top

某個(gè)網(wǎng)頁元素距離網(wǎng)頁左上角的坐標(biāo)，使用視口坐標(biāo)加上網(wǎng)頁滾動(dòng)距離。

// 網(wǎng)頁元素左上角的網(wǎng)頁橫坐標(biāo)
Element.getBoundingClientRect().left + document.documentElement.scrollLeft

// 網(wǎng)頁元素左上角的網(wǎng)頁縱坐標(biāo)
Element.getBoundingClientRect().top + document.documentElement.scrollTop

網(wǎng)頁目前滾動(dòng)的距離，可以從document.documentElement節(jié)點(diǎn)上得到。

// 網(wǎng)頁滾動(dòng)的水平距離
document.documentElement.scrollLeft

// 網(wǎng)頁滾動(dòng)的垂直距離
document.documentElement.scrollTop

網(wǎng)頁元素本身的高度和寬度（不含overflow溢出的部分），通過offsetHeight和offsetWidth屬性（包括Padding和Border）或Element.getBoundingClientRect方法獲取。

// 網(wǎng)頁元素的高度
Element.offsetHeight

// 網(wǎng)頁元素的寬度
Element.offsetWidth

以下屬性返回元素節(jié)點(diǎn)的相關(guān)節(jié)點(diǎn)。

Element.children，Element.childElementCount

Element.children屬性返回一個(gè)HTMLCollection對(duì)象，包括當(dāng)前元素節(jié)點(diǎn)的所有子元素。它是一個(gè)類似數(shù)組的動(dòng)態(tài)對(duì)象（實(shí)時(shí)反映網(wǎng)頁元素的變化）。如果當(dāng)前元素沒有子元素，則返回的對(duì)象包含零個(gè)成員。

// para是一個(gè)p元素節(jié)點(diǎn)
if (para.children.length) {
  var children = para.children;
    for (var i = 0; i < children.length; i++) {
      // ...
    }
}

這個(gè)屬性與Node.childNodes屬性的區(qū)別是，它只包括HTML元素類型的子節(jié)點(diǎn)，不包括其他類型的子節(jié)點(diǎn)。

Element.childElementCount屬性返回當(dāng)前元素節(jié)點(diǎn)包含的子HTML元素節(jié)點(diǎn)的個(gè)數(shù)，與Element.children.length的值相同。注意，該屬性只計(jì)算HTML元素類型的子節(jié)點(diǎn)。

Element.firstElementChild，Element.lastElementChild

Element.firstElementChild屬性返回第一個(gè)HTML元素類型的子節(jié)點(diǎn)，Element.lastElementChild返回最后一個(gè)HTML元素類型的子節(jié)點(diǎn)。

如果沒有HTML類型的子節(jié)點(diǎn)，這兩個(gè)屬性返回null。

Element.nextElementSibling，Element.previousElementSibling

Element.nextElementSibling屬性返回當(dāng)前HTML元素節(jié)點(diǎn)的后一個(gè)同級(jí)HTML元素節(jié)點(diǎn)，如果沒有則返回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屬性返回當(dāng)前HTML元素節(jié)點(diǎn)的前一個(gè)同級(jí)HTML元素節(jié)點(diǎn)，如果沒有則返回null。

Element.offsetParent

Element.offsetParent屬性返回當(dāng)前HTML元素的最靠近的、并且CSS的position屬性不等于static的父元素。如果某個(gè)元素的所有上層節(jié)點(diǎn)都將position屬性設(shè)為static，則Element.offsetParent屬性指向<body>元素。

該屬性主要用于確定子元素的位置偏移，是Element.offsetTop和Element.offsetLeft的計(jì)算基準(zhǔn)。

元素節(jié)點(diǎn)提供以下四個(gè)方法，用來操作HTML標(biāo)簽的屬性。

• Element.getAttribute()：讀取指定屬性
• Element.setAttribute()：設(shè)置指定屬性
• Element.hasAttribute()：返回一個(gè)布爾值，表示當(dāng)前元素節(jié)點(diǎn)是否有指定的屬性
• Element.removeAttribute()：移除指定屬性

這些屬性的詳細(xì)介紹，參見本章的《屬性的操作》一節(jié)。

以下四個(gè)方法用來查找與當(dāng)前元素節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。這四個(gè)方法也部署在document對(duì)象上，用法完全一致。

• Element.querySelector()
• Element.querySelectorAll()
• Element.getElementsByTagName()
• Element.getElementsByClassName()

上面四個(gè)方法只返回Element子節(jié)點(diǎn)，因此可以采用鏈?zhǔn)綄懛ā?/p>

document
  .getElementById('header')
  .getElementsByClassName('a')

Element.querySelector()

Element.querySelector方法接受CSS選擇器作為參數(shù)，返回父元素的第一個(gè)匹配的子元素。

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

上面代碼返回content節(jié)點(diǎn)的第一個(gè)p元素。

需要注意的是，瀏覽器執(zhí)行querySelector方法時(shí)，是先在全局范圍內(nèi)搜索給定的CSS選擇器，然后過濾出哪些屬于當(dāng)前元素的子元素。因此，會(huì)有一些違反直覺的結(jié)果，請(qǐng)看下面的HTML代碼。

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

那么，下面代碼實(shí)際上會(huì)返回第一個(gè)p元素，而不是第二個(gè)。

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

Element.querySelectorAll()

Element.querySelectorAll方法接受CSS選擇器作為參數(shù)，返回一個(gè)NodeList對(duì)象，包含所有匹配的子元素。

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

該方法的執(zhí)行機(jī)制與querySelector相同，也是先在全局范圍內(nèi)查找，再過濾出當(dāng)前元素的子元素。因此，選擇器實(shí)際上針對(duì)整個(gè)文檔的。

Element.getElementsByClassName()

Element.getElementsByClassName方法返回一個(gè)HTMLCollection對(duì)象，成員是當(dāng)前元素節(jié)點(diǎn)的所有匹配指定class的子元素。該方法與document.getElementsByClassName方法的用法類似，只是搜索范圍不是整個(gè)文檔，而是當(dāng)前元素節(jié)點(diǎn)。

element.getElementsByClassName('red test');

注意，該方法的參數(shù)大小寫敏感。

Element.getElementsByTagName()

Element.getElementsByTagName方法返回一個(gè)HTMLCollection對(duì)象，成員是當(dāng)前元素節(jié)點(diǎn)的所有匹配指定標(biāo)簽名的子元素。該方法與document.getElementsByClassName方法的用法類似，只是搜索范圍不是整個(gè)文檔，而是當(dāng)前元素節(jié)點(diǎn)。

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

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

Element.closest()

Element.closest方法返回當(dāng)前元素節(jié)點(diǎn)的最接近的父元素（或者當(dāng)前節(jié)點(diǎn)本身），條件是必須匹配給定的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>

div-03節(jié)點(diǎn)的closet方法的例子如下。

var el = document.getElementById('div-03');
el.closest("#div-02") // div-02
el.closest("div div") // div-03
el.closest("article > div") //div-01
el.closest(":not(div)") // article

上面代碼中，由于closet方法將當(dāng)前元素節(jié)點(diǎn)也考慮在內(nèi)，所以第二個(gè)closet方法返回div-03。

Element.match()

Element.match方法返回一個(gè)布爾值，表示當(dāng)前元素是否匹配給定的CSS選擇器。

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

該方法帶有瀏覽器前綴，下面的函數(shù)可以兼容不同的瀏覽器，并且在瀏覽器不支持時(shí)，自行部署這個(gè)功能。

function matchesSelector(el, selector) {
  var p = Element.prototype;
  var f = p.matches
    || p.webkitMatchesSelector
    || p.mozMatchesSelector
    || p.msMatchesSelector
    || function(s) {
    return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
  };
  return f.call(el, selector);
}

// 用法
matchesSelector(
  document.getElementById('myDiv'),
  'div.someSelector[some-attribute=true]'
)

以下三個(gè)方法與Element節(jié)點(diǎn)的事件相關(guān)。這些方法都繼承自EventTarget接口，詳見本章的《Event對(duì)象》一節(jié)。

• Element.addEventListener()：添加事件的回調(diào)函數(shù)
• Element.removeEventListener()：移除事件監(jiān)聽函數(shù)
• Element.dispatchEvent()：觸發(fā)事件

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

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

Element.scrollIntoView()

Element.scrollIntoView方法滾動(dòng)當(dāng)前元素，進(jìn)入瀏覽器的可見區(qū)域，類似于設(shè)置window.location.hash的效果。

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

該方法可以接受一個(gè)布爾值作為參數(shù)。如果為true，表示元素的頂部與當(dāng)前區(qū)域的可見部分的頂部對(duì)齊（前提是當(dāng)前區(qū)域可滾動(dòng)）；如果為false，表示元素的底部與當(dāng)前區(qū)域的可見部分的尾部對(duì)齊（前提是當(dāng)前區(qū)域可滾動(dòng)）。如果沒有提供該參數(shù)，默認(rèn)為true。

Element.getBoundingClientRect()

Element.getBoundingClientRect方法返回一個(gè)對(duì)象，該對(duì)象提供當(dāng)前元素節(jié)點(diǎn)的大小、位置等信息，基本上就是CSS盒狀模型提供的所有信息。

var rect = obj.getBoundingClientRect();

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

• x：元素左上角相對(duì)于視口的橫坐標(biāo)
• left：元素左上角相對(duì)于視口的橫坐標(biāo)，與x屬性相等
• right：元素右邊界相對(duì)于視口的橫坐標(biāo)（等于x加上width）
• width：元素寬度（等于right減去left）
• y：元素頂部相對(duì)于視口的縱坐標(biāo)
• top：元素頂部相對(duì)于視口的縱坐標(biāo)，與y屬性相等
• bottom：元素底部相對(duì)于視口的縱坐標(biāo)
• height：元素高度（等于y加上height）

由于元素相對(duì)于視口（viewport）的位置，會(huì)隨著頁面滾動(dòng)變化，因此表示位置的四個(gè)屬性值，都不是固定不變的。如果想得到絕對(duì)位置，可以將left屬性加上window.scrollX，top屬性加上window.scrollY。

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

Element.getClientRects()

Element.getClientRects方法返回一個(gè)類似數(shù)組的對(duì)象，里面是當(dāng)前元素在頁面上形成的所有矩形。每個(gè)矩形都有bottom、height、left、right、top和width六個(gè)屬性，表示它們相對(duì)于視口的四個(gè)坐標(biāo)，以及本身的高度和寬度。

對(duì)于盒狀元素（比如<div>和<p>），該方法返回的對(duì)象中只有該元素一個(gè)成員。對(duì)于行內(nèi)元素（比如span、a、em），該方法返回的對(duì)象有多少個(gè)成員，取決于該元素在頁面上占據(jù)多少行。這是它和Element.getBoundingClientRect()方法的主要區(qū)別，對(duì)于行內(nèi)元素，后者總是返回一個(gè)矩形區(qū)域，前者可能返回多個(gè)矩形區(qū)域，所以方法名中的Rect用的是復(fù)數(shù)。

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

上面代碼是一個(gè)行內(nèi)元素<span>，如果它在頁面上占據(jù)三行，getClientRects方法返回的對(duì)象就有三個(gè)成員，如果它在頁面上占據(jù)一行，getClientRects方法返回的對(duì)象就只有一個(gè)成員。

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

這個(gè)方法主要用于判斷行內(nèi)元素是否換行，以及行內(nèi)元素的每一行的位置偏移。

Element.insertAdjacentHTML()

Element.insertAdjacentHTML方法解析HTML字符串，然后將生成的節(jié)點(diǎn)插入DOM樹的指定位置。

element.insertAdjacentHTML(position, text);

該方法接受兩個(gè)參數(shù)，第一個(gè)是指定位置，第二個(gè)是待解析的字符串。

指定位置共有四個(gè)。

• beforebegin：在當(dāng)前元素節(jié)點(diǎn)的前面。
• afterbegin：在當(dāng)前元素節(jié)點(diǎn)的里面，插在它的第一個(gè)子元素之前。
• beforeend：在當(dāng)前元素節(jié)點(diǎn)的里面，插在它的最后一個(gè)子元素之后。
• afterend：在當(dāng)前元素節(jié)點(diǎn)的后面?！?/li>

// 原來的HTML代碼：<div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// 現(xiàn)在的HTML代碼：
// <div id="one">one</div><div id="two">two</div>

該方法不是徹底置換現(xiàn)有的DOM結(jié)構(gòu)，這使得它的執(zhí)行速度比innerHTML操作快得多。

Element.remove()

Element.remove方法用于將當(dāng)前元素節(jié)點(diǎn)從DOM樹刪除。

var el = document.getElementById('div-01');
el.remove();

Element.focus()

Element.focus方法用于將當(dāng)前頁面的焦點(diǎn)，轉(zhuǎn)移到指定元素上。

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

• Craig Buckler，How to Translate from DOM to SVG Coordinates and Back Again