DOM模型（二）—— Document節(jié)點

一膛堤、概述

document節(jié)點是整個文檔樹的頂層節(jié)點漓拾，每張網(wǎng)頁都有自己的document節(jié)點。
window.document屬性就指向這個節(jié)點虑润。只要瀏覽器開始載入HTML文檔成玫，這個節(jié)點對象就存在了，可以直接調(diào)用。

document節(jié)點有不同的辦法可以獲取哭当。

  • 對于正常的網(wǎng)頁猪腕，直接使用document或window.document
  • 對于iframe載入的網(wǎng)頁，使用iframe節(jié)點的contentDocument屬性钦勘。
  • 對于Ajax操作返回的文檔陋葡，使用XMLHttpRequest對象的responseXML屬性。
  • 對于已知包含某個節(jié)點的文檔彻采，使用該節(jié)點的ownerDocument屬性腐缤。

上面得到的四種document節(jié)點，都部署了Document接口肛响，因此有共同的屬性和方法岭粤。當然，各自也有一些自己獨特的屬性和方法特笋，比如HTML和XML文檔的document節(jié)點就不一樣剃浇。

二、指向文檔內(nèi)部節(jié)點的屬性

document節(jié)點有很多屬性猎物，其中相當一部分屬于快捷方式虎囚，指向文檔內(nèi)部的某個節(jié)點。

2.1霸奕、document.doctype溜宽、document.documentElement、document.defaultView

對于HTML文檔來說质帅，document對象一般有兩個子節(jié)點适揉。第一個子節(jié)點是document.doctype，它是一個對象煤惩，包含了當前文檔類型（Document Type Declaration嫉嘀，簡寫DTD）信息。對于HTML5文檔魄揉，該節(jié)點就代表<!DOCTYPE html>剪侮。如果網(wǎng)頁沒有聲明DTD，該屬性返回null洛退。

var doctype = document.doctype;
doctype  //<!DOCTYPE html>
doctype.name  //"html"

document.firstChild通常就返回這個節(jié)點瓣俯。

document.documentElement屬性返回當前文檔的根節(jié)點（root）。它通常是document節(jié)點的第二個子節(jié)點兵怯，緊跟在document.doctype節(jié)點后面彩匕。對于HTML網(wǎng)頁，該屬性返回<html>節(jié)點媒区。

document.defaultView屬性驼仪，在瀏覽器中返回document對象所在的window對象掸犬，否則返回null。

document.defaultView === window // true
驗證

2.2绪爸、document.body湾碎、document.head

document.head屬性返回當前文檔的<head>節(jié)點，document.body屬性返回當前文檔的<body>節(jié)點奠货。

document.head === document.querySelector('head')  //true
document.body === document.querySelector('body')  //true

這兩個屬性總是存在的介褥，如果網(wǎng)頁源碼里面省略了<head>或<body>，瀏覽器會自動創(chuàng)造仇味。另外呻顽，這兩個屬性是可寫的，如果對其寫入一個新的節(jié)點丹墨，會導致原有的所有子節(jié)點被移除廊遍。

2.3、document.activeElement

document.activeElement屬性返回當前文檔中獲得焦點的那個元素贩挣。用戶通澈砬埃可以使用Tab鍵移動焦點，使用空格鍵激活焦點王财。比如卵迂，如果焦點在一個鏈接上，此時按下一個空格鍵绒净，就會跳轉(zhuǎn)到該鏈接见咒。

三、返回特定節(jié)點集合的屬性

以下屬性返回文檔內(nèi)部特定元素的集合挂疆，都是類似數(shù)組的對象改览。這些集合都是動態(tài)的，原節(jié)點有任何變化缤言，立刻會反映在集合中宝当。

3.1、document.links胆萧、document.forms庆揩、document.images、document.embeds

document.links屬性返回當前文檔所有設定了href屬性的a及area元素跌穗。

document.forms屬性返回頁面中所有表單元素的form订晌。

var selectForm = document.forms[0];

上面代碼獲取文檔第一個表單。

document.images屬性返回頁面所有圖片元素（即img標簽）蚌吸。

