怎樣添加屠凶、移除、復制、創(chuàng)建懊烤、查找節(jié)點

1. 創(chuàng)建節(jié)點

document.createDocumentFragment(); // 創(chuàng)建一個空的虛擬節(jié)點梯醒，一個DOM片段
document.createEelement(TagName); // 創(chuàng)建指定的DOM節(jié)點
document.createTextNode(); // 創(chuàng)建一個文本節(jié)點
document.createAttribute(); // 創(chuàng)建一個屬性節(jié)點
document.createComment(); // 創(chuàng)建一個注釋節(jié)點

2. 刪除(移除)節(jié)點

parentNode.removeChild('需要刪除的子節(jié)點'); // 刪除，利用父元素節(jié)點刪除子節(jié)點
element.remove(); // 刪除自身腌紧，兼容性不好

3. 添加節(jié)點

parentNode.appendChild('子節(jié)點'); // 給父元素節(jié)點添加子節(jié)點
parentNode.append('節(jié)點','節(jié)點','節(jié)點','···'); // 添加子節(jié)點茸习，參數(shù)可以是多個節(jié)點，兼容性不好
parentNode.insertBefore('新節(jié)點', '舊節(jié)點'); // 將一個新節(jié)點插入到一個舊節(jié)點之前壁肋。

4. 替換節(jié)點

parentNode.replaceChild('新節(jié)點', '舊節(jié)點'); // 調(diào)用父節(jié)點的方法号胚，用一個新節(jié)點替換掉一個舊節(jié)點

5. 復制節(jié)點

element.cloneNode('布爾值'); 
// 克隆節(jié)點。如果參數(shù)為true的話浸遗，會遞歸復制當前元素的所有子孫節(jié)點猫胁。否則的話只復制當前節(jié)點本身。

6. 查找節(jié)點
   通過document查找跛锌。

document.getElementById(); // 通過ID查找DOM元素;
document.getElementsByTagName(); // 通過標簽選擇器查找DOM元素杜漠；可以是 '*'，返回當前所有的DOM節(jié)點察净。
document.getElementsByClassName(); // 通過class類名查找DOM元素驾茴；返回一個NodeList偽數(shù)組。
document.getElementsByName(); // 通過name屬性查找DOM元素氢卡；返回所有name符合的元素锈至。
document.querySelector(); // HTML5新增，通過CSS選擇器選擇元素译秦，返回匹配的第一個元素峡捡。
document.querySelectorAll(); // HTML5新增，通過CSS選擇器選擇元素筑悴，返回匹配的所有元素組成的NodeList们拙。
document.forms;  // 返回當前文檔中的所有form表單。
document.images; // 返回當前文檔中的所有img圖片阁吝。
document.scripts; // 返回當前文檔中所有的script腳本砚婆。
document.activeElement; // 返回當前獲取焦點的節(jié)點。
document.documentElement; // 返回當前文檔的根節(jié)點突勇。
document.body; // 返回當前文檔的body節(jié)點装盯。

通過element查找。

element.childNodes; // 返回當前節(jié)點的所有子節(jié)點(包括文本節(jié)點和空白節(jié)點)甲馋。
element.children; // 返回當前節(jié)點的所有子元素節(jié)點埂奈。
element.firstChild; // 返回當前節(jié)點的第一個子節(jié)點(包括空白節(jié)點，文本節(jié)點)定躏。
element.firstElementChild; // 返回當前節(jié)點的第一個元素節(jié)點账磺。
element.lastChild; // 返回當前元素的最后一個子節(jié)點(包括空白節(jié)點芹敌，文本節(jié)點)。
element.lastElementChild; // 返回當前節(jié)點的最后一個元素節(jié)點垮抗。
element.nextSibling; // 返回當前節(jié)點的下一個兄弟節(jié)點(包括空白節(jié)點氏捞，文本節(jié)點)。
element.nextElementSibling; // 返回當前節(jié)點的下一個兄弟元素節(jié)點借宵。
element.previousSibling; // 返回當前節(jié)點的上一個兄弟節(jié)點(包括空白節(jié)點，文本節(jié)點)矾削。
element.previousElementSibling; // 返回當前節(jié)點的上一個兄弟元素節(jié)點壤玫。
element.parentNode; // 返回當前節(jié)點的父節(jié)點。
element.parentElement; // 返回當前節(jié)點的父元素節(jié)點哼凯。 // IE9以下不兼容欲间。

