Javascript中DOM常見API

前言：盡管現(xiàn)在有很多優(yōu)秀的框架，大大簡化了我們的DOM操作，但是我們?nèi)匀灰獙W(xué)好DOM知識(shí)來寫原生JS炫欺，從根本上去理解，才更能在解決問題時(shí)舉重若輕画切。

一竣稽、什么是DOM

D（document）O（object）M（model） 文檔對(duì)象模型。

DOM（文檔對(duì)象模型）是HTML和XML文檔的編程接口霍弹。它提供了對(duì)文檔的結(jié)構(gòu)化的表述毫别，并定義一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪問，從而改變文檔的結(jié)構(gòu)典格、樣式和內(nèi)容岛宦。DOM將文檔解析為一個(gè)由節(jié)點(diǎn)和對(duì)象（包含屬性和方法的對(duì)象）組成的結(jié)構(gòu)集合。

上述說法是MDN的解釋耍缴，太官方砾肺，我們來換種說法來解釋。

DOM就是一種想象的樹形結(jié)構(gòu)防嗡，它的作用是將網(wǎng)頁轉(zhuǎn)為一個(gè) JavaScript 對(duì)象变汪，從而可以用腳本進(jìn)行各種操作（比如增刪內(nèi)容）。

image

如上圖蚁趁，是我們文檔的樹形結(jié)構(gòu)裙盾，我們通過DOM模型將上述結(jié)構(gòu)一一映射成節(jié)點(diǎn)（通過構(gòu)造函數(shù)把頁面中的節(jié)點(diǎn)變成實(shí)例對(duì)象，dom就是這樣把文檔變成對(duì)象的）他嫡，這些節(jié)點(diǎn)就又構(gòu)成了節(jié)點(diǎn)樹番官，也就是我們說的想象中的那棵DOM Tree。

二钢属、Node

DOM 的最小組成單位叫做節(jié)點(diǎn)（node）徘熔。文檔的樹形結(jié)構(gòu)（DOM 樹），就是由各種不同類型的節(jié)點(diǎn)組成淆党。

節(jié)點(diǎn)主要有7種類型：

  • Document：整個(gè)文檔樹的根節(jié)點(diǎn)
  • Document：doctype標(biāo)簽節(jié)點(diǎn)酷师，如<!DOCTYPE html>
  • Element：網(wǎng)頁的各種Html標(biāo)簽讶凉，比如<body><div>等
  • Attribute：網(wǎng)頁元素的屬性
  • Text：標(biāo)簽之間或者標(biāo)簽包含的文本
  • Comment：注釋
  • DocunmentFragment：文檔的片段

所以文檔樹對(duì)應(yīng)的節(jié)點(diǎn)樹如同下圖：

image

注：DOM樹有3種層級(jí)結(jié)構(gòu)：

  • 父節(jié)點(diǎn)關(guān)系（parentNode）：直接的上級(jí)節(jié)點(diǎn)
  • 子節(jié)點(diǎn)關(guān)系(childNodes)：直接的下級(jí)節(jié)點(diǎn)
  • 兄弟關(guān)系(sibling)：擁有同一個(gè)父節(jié)點(diǎn)的同級(jí)節(jié)點(diǎn)

值得注意的是，在上圖中只有根節(jié)點(diǎn)也就是<html>對(duì)應(yīng)的節(jié)點(diǎn)沒有父節(jié)點(diǎn)窒升。

三缀遍、Node接口

瀏覽器提供一個(gè)原生的節(jié)點(diǎn)對(duì)象Node，上面的7種節(jié)點(diǎn)均繼承了Node饱须，因此具有一些共同的屬性和方法域醇。這是DOM操作的基礎(chǔ)。

image

1蓉媳、屬性

1.1 Node.prototype.nodeType

nodeType屬性返回一個(gè)整數(shù)值譬挚，表示節(jié)點(diǎn)的類型。

image

如上圖酪呻，我們獲取當(dāng)前頁面的body標(biāo)簽下的第一個(gè)孩子减宣，是一個(gè)div標(biāo)簽，然后我們通過nodeType來看一下它的節(jié)點(diǎn)類型玩荠，結(jié)果返回了一個(gè)數(shù)字1漆腌，這代表著是一個(gè)Element節(jié)點(diǎn)。