var imglist = document.images;
for(var i=0;i<imglist.length;i++){
    if(imglist[i].src === 'banner.gif'){
        //...
    }
}

上面代碼在所有img標簽中锈拨，尋找特定圖片。

document.embeds屬性返回網(wǎng)頁中所有嵌入對象套利，即embed標簽推励。

以上四個屬性返回的都是HTMLCollection對象實例。

驗證

由于HTMLCollection對象的實例可以用HTML元素的id或name屬性引用肉迫，因此如果一個元素有id或name屬性验辞，就可以在上面這四個屬性上引用。

//HTML代碼
<form name="myForm">

//JS
document.myForm === document.forms.myForm  //true

3.2喊衫、document.scripts跌造、document.styleSheets

document.scripts屬性返回當前文檔的所有腳本（即script標簽）。

var scripts = document.scripts;
if(scripts.length !== 0){
    console.log('當前網(wǎng)頁有腳本');
}

document.scripts屬性返回的也是HTMLCollection對象的實例族购。
因此壳贪，如果一個script標簽有id或name屬性，就可以在document.scripts上引用寝杖。

document.styleSheets屬性返回一個類似數(shù)組的對象违施，代表當前網(wǎng)頁的所有樣式表。每個樣式表對象都有cssRules屬性瑟幕，返回該樣式表的所有CSS規(guī)則磕蒲，這樣就可以操作具體的CSS規(guī)則了。

四只盹、返回文檔信息的屬性

以下屬性返回文檔信息辣往。

4.1、document.documentURI殖卑，document.URL

document.documentURI屬性和document.URL屬性都返回一個字符串站削，表示當前文檔的網(wǎng)址。不同之處是documentURI屬性是所有文檔都具備的孵稽，URL屬性則是HTML文檔獨有的许起。

document.documentURI === document.URL
// true

另外，如果文檔的錨點（#anchor）變化肛冶，這兩個屬性都不會跟著變化街氢，它們的值是靜態(tài)的。但是睦袖，document.location會跟著變化珊肃，document.location總是返回最新的URL，會跟蹤錨點的變化馅笙。

4.2伦乔、document.domain

document.domain屬性返回當前文檔的域名。比如董习，某張網(wǎng)頁的網(wǎng)址是 http://www.example.com/hello.html 烈和，domain屬性就等于www.example.com。如果無法獲取域名皿淋，該屬性返回null招刹。

var badDomain = 'www.example.xxx';
if (document.domain === badDomain)
  window.close();

上面代碼判斷恬试，如果當前域名等于指定域名，則關(guān)閉窗口疯暑。

二級域名的情況下训柴，domain屬性可以設置為對應的一級域名。比如妇拯，當前域名是sub.example.com幻馁，則domain屬性可以設置為example.com。除此之外的寫入越锈，都是不可以的仗嗦。

4.3、document.lastModified

document.lastModified屬性返回當前文檔最后修改的時間戳甘凭，格式為字符串稀拐。

document.lastModified
// Tuesday, July 10, 2001 10:19:42

注意，lastModified屬性的值是是字符串对蒲，所以不能用來直接比較钩蚊，兩個文檔誰的日期更新，需要用Date.parse方法轉(zhuǎn)成時間戳格式蹈矮，才能進行比較砰逻。

4.4、document.location

document.location屬性返回location對象泛鸟，提供了當前文檔的URL信息蝠咆。

// 當前網(wǎng)址為 http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"
document.location.host // "www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/path/a.html"
document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document.location.password // "passed"

location對象有以下方法。

location.assign()
location.reload()
location.toString()

// 跳轉(zhuǎn)到另一個網(wǎng)址
document.location.assign('http://www.google.com')
// 優(yōu)先從服務器重新加載
document.location.reload(true)
// 優(yōu)先從本地緩存重新加載（默認值）
document.location.reload(false)
// 跳轉(zhuǎn)到新網(wǎng)址北滥，并將取代掉history對象中的當前記錄
document.location.replace('http://www.google.com');
// 將location對象轉(zhuǎn)為字符串刚操，等價于document.location.href
document.location.toString()

如果將新的網(wǎng)址賦值給location對象，網(wǎng)頁就會自動跳轉(zhuǎn)到新網(wǎng)址再芋。