JQuery的事件委托on、live断部、delegate之間有什么區(qū)別

1. live
   定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)猎贴；
   語法：live(type, [data], fn);
   特點：

   1. live方法并沒有將監(jiān)聽器綁定到自己(this)身上，而是綁定到了this.context上了蝴光。
   2. live正是利用了事件委托機制來完成事件的監(jiān)聽處理她渴，把節(jié)點的處理委托給了document，新添加的元素不必再綁定一次監(jiān)聽器蔑祟。
   3. 使用live()方法但卻只能放在直接選擇的元素后面趁耗，不能在層級比較深，連綴的DOM遍歷方法后面使用疆虚，即("ul").live...可以苛败，但("ul").live...可以，但("body").find("ul").live…不行径簿；

2. delegate
   定義和用法：將監(jiān)聽事件綁定在就近的父級元素上;
   語法：delegate(selector,type,[data],fn)
   特點：

   1. 選擇就近的父級元素罢屈，因為事件可以更快的冒泡上去，能夠在第一時間進行處理篇亭。
   2. 更精確的小范圍使用事件代理缠捌，性能優(yōu)于.live()∫氲伲可以用在動態(tài)添加的元素上鄙币。

3. on
   定義和用法：將監(jiān)聽事件綁定到指定元素上。
   語法：on(type,[selector],[data],fn)
   參數(shù)的位置寫法與delegate不一樣蹂随。
   說明：on方法是當前JQuery推薦使用的事件綁定方法十嘿，附加只運行一次就刪除函數(shù)的方法是one()。

4. 它們?nèi)齻€之間的區(qū)別

live 把事件委托交給了document(根節(jié)點)岳锁，document 向下去尋找符合條件的元素绩衷， 不用等待document加載結(jié)束也可以生效。
delegate可指定事件委托對象，相比于live性能更優(yōu)咳燕，直接鎖定指定選擇器勿决；
on事件委托對象選填，如果不填招盲，即給對象自身注冊事件低缩，填了作用和delegate一致。
原生js面試題 - 劉悅Lau

描述一次完整的http請求過程(輸入url敲回車發(fā)生了什么)

1. 當我們開始在瀏覽器中輸入網(wǎng)址的時候曹货，瀏覽器其實就已經(jīng)在智能的匹配可能得 url 了咆繁，他會從歷史記錄，書簽等地方顶籽，找到已經(jīng)輸入的字符串可能對應的 url玩般，然后給出智能提示，讓你可以補全url地址