【至于為什么會(huì)是返回一個(gè)數(shù)字而不是簡單明了的返回Element阶冈，這也是由于歷史原因闷尿，早期計(jì)算機(jī)內(nèi)存緊張，為了節(jié)省內(nèi)存使用了并無規(guī)律的數(shù)字】

常見的有以下：

Node.ELEMENT_NODE：1

Node.ATTRIBUTE_NODE：2

Node.TEXT_NODE：3

Node.COMMENT_NODE：8

Node.DOCUMENT_NODE：9

Node.DOCUMENT_TYPE_NODE：10

Node.DOCUMENT_FRAGMENT_NODE：11

1.2 Node.prototype.nodeName

nodeName屬性返回節(jié)點(diǎn)名稱

image

注：在元素節(jié)點(diǎn)中女坑，返回名稱基本都是大寫填具，只有<svg>標(biāo)簽返回的是小寫。

1.3 Node.prototype.nodeValue

nodeValue屬性返回一個(gè)字符串匆骗，表示當(dāng)前節(jié)點(diǎn)本身的文本值劳景，該屬性可讀寫。

只有文本節(jié)點(diǎn)（text）碉就、注釋節(jié)點(diǎn)（comment）和屬性節(jié)點(diǎn)（attr）有文本值盟广，因此這三類節(jié)點(diǎn)的nodeValue可以返回結(jié)果，其他類型的節(jié)點(diǎn)一律返回null瓮钥。

// html 代碼如下
// <div id="d1">hello world</div>
var div = document.getElementById('d1');
div.nodeValue // null
div.firstChild.nodeValue //"hello world"

1.4 Node.prototype.textContent

textContent返回節(jié)點(diǎn)及后代節(jié)點(diǎn)的文本 筋量，即獲取文本

這里和innerText一起講：

早期并沒有獲取文本的API ，導(dǎo)致編碼很繁瑣骏庸，所以后來IE自己添加了一個(gè)API就是innerText，然后火狐和opera也推出了textContent

兩者的區(qū)別：

  • textContent會(huì)獲取所有元素的內(nèi)容年叮，包括<script>和<style>元素具被，然而innerText不會(huì)獲取這些內(nèi)容。
  • innerText可以意識(shí)到樣式只损，它不會(huì)返回樣式為display:none也就是隱藏的文本一姿，而textContent會(huì)七咧。
  • 由于innerText會(huì)意識(shí)到樣式，也就是會(huì)受樣式的影響叮叹，因此會(huì)觸發(fā)重排（reflow)導(dǎo)致性能低艾栋，而textContent不會(huì)。
  • 與textContent不同蛉顽， 在 Internet Explorer (對(duì)于小于等于 IE11 的版本) 中對(duì)innerText進(jìn)行修改蝗砾， 不僅會(huì)移除當(dāng)前元素的子節(jié)點(diǎn)，而且還會(huì)永久性地破壞所有后代文本節(jié)點(diǎn)（所以不可能將節(jié)點(diǎn)再次插入到任何其他元素或同一元素中).

1.5 Node.prototype.nextSibling

Node.nextSibling屬性返回緊跟在當(dāng)前節(jié)點(diǎn)后面的第一個(gè)同級(jí)節(jié)點(diǎn)携冤。如果當(dāng)前節(jié)點(diǎn)后面沒有同級(jí)節(jié)點(diǎn)悼粮，則返回null。

image

值得注意的是曾棕，該屬性還包括文本節(jié)點(diǎn)和注釋節(jié)點(diǎn)（``）扣猫。因此如果當(dāng)前節(jié)點(diǎn)后面有空格或者回車，該屬性會(huì)返回一個(gè)文本節(jié)點(diǎn)翘地，內(nèi)容為空格或回車申尤。

document.body.nextSibling返回了文本節(jié)點(diǎn)或者注釋節(jié)點(diǎn)，而我們需要獲得是元素節(jié)點(diǎn)衙耕， 也可以用document.prototype.nextElementSibling直接獲取該節(jié)點(diǎn)后面最接近的同級(jí)元素節(jié)點(diǎn)昧穿。

1.6 Node.prototype.previousSibling