document.location = 'http://www.example.com';
// 等同于
document.location.;

也可以指定相對URL菊霜。

document.location = 'page2.html';

如果指定的是錨點，瀏覽器會自動滾動到錨點處济赎。

document.location = '#top';

注意鉴逞，采用上面的方法重置URL，跟用戶點擊鏈接跳轉(zhuǎn)的效果是一樣的司训。上一個網(wǎng)頁依然將保存在瀏覽器歷史之中构捡，點擊“后退”按鈕就可以回到前一個網(wǎng)頁。

如果不希望用戶看到前一個網(wǎng)頁壳猜，可以使用location.replace方法勾徽，瀏覽器history對象就會用新的網(wǎng)址，取代當前網(wǎng)址统扳，這樣的話喘帚，“后退”按鈕就不會回到當前網(wǎng)頁了畅姊。它的一個應用就是，當腳本發(fā)現(xiàn)當前是移動設備時吹由，就立刻跳轉(zhuǎn)到移動版網(wǎng)頁涡匀。

document.location屬性與window.location屬性等價。

document.location === window.location // true

歷史上溉知，IE曾經(jīng)不允許對document.location賦值，為了保險起見腕够，建議優(yōu)先使用window.location级乍。如果只是單純地獲取當前網(wǎng)址，建議使用document.URL帚湘，語義性更好玫荣。

4.5、document.referrer大诸、document.title捅厂、document.characterSet

document.referrer屬性返回一個字符串，表示當前文檔的訪問來源资柔，如果是無法獲取來源或是用戶直接鍵入網(wǎng)址焙贷，而不是從其他網(wǎng)頁點擊，則返回一個空字符串贿堰。

document.referrer的值辙芍，總是與HTTP頭信息的Referer保持一致，但是它的拼寫有兩個r羹与。

document.title屬性返回當前文檔的標題故硅，該屬性是可寫的。

document.title = '新標題';

document.characterSet屬性返回渲染當前文檔的字符集纵搁，比如UTF-8吃衅、ISO-8859-1。

4.6腾誉、document.readyState

document.readyState屬性返回當前文檔的狀態(tài)徘层，共有三種可能的值。

loading：加載HTML代碼階段（尚未完成解析）
interactive：加載外部資源階段時
complete：加載完成時

這個屬性變化過程如下妄辩。

1惑灵、瀏覽器開始解析HTML文檔，document.readyState屬性等于loading眼耀。
2英支、瀏覽器遇到HTML文檔中的<script>元素，并且沒有async和defer屬性哮伟，就暫停解析干花，開始執(zhí)行腳本妄帘，這時document.readyState屬性還是loading。
3池凄、HTML文檔解析完成电媳，document.readyState屬性變成interactive独榴。
4、瀏覽器等待圖片、樣式表衰齐、字體文件等外部資源加載完成，一旦全部加載完成猿涨，document.readyState屬性變成complete蛔外。

4.7、document.designMode

document.designMode屬性控制當前文檔是否可編輯伟端，通常用在制作所見即所得編輯器杯道。打開iframe元素包含的文檔的designMode屬性，就能將其變?yōu)橐粋€所見即所得的編輯器责蝠。

4.8党巾、document.implementation

document.implementation屬性返回一個對象，用來甄別當前環(huán)境部署了哪些DOM相關(guān)接口霜医。implementation屬性的hasFeature方法齿拂，可以判斷當前環(huán)境是否部署了特定版本的特定接口。

document.implementation.hasFeature('HTML', '2.0')
// true

document.implementation.hasFeature('MutationEvents','2.0')
// true

上面代碼表示肴敛，當前環(huán)境部署了DOM HTML 2.0版和MutationEvents的2.0版创肥。

4.9、document.compatMode

document.compatMode屬性返回瀏覽器處理文檔的模式值朋，可能的值為BackCompat向后兼容模式和CSS1Compat（嚴格模式）叹侄。

一般來說，如果網(wǎng)頁代碼的第一行設置了明確的DOCTYPE（比如<!DOCTYPE html>）昨登，document.compatMode的值都為CSS1Compat趾代。