2. 瀏覽器查找域名的 IP 地址礼饱。請求一旦發(fā)起坏为，瀏覽器首先要做的事情就是解析這個域名，一般來說镊绪，瀏覽器會首先查看本地硬盤的 hosts 文件匀伏，看看其中有沒有和這個域名對應的規(guī)則，如果有的話就直接使用 hosts 文件里面的 ip 地址蝴韭。如果在本地的 hosts 文件沒有能夠找到對應的 ip 地址帘撰，瀏覽器會發(fā)出一個 DNS（因特網(wǎng)上作為域名和IP地址相互映射的一個分布式數(shù)據(jù)庫，能夠使用戶更方便的訪問互聯(lián)網(wǎng)万皿，而不用去記住能夠被機器直接讀取的IP數(shù)串摧找。通過主機名，最終得到該主機名對應的IP地址的過程叫做域名解析（或主機名解析））請求到本地DNS服務(wù)器 牢硅。本地DNS服務(wù)器一般都是你的網(wǎng)絡(luò)接入服務(wù)器商提供蹬耘，比如中國電信，中國移動减余。查詢你輸入的網(wǎng)址的DNS請求到達本地DNS服務(wù)器之后综苔，本地DNS服務(wù)器會首先查詢它的緩存記錄，如果緩存中有此條記錄位岔，就可以直接返回結(jié)果如筛，此過程是遞歸的方式進行查詢。如果沒有抒抬，本地DNS服務(wù)器還要向DNS根服務(wù)器進行查詢杨刨。本地DNS服務(wù)器繼續(xù)向域服務(wù)器發(fā)出請求，在這個例子中擦剑，請求的對象是.com域服務(wù)器妖胀。.com域服務(wù)器收到請求之后芥颈，也不會直接返回域名和IP地址的對應關(guān)系，而是告訴本地DNS服務(wù)器赚抡，你的域名的解析服務(wù)器的地址爬坑。最后，本地DNS服務(wù)器向域名的解析服務(wù)器發(fā)出請求涂臣，這時就能收到一個域名和IP地址對應關(guān)系盾计，本地DNS服務(wù)器不僅要把IP地址返回給用戶電腦，還要把這個對應關(guān)系保存在緩存中赁遗，以備下次別的用戶查詢時署辉，可以直接返回結(jié)果，加快網(wǎng)絡(luò)訪問吼和。

image