previousSibling屬性返回當(dāng)前節(jié)點(diǎn)前面的、距離最近的一個(gè)同級(jí)節(jié)點(diǎn)臭杰。如果當(dāng)前節(jié)點(diǎn)前面沒有同級(jí)節(jié)點(diǎn)粤咪，則返回null。

Node.prototype.previousElementSibling 前一個(gè)同級(jí)元素節(jié)點(diǎn)

其他同1.5 一致

1.7 Node.prototype.firstChild渴杆，Node.prototype.firstElementChild

firstChild屬性返回當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)寥枝，如果當(dāng)前節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則返回null磁奖。
firstElementChild屬性返回當(dāng)前節(jié)點(diǎn)的第一個(gè)元素節(jié)點(diǎn)囊拜。

1.8 Node.prototype.lastChild，Node.prototype.lastElementChild

lastChild屬性返回當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)比搭，如果當(dāng)前節(jié)點(diǎn)沒有子節(jié)點(diǎn)冠跷，則返回null。
lastElementChild屬性返回當(dāng)前節(jié)點(diǎn)的最后一個(gè)元素節(jié)點(diǎn)身诺。

1.9 Node.prototype.childNodes

childNodes屬性返回一個(gè)類似數(shù)組的對(duì)象（NodeList集合）蜜托，成員包括當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)。

image

值得注意的是霉赡，除了元素節(jié)點(diǎn)橄务，childNodes屬性的返回值還包括文本節(jié)點(diǎn)和注釋節(jié)點(diǎn)。如果當(dāng)前節(jié)點(diǎn)不包括任何子節(jié)點(diǎn)穴亏，則返回一個(gè)空的NodeList集合蜂挪。由于NodeList對(duì)象是一個(gè)動(dòng)態(tài)集合重挑，一旦子節(jié)點(diǎn)發(fā)生變化，立刻會(huì)反映在返回結(jié)果之中棠涮。

1.10 Node.prototype.children

children屬性返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection）,成員包括當(dāng)前節(jié)點(diǎn)的所有子元素節(jié)點(diǎn)谬哀。

image

值得注意的是，這里就不會(huì)返回文本節(jié)點(diǎn)和注釋節(jié)點(diǎn)了严肪，它只會(huì)返回元素節(jié)點(diǎn)史煎。由于HTMLCollection集合是動(dòng)態(tài)集合，一旦子節(jié)點(diǎn)發(fā)生變化诬垂，立刻會(huì)反映在返回結(jié)果之中劲室。

小tips : Nodelist 和 HTMLCollection 集合的區(qū)別

  1. NodeList可以包含各種類型的節(jié)點(diǎn)，HTMLCollection只能包含 HTML 元素節(jié)點(diǎn).
  2. NodeList 實(shí)例可能是動(dòng)態(tài)集合结窘，也可能是靜態(tài)集合很洋。目前，只有Node.childNodes返回的是一個(gè)動(dòng)態(tài)集合隧枫，其他的NodeList 都是靜態(tài)集合喉磁。而HTMLCollection實(shí)例都是動(dòng)態(tài)集合，節(jié)點(diǎn)的變化會(huì)實(shí)時(shí)反映在集合中.
  3. 與NodeList接口不同官脓，HTMLCollection沒有forEach方法协怒，只能使用for循環(huán)遍歷。

2卑笨、方法

2.1 Node.prototype.appendChild()

appendChild方法就是接受一個(gè)節(jié)點(diǎn)對(duì)象作為參數(shù)孕暇，將其作為最后一個(gè)子節(jié)點(diǎn)，插入到當(dāng)前節(jié)點(diǎn) 赤兴。該方法的返回值就是插入的子節(jié)點(diǎn)妖滔。

注意：

1、如果參數(shù)節(jié)點(diǎn)是 DOM 已經(jīng)存在的節(jié)點(diǎn)桶良，appendChild方法會(huì)將其從原來的位置移動(dòng)到新位置座舍。

2、如果appendChild方法的參數(shù)是DocumentFragment節(jié)點(diǎn)陨帆，那么插入的是DocumentFragment的所有子節(jié)點(diǎn)曲秉，而不是DocumentFragment節(jié)點(diǎn)本身。返回值是一個(gè)空的DocumentFragment .

2.2 Node.prototype.hasChildNodes()