4.10、document.cookie

document.cookie屬性用來操作瀏覽器Cookie丰辣。

五撒强、讀寫相關(guān)的方法

5.1、document.open()笙什，document.close()

document.open方法用于新建一個文檔飘哨，供write方法寫入內(nèi)容。它實際上等于清除當前文檔琐凭，重新寫入內(nèi)容芽隆。不要將此方法與window.open()混淆，后者用來打開一個新窗口，與當前文檔無關(guān)胚吁。

document.close方法用于關(guān)閉open方法所新建的文檔牙躺。一旦關(guān)閉，write方法就無法寫入內(nèi)容了腕扶。如果再調(diào)用write方法孽拷，就等同于又調(diào)用open方法，新建一個文檔半抱，再寫入內(nèi)容脓恕。

5.2、document.write()窿侈，document.writeIn()

document.write方法用于向當前文檔寫入內(nèi)容进肯。只要當前文檔還沒有用close方法關(guān)閉，它所寫入的內(nèi)容就會追加在已有內(nèi)容的后面棉磨。

// 頁面顯示“helloworld”
document.open();
document.write('hello');
document.write('world');
document.close();

注意，document.write會當作HTML代碼解析学辱，不會轉(zhuǎn)義乘瓤。

document.write('<p>hello world</p>');

如果頁面已經(jīng)解析完成（DOMContentLoaded事件發(fā)生之后），再調(diào)用write方法策泣，它會先調(diào)用open方法衙傀，擦除當前文檔所有內(nèi)容，然后再寫入萨咕。

document.addEventListener('DOMContentLoaded', function (event) {
  document.write('<p>Hello World!</p>');
});

// 等同于

document.addEventListener('DOMContentLoaded', function (event) {
  document.open();
  document.write('<p>Hello World!</p>');
  document.close();
});

如果在頁面渲染過程中調(diào)用write方法统抬，并不會調(diào)用open方法。（可以理解成危队，open方法已調(diào)用聪建，但是close方法還未調(diào)用。）

<html>
<body>
hello
<script type="text/javascript">
  document.write("world")
</script>
</body>
</html>

在瀏覽器打開上面網(wǎng)頁茫陆，將會顯示hello world金麸。

document.write是JS語言標準化之前就存在的方法，現(xiàn)在完全有更符合標準的方法向文檔寫入內(nèi)容（比如對innerHTML屬性賦值）簿盅。所以挥下，除了某些特殊情況，應該盡量避免使用document.write這個方法桨醋。

document.writeIn方法與write方法完全一致棚瘟，除了會在輸出內(nèi)容的尾部添加換行符。

document.write(1);
document.write(2);
// 12

document.writeln(1);
document.writeln(2);
// 1
// 2
//

注意喜最，writeIn方法添加的是ASCII碼換行符偎蘸，渲染成HTML網(wǎng)頁時不起作用，即在網(wǎng)頁上顯示不出換行。

六禀苦、查找節(jié)點的方法

以下方法用來查找某個節(jié)點

6.1蔓肯、document.querySelector()，document.querySelectorAll()

document.querySelector方法接受一個CSS選擇器作為參數(shù)振乏，返回匹配該選擇器的元素節(jié)點蔗包。如果有多個節(jié)點滿足匹配條件，則返回第一個匹配的節(jié)點慧邮。如果沒有發(fā)現(xiàn)匹配的節(jié)點调限，則返回null。

var el1 = document.querySelector('.myclass');
var el1 = document.querySelector('#myclass > [ng-click]');

document.querySelectorAll方法與querySelector用法類似误澳，區(qū)別是返回一個NodeList對象耻矮，包含所有匹配給定選擇器的節(jié)點。

elementList = document.querySelectorAll('.myclass');

這兩個方法的參數(shù)忆谓，可以是逗號分隔的多個CSS選擇器裆装，返回能夠匹配其中的選擇器的所有元素節(jié)點。

var matches = document.querySelectorAll('div.note, div.alert');

上面代碼返回一個文檔中所有的class為"note"或者 "alert"的div元素倡缠。

驗證