3. 瀏覽器向 web 服務(wù)器發(fā)送一個 HTTP 請求涨薪。在通過DNS域名解析后骑素，獲取到了服務(wù)器的IP地址炫乓，在獲取到IP地址后，便會開始建立一次連接献丑，這是由TCP協(xié)議完成的末捣，主要通過三次握手進行連接：

   第一次握手： 建立連接時，客戶端發(fā)送syn包（syn=j）到服務(wù)器创橄，并進入SYN_SENT狀態(tài)箩做，等待服務(wù)器確認；

   第二次握手： 服務(wù)器收到syn包妥畏，必須確認客戶的SYN（ack=j+1）邦邦，同時自己也發(fā)送一個SYN包（syn=k），即SYN+ACK包醉蚁，此時服務(wù)器進入SYN_RECV狀態(tài)燃辖；

   第三次握手： 客戶端收到服務(wù)器的SYN+ACK包，向服務(wù)器發(fā)送確認包ACK(ack=k+1）网棍，此包發(fā)送完畢黔龟，客戶端和服務(wù)器進入ESTABLISHED（TCP連接成功）狀態(tài)，完成三次握手滥玷。

image

4. 瀏覽器向服務(wù)器發(fā)送HTTP請求

5. 服務(wù)器返回一個 HTTP 響應氏身，瀏覽器接收響應

   服務(wù)器在收到瀏覽器發(fā)送的HTTP請求之后，會將收到的HTTP報文封裝成HTTP的Request對象惑畴，并通過不同的Web服務(wù)器進行處理蛋欣，處理完的結(jié)果以HTTP的Response對象返回，主要包括狀態(tài)碼如贷，響應頭豁状，響應報文三個部分捉偏。

   狀態(tài)碼主要包括以下部分

   • 1xx：指示信息–表示請求已接收，繼續(xù)處理泻红。
   • 2xx：成功–表示請求已被成功接收夭禽、理解、接受谊路。
   • 3xx：重定向–要完成請求必須進行更進一步的操作讹躯。
   • 4xx：客戶端錯誤–請求有語法錯誤或請求無法實現(xiàn)。
   • 5xx：服務(wù)器端錯誤–服務(wù)器未能實現(xiàn)合法的請求缠劝。
   • 響應頭主要由Cache-Control潮梯、 Connection、Date惨恭、Pragma等組成秉馏。
   • 響應體為服務(wù)器返回給瀏覽器的信息，主要由HTML脱羡，css萝究，js，圖片文件組成锉罐。

6. 頁面渲染帆竹。如果說響應的內(nèi)容是HTML文檔的話，就需要瀏覽器進行解析渲染呈現(xiàn)給用戶脓规。整個過程涉及兩個方面：解析和渲染栽连。在渲染頁面之前，需要構(gòu)建DOM樹和CSSOM樹侨舆。

image

image

在瀏覽器還沒接收到完整的 HTML 文件時秒紧，它就開始渲染頁面了，在遇到外部鏈入的腳本標簽或樣式標簽或圖片時挨下，會再次發(fā)送 HTTP 請求重復上述的步驟熔恢。在收到 CSS 文件后會對已經(jīng)渲染的頁面重新渲染，加入它們應有的樣式复颈，圖片文件加載完立刻顯示在相應位置绩聘。在這一過程中可能會觸發(fā)頁面的重繪或重排。這里就涉及了兩個重要概念：Reflow和Repaint耗啦。

Reflow凿菩，也稱作Layout，中文叫回流帜讲，一般意味著元素的內(nèi)容衅谷、結(jié)構(gòu)、位置或尺寸發(fā)生了變化似将，需要重新計算樣式和渲染樹获黔，這個過程稱為Reflow蚀苛。

Repaint，中文重繪玷氏，意味著元素發(fā)生的改變只是影響了元素的一些外觀之類的時候（例如堵未，背景色，邊框顏色盏触，文字顏色等）渗蟹，此時只需要應用新樣式繪制這個元素就OK了，這個過程稱為Repaint赞辩。

所以說Reflow的成本比Repaint的成本高得多的多雌芽。DOM樹里的每個結(jié)點都會有reflow方法，一個結(jié)點的reflow很有可能導致子結(jié)點辨嗽，甚至父點以及同級結(jié)點的reflow世落。

下面這些動作有很大可能會是成本比較高的：
1. 增加、刪除糟需、修改DOM結(jié)點時屉佳，會導致Reflow或Repaint
2. 移動DOM的位置，或是搞個動畫的時候
3. 內(nèi)容發(fā)生變化
4. 修改CSS樣式的時候
5. Resize窗口的時候（移動端沒有這個問題）篮灼，或是滾動的時候
6. 修改網(wǎng)頁的默認字體時
基本上來說忘古，reflow有如下的幾個原因：
1. Initial徘禁，網(wǎng)頁初始化的時候
2. Incremental诅诱，一些js在操作DOM樹時
3. Resize，其些元件的尺寸變了
4. StyleChange送朱，如果CSS的屬性發(fā)生變化了
5. Dirty娘荡，幾個Incremental的reflow發(fā)生在同一個frame的子樹上

7. 關(guān)閉TCP連接或繼續(xù)保持連接
   通過四次揮手關(guān)閉連接(FIN ACK, ACK, FIN ACK, ACK)。

image

第一次揮手是瀏覽器發(fā)完數(shù)據(jù)后驶沼，發(fā)送FIN請求斷開連接炮沐。
第二次揮手是服務(wù)器發(fā)送ACK表示同意，如果在這一次服務(wù)器也發(fā)送FIN請求斷開連接似乎也沒有不妥回怜，但考慮到服務(wù)器可能還有數(shù)據(jù)要發(fā)送大年，所以服務(wù)器發(fā)送FIN應該放在第三次揮手中。
這樣瀏覽器需要返回ACK表示同意玉雾，也就是第四次揮手翔试。
至此從瀏覽器地址欄輸入URL到頁面呈現(xiàn)到你面前的整個過程就分析完了！８囱垦缅！

本題原文鏈接：從輸入url到頁面展示到底發(fā)生了什么@小四 -- 王云飛_小四_wyunfei

如果本文對您有幫助，可以看看本人的其他文章:
原生JS - 瀑布流布局@郝晨光
原生JS - 圖片懶加載@郝晨光
Koa - Node.js框架學習@郝晨光

結(jié)言

感謝您的查閱驹碍，本文由郝晨光整理并總結(jié)壁涎，代碼冗余或者有錯誤的地方望不吝賜教凡恍；菜鳥一枚，請多關(guān)照