久艹在线视频,成人专区国产在线,99热超碰青娱乐在线

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

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

特征相關(guān)的屬性

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

Element.attributes

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

Element.id，Element.tagName

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

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

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

Element.innerHTML

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

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

el.innerHTML = '';

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

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

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

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

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

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

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

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

Element.outerHTML

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

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

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

outerHTML屬性是可讀寫的，對它進行賦值，等于替換掉當(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é)點的class屬性。它的值是一個字符串，每個class之間用空格分割。

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

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

上面這個div元素的節(jié)點對象的className屬性和classList屬性，分別如下。

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

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

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

classList對象有下列方法。

add()：增加一個class。
remove()：移除一個class。
contains()：檢查當(dāng)前元素是否包含某個class。
toggle()：將某個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); // 返回第一個Class
myDiv.classList.toString();

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

// 添加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方法可以接受一個布爾值，作為第二個參數(shù)。如果為true，則添加該屬性；如果為false，則去除該屬性。

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

// 等同于

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

盒狀模型相關(guān)屬性

Element.clientHeight，Element.clientWidth

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

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

var rootElement = document.documentElement;

// 沒有水平滾動條時
rootElement.clientHeight === window.innerHeight // true

// 沒有垂直滾動條時
rootElement.clientWidth === window.innerWidth // true

注意，這里不能用document.body.clientHeight或document.body.clientWidth，因為document.body返回<body>節(jié)點，與視口大小是無關(guān)的。

Element.clientLeft，Element.clientTop

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

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

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

Element.scrollHeight，Element.scrollWidth

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

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

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

document.documentElement.scrollHeight

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

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

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

如果滾動條沒有滾動到內(nèi)容底部，上面的表達式為false。這個特性結(jié)合onscroll事件，可以判斷用戶是否滾動到了指定元素的底部，比如向用戶展示某個內(nèi)容區(qū)塊時，判斷用戶是否滾動到了區(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)頁元素的水平滾動條向右側(cè)滾動的像素數(shù)量，Element.scrollTop屬性表示網(wǎng)頁元素的垂直滾動條向下滾動的像素數(shù)量。對于那些沒有滾動條的網(wǎng)頁元素，這兩個屬性總是等于0。

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

document.documentElement.scrollLeft
document.documentElement.scrollTop

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

Element.offsetHeight，Element.offsetWidth

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

這兩個屬性值包括Padding和Border、以及滾動條。這也意味著，如果不存在內(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)前元素左上角相對于Element.offsetParent節(jié)點的水平位移，Element.offsetTop返回垂直位移，單位為像素。通常，這兩個值是指相對于父節(jié)點的位移。

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

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

每個元素節(jié)點都有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>上取值會更保險一點。

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

// 視口高度
window.innerHeight // 包括滾動條
document.documentElement.clientHeight // 不包括滾動條

// 視口寬度
window.innerWidth // 包括滾動條
document.documentElement.clientWidth // 不包括滾動條

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

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

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

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

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

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

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

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

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

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

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

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

屬性相關(guān)的方法

元素節(jié)點提供以下四個方法，用來操作HTML標簽的屬性。

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

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

查找相關(guān)的方法

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

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

上面四個方法只返回Element子節(jié)點，因此可以采用鏈式寫法。

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

Element.querySelector()

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

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

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

需要注意的是，瀏覽器執(zhí)行querySelector方法時，是先在全局范圍內(nèi)搜索給定的CSS選擇器，然后過濾出哪些屬于當(dāng)前元素的子元素。因此，會有一些違反直覺的結(jié)果，請看下面的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選擇器作為參數(shù)，返回一個NodeList對象，包含所有匹配的子元素。

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

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

Element.getElementsByClassName()

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

element.getElementsByClassName('red test');

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

Element.getElementsByTagName()

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

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

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

Element.closest()

Element.closest方法返回當(dāng)前元素節(jié)點的最接近的父元素（或者當(dāng)前節(jié)點本身），條件是必須匹配給定的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é)點的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é)點也考慮在內(nèi)，所以第二個closet方法返回div-03。

Element.matches()

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

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

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

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]'
)

事件相關(guān)的方法

以下三個方法與Element節(jié)點的事件相關(guān)。這些方法都繼承自EventTarget接口，詳見本章的《Event對象》一節(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)前元素，進入瀏覽器的可見區(qū)域，類似于設(shè)置window.location.hash的效果。

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

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

Element.getBoundingClientRect()

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

var rect = obj.getBoundingClientRect();

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

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

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

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

Element.getClientRects()

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

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

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

上面代碼是一個行內(nèi)元素<span>，如果它在頁面上占據(jù)三行，getClientRects方法返回的對象就有三個成員，如果它在頁面上占據(jù)一行，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

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

Element.insertAdjacentHTML()

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

element.insertAdjacentHTML(position, text);

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

指定位置共有四個。

beforebegin：在當(dāng)前元素節(jié)點的前面。
afterbegin：在當(dāng)前元素節(jié)點的里面，插在它的第一個子元素之前。
beforeend：在當(dāng)前元素節(jié)點的里面，插在它的最后一個子元素之后。
afterend：在當(dāng)前元素節(jié)點的后面。

// 原來的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é)點從DOM樹刪除。

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

Element.focus()

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

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

參考鏈接

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Element對象

特征相關(guān)的屬性

Element.attributes

Element.id，Element.tagName

Element.innerHTML

Element.outerHTML

Element.className，Element.classList

盒狀模型相關(guān)屬性

Element.clientHeight，Element.clientWidth

Element.clientLeft，Element.clientTop

Element.scrollHeight，Element.scrollWidth

Element.scrollLeft，Element.scrollTop

Element.offsetHeight，Element.offsetWidth

Element.offsetLeft，Element.offsetTop

Element.style

總結(jié)

相關(guān)節(jié)點的屬性

Element.children，Element.childElementCount

Element.firstElementChild，Element.lastElementChild

Element.nextElementSibling，Element.previousElementSibling

Element.offsetParent