這兩個方法都支持復雜的CSS選擇器哨免，但是，它們不支持CSS偽元素的選擇器和偽類的選擇器昙沦，即無法選中偽元素和偽類琢唾。

如果querySelectorAll方法的參數(shù)是字符串*，則會返回文檔中的所有HTML元素節(jié)點盾饮。另外采桃，querySelectorAll的返回結(jié)果不是動態(tài)集合，不會實時反映元素節(jié)點的變化丘损。

最后普办，這兩個方法除了定義在document對象上，還定義在元素節(jié)點上徘钥，即在元素節(jié)點上也可以調(diào)用泌豆。

6.2、document.getElementsByTagName()

document.getElementsByTagName方法返回所有指定HTML標簽的元素吏饿，返回值是一個類似數(shù)組的HTMLCollection對象踪危，可以實時反映HTML文檔的變化。如果沒有任何匹配的元素猪落，就返回一個空集贞远。

var paras = document.getElementsByTagName('p');
paras instanceof HTMLCollection  //true

上面代碼返回當前文檔的所有p元素節(jié)點。

驗證

HTML標簽名是大小寫不敏感的笨忌，因此getElementsByTagName方法也是大小寫不敏感的蓝仲。另外，返回結(jié)果中，各個成員的順序就是它們在文檔中出現(xiàn)的順序袱结。

如果傳入字符串*亮隙，就可以返回文檔中所有HTML元素。

var allElements = document.getElementsByTagName('*');

注意垢夹，HTML元素本身也定義了getElementsByTagName方法溢吻，返回該元素的后代元素中符合指定標簽的元素。也就是說果元，這個方法不僅可以在document對象上調(diào)用促王，也可以在任何元素節(jié)點上調(diào)用。

var firstPara = document.getElementsByTagName('p')[0];
var spans = firstPara.getElementsByTagName('span');

上面代碼選中第一個p元素內(nèi)部的所有span元素而晒。

6.3蝇狼、document.getElementsByClassName()

document.getElementsByClassName方法返回一個類似數(shù)組的對象（HTMLCollection實例對象），包括了所有class名字符合指定條件的元素倡怎，元素的變化實時反映在返回結(jié)果中迅耘。

var elements = document.getElementsByClassName(names);

由于class是保留字，所以JS一律使用className表示CSS的class监署。

如果參數(shù)是一個空格分隔的字符串颤专，元素的class必須符合所有字符串之中所有的class才會返回。

var elements = document.getElementsByClassName('foo bar');

上面代碼返回同時具有foo和bar兩個class的元素焦匈，foo和bar的順序不重要。

注意昵仅，正常模式下缓熟，CSS的class是大小寫敏感的。

與getElementsByTagName方法一樣摔笤，getElementsByClassName方法不僅可以在document對象上調(diào)用够滑，也可以在任何元素節(jié)點上調(diào)用。

6.4吕世、document.getElementsByName()

document.getElementsByName方法用于選擇擁有name屬性的HTML元素（比如<form>彰触、<radio>、<img>等）命辖，返回一個類似數(shù)組的對象（NodeList對象的實例）况毅，因為name屬性相同的元素可能不止一個。

// 表單為 <form name="x"></form>
var forms = document.getElementsByName('x');
forms[0].tagName // "FORM"

6.5尔艇、document.getElementById()

document.getElementById方法返回匹配指定id屬性的元素節(jié)點尔许。如果沒有發(fā)現(xiàn)匹配的節(jié)點，返回null终娃。

var elem = document.getElementById('para1');

注意：該方法的參數(shù)是大小寫敏感的味廊。比如，如果某個節(jié)點的id屬性是main，那么document.getElementById('Main')將返回null余佛，而不是那個節(jié)點柠新。

document.getElementById與document.querySelector方法都能獲取元素節(jié)點，不同之處是document.querySelector方法的參數(shù)使用CSS選擇器語法辉巡，document.getElementById方法的參數(shù)是HTML標簽元素的id屬性恨憎。

document.getElementById('myElement')
document.querySelector('#myElement')

上面代碼中，兩個方法都能選中id為myElement的元素红氯，但是getElementById()比querySelector()效率高很多框咙。