hasChildNodes方法返回一個(gè)布爾值疲牵，表示當(dāng)前節(jié)點(diǎn)是否有子節(jié)點(diǎn)承二。

注意：子節(jié)點(diǎn)包括所有類型的節(jié)點(diǎn)，并不僅僅是元素節(jié)點(diǎn)纲爸。哪怕節(jié)點(diǎn)只包含一個(gè)空格亥鸠，hasChildNodes方法也會(huì)返回true

判斷一個(gè)節(jié)點(diǎn)是否有子節(jié)點(diǎn)，有以下3種方法：

1缩焦、node.hasChildNodes()

2读虏、node.firstChild ! == null

3、node.childNodes && node.childNodes.length > 0

2.3 Node.prototype.cloneNode()

cloneNode方法拷貝一個(gè)節(jié)點(diǎn)袁滥，并且可以接受一個(gè)布爾值盖桥，來表示是否同時(shí)拷貝子節(jié)點(diǎn)。它的返回值是一個(gè)克隆出來的新節(jié)點(diǎn)题翻。

image
image

深拷貝：深入進(jìn)去全部拷貝揩徊，包括子節(jié)點(diǎn)。

淺拷貝：只拷貝節(jié)點(diǎn)本身嵌赠。

值得注意的是塑荒，該方法返回的節(jié)點(diǎn)不在文檔中，無任何父節(jié)點(diǎn)姜挺，必須用如appendChild()等方法添加齿税。

2.4 Node.prototype.insertBefore()

insertBefore方法用于將某個(gè)節(jié)點(diǎn)插入父節(jié)點(diǎn)內(nèi)部的指定位置。

insertBefore方法接受兩個(gè)參數(shù)炊豪，第一個(gè)參數(shù)是所要插入的節(jié)點(diǎn)newNode凌箕，第二個(gè)參數(shù)時(shí)父節(jié)點(diǎn)parentNode內(nèi)部的一個(gè)子節(jié)點(diǎn)referenceNode。newNode將插在referenceNode這個(gè)子節(jié)點(diǎn)的前面词渤。返回值是插入的新節(jié)點(diǎn)newNode.

2.5 Node.prototype.removeChild()

removeChild方法接受一個(gè)子節(jié)點(diǎn)作為參數(shù)牵舱，用于從當(dāng)前節(jié)點(diǎn)移除該子節(jié)點(diǎn)。返回值是移除的子節(jié)點(diǎn)缺虐。

值得注意的是芜壁，被移除的節(jié)點(diǎn)依然存在于內(nèi)存之中，但不再是DOM的一部分高氮。所以慧妄，一個(gè)節(jié)點(diǎn)移除以后，依然可以使用它纫溃，比如插入到另一個(gè)節(jié)點(diǎn)下面腰涧。

如果參數(shù)節(jié)點(diǎn)不是當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)，removeChild方法將報(bào)錯(cuò)紊浩。

2.6 Node.prototype.replaceChild()

replaceChild方法用于將一個(gè)新的節(jié)點(diǎn)窖铡，替換當(dāng)前節(jié)點(diǎn)的某一個(gè)子節(jié)點(diǎn)。

創(chuàng)造一個(gè)新兒子取代掉舊兒子坊谁，舊兒子去哪兒了费彼？舊兒子去內(nèi)存了。

2.7 Node.prototype.contains()

contains方法返回一個(gè)布爾值口芍，表示參數(shù)節(jié)點(diǎn)是否為該節(jié)點(diǎn)的后代節(jié)點(diǎn)箍铲。

2.8 Node.prototype.isEqualNode(),Node.prototype.isSameNode()

isEqualNode方法返回一個(gè)布爾值，用于檢查兩個(gè)節(jié)點(diǎn)是否相等鬓椭。所謂相等的節(jié)點(diǎn)颠猴，指的是兩個(gè)節(jié)點(diǎn)的類型相同关划、屬性相同悄蕾、子節(jié)點(diǎn)相同片任。
isSameNode方法返回一個(gè)布爾值，表示兩個(gè)節(jié)點(diǎn)是否為同一個(gè)節(jié)點(diǎn)拳亿。

image

所以說资盅，isSameNode就等同于 ===嚴(yán)格相等運(yùn)算符调榄。