另外，這個方法只能在document對象上使用痢甘，不能在其他元素節(jié)點上使用喇嘱。

6.6、document.elementFromPoint()

document.elementFromPoint方法返回位于頁面指定位置最上層的Element子節(jié)點塞栅。

var element = document.elementFromPoint(50, 50);

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

elementFromPoint方法的兩個參數(shù)，依次是相對于當前視口左上角的橫坐標和縱坐標放椰，單位是像素作烟。如果位于該位置的HTML元素不可返回（比如文本框的滾動條），則返回它的父元素（比如文本框）砾医。如果坐標值無意義（比如負值或超過視口大心昧谩），則返回null如蚜。

七压恒、生成節(jié)點的方法

以下方法用于生成元素節(jié)點。

7.1错邦、document.createElement()

document.createElement方法用來生成HTML元素節(jié)點探赫。

var newDiv = document.createElement('div');

createElement方法的參數(shù)為元素的標簽名，即元素節(jié)點的tagName屬性撬呢，對HTML文檔大小寫不敏感伦吠。如果參數(shù)帶有尖括號或是null，會報錯魂拦。

document.createElement('<div>')
// DOMException: The tag name provided ('<div>') is not a valid name

7.2毛仪、document.createTextNode()

document.createTextNode方法用來生成文本節(jié)點，參數(shù)為所要生成的文本節(jié)點的內(nèi)容芯勘。

var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);

上面代碼新建一個div節(jié)點和一個文本節(jié)點潭千，然后將文本節(jié)點插入div節(jié)點。

這個方法可以確保返回的節(jié)點借尿，被瀏覽器當作文本渲染刨晴，而不是當作HTML代碼渲染屉来。因此，可以用來展示用戶的輸入狈癞，避免XSS攻擊茄靠。

var div = document.createElement('div');
div.appendChild(document.createTextNode('<span>Foo & bar</span>'));
console.log(div.innerHTML)
// <span>Foo & bar</span>

上面代碼中，createTextNode方法對大于號和小于號進行轉(zhuǎn)義蝶桶，從而保證即使用戶輸入的內(nèi)容包含惡意代碼慨绳，也能正確顯示。

需要注意的是真竖，該方法不對單引號和雙引號轉(zhuǎn)義脐雪，所以不能用來對HTML屬性賦值。

7.3恢共、document.createAttribute()

document.createAttribute方法生成一個新的屬性對象節(jié)點战秋，并返回它。

var attribute = document.createAttribute(name);

createAttribute方法的參數(shù)name讨韭，是屬性的名稱脂信。

var node = document.getElementById('div1');
var a = document.createAttribute('my_attrib');
a.value = 'newVal';
node.setAttributeNode(a);

//等同于
var node = document.getElementById('div1');
node.setAttribute('my_attrib', 'newVal');

7.4、document.createDocumentFragment()

document.createDocumentFragment方法生成一個DocumentFragment對象透硝。

var docFragment = document.createDocumentFragment();

DocumentFragment對象是一個存在于內(nèi)存的DOM片段狰闪，但是不屬于當前文檔，常常用來生成較復雜的DOM結(jié)構(gòu)濒生，然后插入當前文檔埋泵。這樣做的好處在于，因為DocumentFragment不屬于當前文檔罪治，對它的任何改動丽声，都不會引發(fā)網(wǎng)頁的重新渲染，比直接修改當前文檔的DOM有更好的性能表現(xiàn)规阀。

var docfrag = document.createDocumentFragment();

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

document.body.appendChild(docfrag);

八恒序、事件相關(guān)的方法

8.1瘦麸、document.createEvent()

document.createEvent方法生成一個事件對象谁撼，該對象可以被element.dispatchEvent方法使用，觸發(fā)指定事件滋饲。

var event = document.createEvent(type);

createEvent方法的參數(shù)是事件類型厉碟，比如UIEvents、MouseEvents屠缭、MutationEvents箍鼓、HTMLEvents。

8.2呵曹、document.addEventListener()款咖，document.removeEventListener()何暮，document.dispatchEvent()

以下三個方法與document節(jié)點的事件相關(guān)。這些方法都繼承自EventTarget接口铐殃。

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

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

// 觸發(fā)事件
var event = new Event('click');
document.dispatchEvent(event);

九海洼、其他方法

9.1、document.hasFocus()

9.2富腊、document.createNodeIterator()坏逢，document.createTreeWalker()

9.3、document.adoptNode()

9.4赘被、document.importNode()

9.5是整、document.getSelection()

（本系列下一節(jié)為 — Element節(jié)點）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市民假，隨后出現(xiàn)的幾起案子浮入，更是在濱河造成了極大的恐慌，老刑警劉巖阳欲，帶你破解...
    沈念sama閱讀 206,378評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件舵盈，死亡現(xiàn)場離奇詭異，居然都是意外死亡球化，警方通過查閱死者的電腦和手機秽晚，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來筒愚，“玉大人赴蝇，你說我怎么就攤上這事〕膊簦” “怎么了句伶？”我有些...
    開封第一講書人閱讀 152,702評論 0贊 342
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長陆淀。 經(jīng)常有香客問我考余，道長，這世上最難降的妖魔是什么轧苫？ 我笑而不...
    開封第一講書人閱讀 55,259評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任楚堤，我火速辦了婚禮，結(jié)果婚禮上含懊，老公的妹妹穿的比我還像新娘身冬。我一直安慰自己，他們只是感情好岔乔，可當我...
    茶點故事閱讀 64,263評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布酥筝。 她就那樣靜靜地躺著，像睡著了一般雏门。 火紅的嫁衣襯著肌膚如雪嘿歌。 梳的紋絲不亂的頭發(fā)上掸掏，一...
    開封第一講書人閱讀 49,036評論 1贊 285
  • 城市分裂傳說
    那天，我揣著相機與錄音宙帝，去河邊找鬼阅束。 笑死，一個胖子當著我的面吹牛茄唐，可吹牛的內(nèi)容都是我干的息裸。 我是一名探鬼主播，決...
    沈念sama閱讀 38,349評論 3贊 400
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼沪编，長吁一口氣：“原來是場噩夢啊……” “哼呼盆！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起蚁廓，我...
    開封第一講書人閱讀 36,979評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤访圃，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后相嵌，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體腿时，經(jīng)...
    沈念sama閱讀 43,469評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年饭宾，在試婚紗的時候發(fā)現(xiàn)自己被綠了批糟。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,059評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡看铆，死狀恐怖徽鼎，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情弹惦，我是刑警寧澤否淤，帶...
    沈念sama閱讀 33,703評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站棠隐，受9級特大地震影響石抡，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜助泽，卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一啰扛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧报咳，春花似錦侠讯、人聲如沸挖藏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽膜眠。三九已至岩臣，卻和暖如春溜嗜，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背架谎。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工炸宵， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人谷扣。 一個月前我還...
    沈念sama閱讀 45,501評論 2贊 354
  • 代替公主和親
    正文 我出身青樓土全，卻偏偏與公主長得像，于是被迫代替她去往敵國和親会涎。 傳聞我的和親對象是個殘疾皇子裹匙，可洞房花燭夜當晚...
    茶點故事閱讀 42,792評論 2贊 345

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

  • 一、JS前言 （1）認識JS 也許你已經(jīng)了解HTML標記(也稱為結(jié)構(gòu))末秃，知道了CSS樣式(也稱為表示)概页，會使用HT...
    凜0_0閱讀 2,752評論 0贊 8
  • 一、基本概念 1.1练慕、DOM DOM是JS操作網(wǎng)頁的接口惰匙，全稱為“文檔對象模型”（Document Object ...
    周花花啊閱讀 3,153評論 0贊 6
  • 原文 https://www.kancloud.cn/dennis/tgjavascript/241852 一、節(jié)...
    LuckyS007閱讀 842評論 0贊 0
  • DOM（文檔對象模型）是針對 HTML 和 XML 文檔的一個 API铃将。DOM 描繪了一個層次化的節(jié)點樹项鬼，允許開發(fā)...
    劼哥stone閱讀 763評論 8贊 6
  • 或許不是我們變了，而是我們越來越接近真實的自己劲阎。 ...
    尋覔閱讀 513評論 1贊 3