2.9 Node.prototype.normalize()

normailize方法用于清理當(dāng)前節(jié)點(diǎn)內(nèi)部的所有文本節(jié)點(diǎn)（text）。它會(huì)去除空的文本節(jié)點(diǎn)呵扛，并且將毗鄰的文本節(jié)點(diǎn)合并成一個(gè)每庆，也就是說不存在空的文本節(jié)點(diǎn)，以及毗鄰的文本節(jié)點(diǎn)

四今穿、Document接口

document節(jié)點(diǎn)對(duì)象代表整個(gè)文檔缤灵，每張網(wǎng)頁都有自己的document對(duì)象。window.document屬性就指向這個(gè)對(duì)象蓝晒。只要瀏覽器開始載入 HTML 文檔凤价，該對(duì)象就存在了，可以直接使用拔创。

document對(duì)象有不同的辦法可以獲取利诺。

1、屬性

1.1 用于指向其他節(jié)點(diǎn)(快捷獲取某些特殊節(jié)點(diǎn))的屬性

  • document.doctype 指向<DOCTYPE>節(jié)點(diǎn)剩燥，即文檔類型節(jié)點(diǎn)慢逾。
  • document.documentElement指向 DOM 的 html節(jié)點(diǎn)
  • document.activeElement指向獲得焦點(diǎn)的那個(gè)節(jié)點(diǎn)
  • document.fullscreenElement返回當(dāng)前以全屏狀態(tài)展示的 DOM 元素。
  • document.body指向<body>節(jié)點(diǎn)
  • document.head指向<head>節(jié)點(diǎn)灭红。
  • document.scrollingElement返回文檔的滾動(dòng)元素侣滩。
  • ……

1.2 返回文檔特定元素的偽數(shù)組集合的屬性

  • document.links屬性返回當(dāng)前文檔所有設(shè)定了href屬性的<a>及<area>節(jié)點(diǎn)。
  • document.forms屬性返回所有<form>表單節(jié)點(diǎn)变擒。
  • document.images屬性返回頁面所有<img>圖片節(jié)點(diǎn)君珠。
  • document.scripts屬性返回所有<script>節(jié)點(diǎn)。
  • document.styleSheets屬性返回文檔內(nèi)嵌或引入的樣式表集合
  • ……

以上均為動(dòng)態(tài)集合娇斑，而且除了document.styleSheets策添，以上的集合屬性返回的都是HTMLCollection實(shí)例。

1.3 返回文檔信息的屬性

  • document.documentURI和document.URL屬性都返回一個(gè)字符串毫缆，表示當(dāng)前文檔的網(wǎng)址唯竹。
  • document.domain屬性返回當(dāng)前文檔的域名，不包含協(xié)議和接口苦丁。
  • document.Location對(duì)象是瀏覽器提供的原生對(duì)象浸颓，提供 URL 相關(guān)的信息和操作方法。
  • document.title屬性返回當(dāng)前文檔的標(biāo)題。
  • document.characterSet屬性返回當(dāng)前文檔的編碼产上，比如UTF-8
  • document.referrer屬性返回一個(gè)字符串棵磷，表示當(dāng)前文檔的訪問者來自哪里.
  • ……

1.4 返回文檔狀態(tài)的屬性

  • document.hidden屬性返回一個(gè)布爾值，表示當(dāng)前頁面是否可見晋涣。
  • document.visibilityState返回文檔的可見狀態(tài)泽本。
  • ……

2、方法

  • document.open方法清除當(dāng)前文檔所有內(nèi)容姻僧，使得文檔處于可寫狀態(tài)，供document.write方法寫入內(nèi)容蒲牧。
  • document.close方法用來關(guān)閉document.open()打開的文檔撇贺。
  • document.write方法用于向當(dāng)前文檔寫入內(nèi)容。
  • document.writeln方法與write方法完全一致冰抢，除了會(huì)在輸出內(nèi)容的尾部添加換行符松嘶。
  • document.querySelector接受一個(gè) CSS 選擇器作為參數(shù)，返回匹配該選擇器的元素節(jié)點(diǎn)
  • document.querySelectorAll方法與querySelector用法類似挎扰，區(qū)別是返回一個(gè)NodeList對(duì)象翠订，包含所有匹配給定選擇器的節(jié)點(diǎn)。
  • document.getElementsByTagName搜索 HTML 標(biāo)簽名遵倦，返回符合條件的元素尽超。
  • document.getElementsByClassName 返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection實(shí)例），包括了所有class名字符合指定條件的元素梧躺，元素的變化實(shí)時(shí)反映在返回結(jié)果中似谁。
  • document.getElementsByName方法用于選擇擁有name屬性的 HTML 元素，返回一個(gè)類似數(shù)組的的對(duì)象（NodeList實(shí)例）.
  • document.getElementById方法返回匹配指定id屬性的元素節(jié)點(diǎn)
  • document.createElement方法用來生成元素節(jié)點(diǎn)掠哥，并返回該節(jié)點(diǎn)巩踏。
  • document.createTextNode方法用來生成文本節(jié)點(diǎn)（Text實(shí)例）
  • document.createDocumentFragment方法生成一個(gè)空的文檔片段對(duì)象（DocumentFragment實(shí)例）。
  • document.hasFocus方法返回一個(gè)布爾值续搀，表示當(dāng)前文檔之中是否有元素被激活或獲得焦點(diǎn)塞琼。
  • ……

五、Element接口

1禁舷、屬性

  • Element.id屬性返回指定元素的id屬性彪杉，該屬性可讀寫。
  • Element.tagName屬性返回指定元素的大寫標(biāo)簽名
  • Element.title屬性用來讀寫當(dāng)前元素的 HTML 屬性title
  • Element.attributes屬性返回一個(gè)類似數(shù)組的對(duì)象牵咙，成員是當(dāng)前元素節(jié)點(diǎn)的所有屬性節(jié)點(diǎn)
  • Element.className屬性用來讀寫當(dāng)前元素節(jié)點(diǎn)的class屬性在讶。
  • Element.classList返回一個(gè)偽數(shù)組，成員是當(dāng)前元素節(jié)點(diǎn)的每個(gè)class霜大。
  • Element.innerHTML屬性返回一個(gè)字符串构哺，等同于該元素包含的所有 HTML 代碼。
  • Element.clientHeight屬性返回一個(gè)整數(shù)值，表示元素節(jié)點(diǎn)的 CSS 高度
  • Element.clientWidth屬性返回元素節(jié)點(diǎn)的 CSS 寬度曙强，同樣只對(duì)塊級(jí)元素
  • Element.scrollHeight屬性返回一個(gè)整數(shù)值（小數(shù)會(huì)四舍五入）残拐，表示當(dāng)前元素的總高度（單位像素），包括溢出容器碟嘴、當(dāng)前不可見的部分溪食。
  • Element.scrollWidth屬性表示當(dāng)前元素的總寬度（單位像素），其他地方都與scrollHeight屬性類似娜扇。
  • Element.children屬性返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection實(shí)例）错沃，包括當(dāng)前元素節(jié)點(diǎn)的所有子元素。
  • Element.childElementCount屬性返回當(dāng)前元素節(jié)點(diǎn)包含的子元素節(jié)點(diǎn)的個(gè)數(shù)雀瓢，與Element.children.length的值相同枢析。
  • ……

2、方法

  • getAttribute()讀取某個(gè)屬性的值
  • getAttributeNames()返回當(dāng)前元素的所有屬性名
  • setAttribute()寫入屬性值
  • hasAttribute()某個(gè)屬性是否存在
  • hasAttributes()當(dāng)前元素是否有屬性
  • removeAttribute()刪除屬性
  • Element.querySelector接受 CSS 選擇器作為參數(shù)刃麸，返回父元素的第一個(gè)匹配的子元素醒叁。
  • Element.querySelectorAll接受 CSS 選擇器作為參數(shù)，返回一個(gè)NodeList實(shí)例泊业，包含所有匹配的子元素把沼。
  • Element.remove方法繼承自 ChildNode 接口，用于將當(dāng)前元素節(jié)點(diǎn)從它的父節(jié)點(diǎn)移除吁伺。
  • Element.getBoundingClientRect方法返回一個(gè)對(duì)象饮睬，提供當(dāng)前元素節(jié)點(diǎn)的大小、位置等信息篮奄，基本上就是 CSS 盒狀模型的所有信息
  • Element.addEventListener()：添加事件的回調(diào)函數(shù)
  • Element.removeEventListener()：移除事件監(jiān)聽函數(shù)
  • Element.dispatchEvent()：觸發(fā)事件
  • ……
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末宦搬，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子间校，更是在濱河造成了極大的恐慌矾克，老刑警劉巖，帶你破解...
    沈念sama閱讀 206,214評(píng)論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件胁附，死亡現(xiàn)場(chǎng)離奇詭異滓彰，居然都是意外死亡控妻，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評(píng)論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門揭绑，熙熙樓的掌柜王于貴愁眉苦臉地迎上來郎哭，“玉大人菇存，你說我怎么就攤上這事『ブ粒” “怎么了贱迟？”我有些...
    開封第一講書人閱讀 152,543評(píng)論 0贊 341
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長茶敏。 經(jīng)常有香客問我蒸播，道長萍肆，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,221評(píng)論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任包雀，我火速辦了婚禮亲铡，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘赞草。我一直安慰自己吆鹤，他們只是感情好厨疙，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評(píng)論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布疑务。 她就那樣靜靜地躺著，像睡著了一般撒蟀。 火紅的嫁衣襯著肌膚如雪温鸽。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,007評(píng)論 1贊 284
  • 城市分裂傳說
    那天配椭，我揣著相機(jī)與錄音，去河邊找鬼衡楞。 笑死敦姻，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的镰惦。 我是一名探鬼主播旺入，決...
    沈念sama閱讀 38,313評(píng)論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼礼华！你這毒婦竟也來了拗秘？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 36,956評(píng)論 0贊 259
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤扮匠，失蹤者是張志新（化名）和其女友劉穎凡涩，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體帮非，經(jīng)...
    沈念sama閱讀 43,441評(píng)論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡讹蘑，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評(píng)論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年座慰，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片版仔。...
    茶點(diǎn)故事閱讀 38,018評(píng)論 1贊 333
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖谜慌，靈堂內(nèi)的尸體忽然破棺而出莺奔，到底是詐尸還是另有隱情，我是刑警寧澤令哟，帶...
    沈念sama閱讀 33,685評(píng)論 4贊 322
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布屏富，位于F島的核電站，受9級(jí)特大地震影響噩死，放射性物質(zhì)發(fā)生泄漏神年。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評(píng)論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一衣摩、第九天 我趴在偏房一處隱蔽的房頂上張望捂敌。 院中可真熱鬧既琴，春花似錦、人聲如沸逆济。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評(píng)論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽简僧。三九已至雕欺，卻和暖如春棉姐，著一層夾襖步出監(jiān)牢的瞬間啦逆，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評(píng)論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來泰國打工乃坤， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留盲镶，地道東北人溉贿。 一個(gè)月前我還...
    沈念sama閱讀 45,467評(píng)論 2贊 352
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像宇色，于是被迫代替她去往敵國和親宣蠕。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評(píng)論 2贊 345

推薦閱讀更多精彩內(nèi)容

  • ??DOM（文檔對(duì)象模型）是針對(duì) HTML 和 XML 文檔的一個(gè) API（應(yīng)用程序編程接口）。 ??DOM 描繪...
    霜天曉閱讀 3,615評(píng)論 0贊 7
  • 收集于網(wǎng)絡(luò)坞古，特此整理劫樟。 多看看API，總是沒壞處~ 一奶陈、節(jié)點(diǎn) 1.1 節(jié)點(diǎn)屬性 Node.nodeName //...
    前端程序猿阿旭閱讀 5,355評(píng)論 1贊 1
  • 第3章 基本概念 3.1 語法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型：Unde...
    RickCole閱讀 5,096評(píng)論 0贊 21
  • 原文 https://www.kancloud.cn/dennis/tgjavascript/241852 一吃粒、節(jié)...
    LuckyS007閱讀 841評(píng)論 0贊 0
  • API集錦翅睛，需要用時(shí)查閱用。 一疏旨、節(jié)點(diǎn)1.1 節(jié)點(diǎn)屬性 Node.nodeName //返回節(jié)點(diǎn)名稱，只讀Node...
    littleyu閱讀 2,676評(píng)論 0贊 8