整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
檔對(duì)象模型(DOM)
JS 有很多地方讓咱們吐槽，但沒那么糟糕。作為一種在瀏覽器中運(yùn)行的腳本語言，它對(duì)于處理web頁面非常有用。在本中，我們將看到我們有哪些方法來交互和修改HTML文檔及其元素。但首先讓我們來揭開文檔對(duì)象模型的神秘面紗。
文檔對(duì)象模型是一個(gè)基本概念，它是咱們?cè)跒g覽器中所做的一切工作的基礎(chǔ)。但那到底是什么? 當(dāng)咱們?cè)L問一個(gè) web 頁面時(shí)，瀏覽器會(huì)指出如何解釋每個(gè) HTML 元素。這樣它就創(chuàng)建了 HTML 文檔的虛擬表示，并保存在內(nèi)存中。HTML 頁面被轉(zhuǎn)換成樹狀結(jié)構(gòu)，每個(gè) HTML 元素都變成一個(gè)葉子，連接到父分支。考慮這個(gè)簡(jiǎn)單的HTML 頁面：
<!DOCTYPE html> <html lang="en"> <head> <title>A super simple title!</title> </head> <body> <h1>A super simple web page!</h1> </body> </html
當(dāng)瀏覽器掃描上面的 HTML 時(shí)，它創(chuàng)建了一個(gè)文檔對(duì)象模型，它是HTML結(jié)構(gòu)的鏡像。在這個(gè)結(jié)構(gòu)的頂部有一個(gè) document 也稱為根元素，它包含另一個(gè)元素:html。html 元素包含一個(gè) head，head 又有一個(gè) title。然后是含有 h1的 body。每個(gè) HTML 元素由特定類型(也稱為接口)表示，并且可能包含文本或其他嵌套元素
document (HTMLDocument) | | --> html (HTMLHtmlElement) | | --> head (HtmlHeadElement) | | | | --> title (HtmlTitleElement) | | --> text: "A super simple title!" | | --> body (HtmlBodyElement) | | | | --> h1 (HTMLHeadingElement) | | --> text: "A super simple web page!"
每個(gè) HTML 元素都是從 Element 派生而來的，但是它們中的很大一部分是進(jìn)一步專門化的。咱們可以檢查原型，以查明元素屬于什么“種類”。例如，h1 元素是 HTMLHeadingElement
document.quertSelector('h1').__proto__
// 輸出：HTMLHeadingElement
HTMLHeadingElement 又是 HTMLElement 的“后代”
document.querySelector('h1').__proto__.__proto__
// Output: HTMLElement
Element 是一個(gè)通用性非常強(qiáng)的基類，所有 Document 對(duì)象下的對(duì)象都繼承自它。這個(gè)接口描述了所有相同種類的元素所普遍具有的方法和屬性。一些接口繼承自 Element 并且增加了一些額外功能的接口描述了具體的行為。例如， HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基礎(chǔ)。大多數(shù)功能是在這個(gè)類的更深層級(jí)（hierarchy）的接口中被進(jìn)一步制定的。
在這一點(diǎn)上(特別是對(duì)于初學(xué)者)，document 和 window 之間可能有些混淆。window 指的是瀏覽器，而 document 指的是當(dāng)前的 HTML 頁面。window 是一個(gè)全局對(duì)象，可以從瀏覽器中運(yùn)行的任何 JS 代碼直接訪問它。它不是 JS 的“原生”對(duì)象，而是由瀏覽器本身公開的。window 有很多屬性和方法，如下所示：
window.alert('Hello world'); // Shows an alert
window.setTimeout(callback, 3000); // Delays execution
window.fetch(someUrl); // makes XHR requests
window.open(); // Opens a new tab
window.location; // Browser location
window.history; // Browser history
window.navigator; // The actual device
window.document; // The current page
由于這些屬性是全局屬性，因此也可以省略 window：
alert('Hello world'); // Shows an alert
setTimeout(callback, 3000); // Delays execution
fetch(someUrl); // makes XHR requests
open(); // Opens a new tab
location; // Browser location
history; // Browser history
navigator; // The actual device
document; // The current page
你應(yīng)該已經(jīng)熟悉其中的一些方法，例如 setTimeout()或 window.navigator，它可以獲取當(dāng)前瀏覽器使用的語言：
if (window.navigator) {
var lang=window.navigator.language;
if (lang==="en-US") {
// show something
}
if (lang==="it-IT") {
// show something else
}
}
要了解更多 window 上的方法，請(qǐng)查看MDN文檔。在下一節(jié)中，咱們深入地研究一下 DOM。
節(jié)點(diǎn)、元素 和DOM 操作
document 接口有許多實(shí)用的方法，比如 querySelector()，它是用于選擇當(dāng)前 HTML 頁面內(nèi)的任何 HTML 元素：
document.querySelector('h1');
window 表示當(dāng)前窗口的瀏覽器，下面的指令與上面的相同：
window.document.querySelector('h1');
不管怎樣，下面的語法更常見，在下一節(jié)中咱們將大量使用這種形式：
document.methodName();
除了 querySelector() 用于選擇 HTML 元素之外，還有很多更有用的方法
// 返回單個(gè)元素
document.getElementById('testimonials');
// 返回一個(gè) HTMLCollection
document.getElementsByTagName('p');
// 返回一個(gè)節(jié)點(diǎn)列表
document.querySelectorAll('p');
咱們不僅可以選 擇HTML 元素，還可以交互和修改它們的內(nèi)部狀態(tài)。例如，希望讀取或更改給定元素的內(nèi)部?jī)?nèi)容：
// Read or write
document.querySelector('h1').innerHtml; // Read
document.querySelector('h1').innerHtml=''; // Write! Ouch!
DOM 中的每個(gè) HTML 元素也是一個(gè)“節(jié)點(diǎn)”，實(shí)際上咱們可以像這樣檢查節(jié)點(diǎn)類型：
document.querySelector('h1').nodeType;
上述結(jié)果返回 1，表示是 Element 類型的節(jié)點(diǎn)的標(biāo)識(shí)符。咱們還可以檢查節(jié)點(diǎn)名：
document.querySelector('h1').nodeName;
"H1"
這里，節(jié)點(diǎn)名以大寫形式返回。通常我們處理 DOM 中的四種類型的節(jié)點(diǎn)
由于元素是節(jié)點(diǎn)，節(jié)點(diǎn)可以有屬性(properties )(也稱為attributes)，咱們可以檢查和操作這些屬性：
// 返回 true 或者 false
document.querySelector('a').hasAttribute('href');
// 返回屬性文本內(nèi)容，或 null
document.querySelector('a').getAttribute('href');
// 設(shè)置給定的屬性
document.querySelector('a').setAttribute('href', 'someLink');
前面我們說過 DOM 是一個(gè)類似于樹的結(jié)構(gòu)。這種特性也反映在 HTML 元素上。每個(gè)元素都可能有父元素和子元素，我們可以通過檢查元素的某些屬性來查看它們:
// 返回一個(gè) HTMLCollection
document.children;
// 返回一個(gè)節(jié)點(diǎn)列表
document.childNodes;
// 返回一個(gè)節(jié)點(diǎn)
document.querySelector('a').parentNode;
// 返回HTML元素
document.querySelector('a').parentElement;
了解了如何選擇和查詢 HTML 元素。那創(chuàng)建元素又是怎么樣?為了創(chuàng)建 Element 類型的新節(jié)點(diǎn)，原生 DOM API 提供了 createElement 方法：
var heading=document.createElement('h1');
使用 createTextNode 創(chuàng)建文本節(jié)點(diǎn)：
var text=document.createTextNode('Hello world');
通過將 text 附加到新的 HTML 元素中，可以將這兩個(gè)節(jié)點(diǎn)組合在一起。最后，還可以將heading元素附加到根文檔中:
var heading=document.createElement('h1');
var text=document.createTextNode('Hello world');
heading.appendChild(text);
document.body.appendChild(heading);
還可以使用 remove() 方法從 DOM 中刪除節(jié)點(diǎn)。在元素上調(diào)用方法，該節(jié)點(diǎn)將從頁面中消失：
document.querySelector('h1').remove();
這些是咱們開始在瀏覽器中使用 JS 操作 DOM 所需要知道的全部?jī)?nèi)容。在下一節(jié)中，咱們將靈活地使用 DOM，但首先要繞個(gè)彎，因?yàn)樵蹅冞€需要討論“DOM事件”。
DOM 和事件
DOM 元素是很智能的。它們不僅可以包含文本和其他 HTML 元素，還可以“發(fā)出”和響應(yīng)“事件”。瀏覽任何網(wǎng)站并打開瀏覽器控制臺(tái)。使用以下命令選擇一個(gè)元素：
document.querySelector('p')
看看這個(gè)屬性
document.querySelector('p').onclick
它是什么類型:
typeof document.querySelector('p').onclick // "object"
"object"! 為什么它被稱為“onclick”? 憑一點(diǎn)直覺我們可以想象它是元素上的某種神奇屬性，能夠?qū)c(diǎn)擊做出反應(yīng)? 完全正確。
如果你感興趣，可以查看任何 HTML 元素的原型鏈。會(huì)發(fā)現(xiàn)每個(gè)元素也是一個(gè) Element，而元素又是一個(gè)節(jié)點(diǎn)，而節(jié)點(diǎn)又是一個(gè)EventTarget。可以使用 instanceof 來驗(yàn)證這一點(diǎn)。
document.querySelector('p') instanceof EventTarget // true
我很樂意稱 EventTarget 為所有 HTML 元素之父，但在JS中沒有真正的繼承，它更像是任何 HTML 元素都可以看到另一個(gè)連接對(duì)象的屬性。因此，任何 HTML 元素都具有與 EventTarget相同的特性:發(fā)布事件的能力。
但事件到底是什么呢?以 HTML 按鈕為例。如果你點(diǎn)擊它，那就是一個(gè)事件。有了這個(gè).onclick對(duì)象，咱們可以注冊(cè)事件，只要元素被點(diǎn)擊，它就會(huì)運(yùn)行。傳遞給事件的函數(shù)稱為“事件監(jiān)聽器”或“事件句柄”。
事件和監(jiān)聽
在 DOM 中注冊(cè)事件監(jiān)聽器有三種方法。第一種形式比較陳舊，應(yīng)該避免，因?yàn)樗詈狭诉壿嫴僮骱蜆?biāo)簽
<!-- 不好的方式 -->
<button onclick="console.log('clicked')">喜歡，就點(diǎn)點(diǎn)我</button>
第二個(gè)選項(xiàng)依賴于以事件命名的對(duì)象。例如，咱們可以通過在對(duì)象.onclick上注冊(cè)一個(gè)函數(shù)來監(jiān)聽click事件：
document.querySelector("button").onclick=handleClick;
function handleClick() {
console.log("Clicked!");
}
此語法更加簡(jiǎn)潔，是內(nèi)聯(lián)處理程序的不錯(cuò)替代方案。還有另一種基于addEventListener的現(xiàn)代形式：
document.querySelector("button").addEventListener("click", handleClick);
function handleClick() {
console.log("Clicked!");
}
就我個(gè)人而言，我更喜歡這種形式，但如果想爭(zhēng)取最大限度的瀏覽器兼容性，請(qǐng)使用 .on 方式。現(xiàn)在咱們已經(jīng)有了一 個(gè) HTML 元素和一個(gè)事件監(jiān)聽器，接著進(jìn)一步研究一下 DOM 事件。
事件對(duì)象、事件默認(rèn)值和事件冒泡
作為事件處理程序傳遞的每個(gè)函數(shù)默認(rèn)接收一個(gè)名為“event”的對(duì)象
var button=document.querySelector("button");
button.addEventListener("click", handleClick);
function handleClick() {
console.log(event);
}
它可以直接在函數(shù)體中使用，但是在我的代碼中，我更喜歡將它顯式地聲明為參數(shù)：
function handleClick(event) {
console.log(event);
}
事件對(duì)象是“必須要有的”，因?yàn)樵蹅兛梢酝ㄟ^調(diào)用事件上的一些方法來控制事件的行為。事件實(shí)際上有特定的特征，尤其是“默認(rèn)”和“冒泡”。考慮一 個(gè)HTML 鏈接。使用以下標(biāo)簽創(chuàng)建一個(gè)名為click-event.html的新HTML文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Click event</title> </head> <body> <div> <a href="/404.html">click me!</a> </div> </body> <script src="click-event.js"></script> </html>
在瀏覽器中運(yùn)行該文件并嘗試單擊鏈接。它將跳轉(zhuǎn)到一個(gè)404的界面。鏈接上單擊事件的默認(rèn)行為是轉(zhuǎn)到href屬性中指定的實(shí)際頁面。但如果我告訴你有辦法阻止默認(rèn)值呢?輸入preventDefault()，該方法可用于事件對(duì)象。使用以下代碼創(chuàng)建一個(gè)名為click-event.js的新文件：
var button=document.querySelector("a");
button.addEventListener("click", handleClick);
function handleClick(event) {
event.preventDefault();
}
在瀏覽器中刷新頁面并嘗試現(xiàn)在單擊鏈接:它不會(huì)跳轉(zhuǎn)了。因?yàn)樵蹅冏柚沽藶g覽器的“事件默認(rèn)” 鏈接不是默認(rèn)操作的惟一HTML 元素，表單具有相同的特性。
當(dāng) HTML 元素嵌套在另一個(gè)元素中時(shí)，還會(huì)出現(xiàn)另一個(gè)有趣的特性。考慮以下 HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Nested events</title> </head> <body> <div id="outer"> I am the outer div <div id="inner"> I am the inner div </div> </div> </body> <script src="nested-events.js"></script> </html>
和下面的 JS 代碼：
// nested-events.js
var outer=document.getElementById('inner');
var inner=document.getElementById('outer');
function handleClick(event){
console.log(event);
}
inner.addEventListener('click', handleClick);
outer.addEventListener('click', handleClick);
有兩個(gè)事件監(jiān)聽器，一個(gè)用于外部 div，一個(gè)用于內(nèi)部 div。準(zhǔn)確地點(diǎn)擊內(nèi)部div，你會(huì)看到：
兩個(gè)事件對(duì)象被打印。這就是事件冒泡在起作用。它看起來像是瀏覽器行為中的一個(gè) bug，使用 stopPropagation() 方法可以禁用，這也是在事件對(duì)象上調(diào)用的
//
function handleClick(event) {
event.stopPropagation();
console.log(event);
}
///
盡管看起來實(shí)現(xiàn)效果很差，但在注冊(cè)過多事件監(jiān)聽器確實(shí)對(duì)性能不利的情況下，冒泡還是會(huì)讓人眼前一亮。考慮以下示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Event bubbling</title> </head> <body> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> </body> <script src="event-bubbling.js"></script> </html>
如果要兼聽列表的點(diǎn)擊事件，需要在列表中注冊(cè)多少事件監(jiān)聽器?答案是:一個(gè)。只需要一個(gè)在ul上注冊(cè)的偵聽器就可以截獲任何li上的所有單擊:
// event-bubbling.js
var ul=document.getElementsByTagName("ul")[0];
function handleClick(event) {
console.log(event);
}
ul.addEventListener("click", handleClick);
可以看到，事件冒泡是提高性能的一種實(shí)用方法。實(shí)際上，對(duì)瀏覽器來說，注冊(cè)事件監(jiān)聽器是一項(xiàng)昂貴的操作，而且在出現(xiàn)大量元素列表的情況下，可能會(huì)導(dǎo)致性能損失。
用 JS 生成表格
現(xiàn)在咱們開始編碼。給定一個(gè)對(duì)象數(shù)組，希望動(dòng)態(tài)生成一個(gè)HTML 表格。HTML 表格由 <table> 元素表示。每個(gè)表也可以有一個(gè)頭部，由 <thead> 元素表示。頭部可以有一個(gè)或多個(gè)行 <tr>，每個(gè)行都有一個(gè)單元格，由一個(gè) <th>元 素表示。如下所示：
<table> <thead> <tr> <th>name</th> <th>height</th> <th>place</th> </tr> </thead> <!-- more stuff here! --> </table>
不止這樣，大多數(shù)情況下，每個(gè)表都有一個(gè)主體，由 <tbody> 定義，而 <tbody> 又包含一組行<tr>。每一行都可以有包含實(shí)際數(shù)據(jù)的單元格。表單元格由<td>定義。完整如下所示：
<table> <thead> <tr> <th>name</th> <th>height</th> <th>place</th> </tr> </thead> <tbody> <tr> <td>Monte Falco</td> <td>1658</td> <td>Parco Foreste Casentinesi</td> </tr> <tr> <td>Monte Falterona</td> <td>1654</td> <td>Parco Foreste Casentinesi</td> </tr> </tbody> </table>
現(xiàn)在的任務(wù)是從 JS 對(duì)象數(shù)組開始生成表格。首先，創(chuàng)建一個(gè)名為build-table.html的新文件，內(nèi)容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Build a table</title> </head> <body> <table> <!-- here goes our data! --> </table> </body> <script src="build-table.js"></script> </html>
在相同的文件夾中創(chuàng)建另一個(gè)名為build-table.js的文件，并使用以下數(shù)組開始：
"use strict";
var mountains=[
{ name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
{ name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
{ name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
{ name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
{ name: "Monte Amiata", height: 1738, place: "Siena" }
];
考慮這個(gè)表格。首先，咱們需要一個(gè) <thead>：
document.createElement('thead')
這沒有錯(cuò)，但是仔細(xì)查看MDN的表格文檔會(huì)發(fā)現(xiàn)一個(gè)有趣的細(xì)節(jié)。<table> 是一個(gè) HTMLTableElement，它還包含有趣方法。其中最有用的是HTMLTableElement.createTHead()，它可以幫助創(chuàng)建咱們需要的 <thead>。
首先，編寫一個(gè)生成 thead 標(biāo)簽的函數(shù) generateTableHead
function generateTableHead(table) {
var thead=table.createTHead();
}
該函數(shù)接受一個(gè)選擇器并在給定的表上創(chuàng)建一個(gè) <thead>:
function generateTableHead(table) {
var thead=table.createTHead();
}
var table=document.querySelector("table");
generateTableHead(table);
在瀏覽器中打開 build-table.html:什么都沒有.但是，如果打開瀏覽器控制臺(tái)，可以看到一個(gè)新的 <thead> 附加到表。
接著填充 header 內(nèi)容。首先要在里面創(chuàng)建一行。還有另一個(gè)方法可以提供幫助:HTMLTableElement.insertRow()。有了這個(gè)，咱們就可以擴(kuò)展方法了：
function generateTableHead (table) {
var thead=table,createThead();
var row=thead.insertRow();
}
此時(shí)，我們可以生成我們的行。通過查看源數(shù)組，可以看到其中的任何對(duì)象都有咱們需要信息：
var mountains=[
{ name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
{ name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
{ name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
{ name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
{ name: "Monte Amiata", height: 1738, place: "Siena" }
];
這意味著咱們可以將另一個(gè)參數(shù)傳遞給我們的函數(shù):一個(gè)遍歷以生成標(biāo)題單元格的數(shù)組：
function generateTableHead(table, data) {
var thead=table.createTHead();
var row=thead.insertRow();
for (var i=0; i < data.length; i++) {
var th=document.createElement("th");
var text=document.createTextNode(data[i]);
th.appendChild(text);
row.appendChild(th);
}
}
不幸的是，沒有創(chuàng)建單元格的原生方法，因此求助于document.createElement("th")。同樣值得注意的是，document.createTextNode(data[i])用于創(chuàng)建文本節(jié)點(diǎn)，appendChild()用于向每個(gè)標(biāo)記添加新元素。
當(dāng)以這種方式創(chuàng)建和操作元素時(shí)，我們稱之為“命令式” DOM 操作。現(xiàn)代前端庫通過支持“聲明式”方法來解決這個(gè)問題。我們可以聲明需要哪些 HTML 元素，而不是一步一步地命令瀏覽器，其余的由庫處理。
回到我們的代碼，可以像下面這樣使用第一個(gè)函數(shù)
var table=document.querySelector("table");
var data=Object.keys(mountains[0]);
generateTableHead(table, data);
現(xiàn)在我們可以進(jìn)一步生成實(shí)際表的數(shù)據(jù)。下一個(gè)函數(shù)將實(shí)現(xiàn)一個(gè)類似于generateTableHead的邏輯，但這一次咱們需要兩個(gè)嵌套的for循環(huán)。在最內(nèi)層的循環(huán)中，使用另一種原生方法來創(chuàng)建一系列td。方法是HTMLTableRowElement.insertCell()。在前面創(chuàng)建的文件中添加另一個(gè)名為generateTable的函數(shù)
function generateTable(table, data) {
for (var i=0; i < data.length; i++) {
var row=table.insertRow();
for (var key in data[i]) {
var cell=row.insertCell();
var text=document.createTextNode(data[i][key]);
cell.appendChild(text);
}
}
}
調(diào)用上面的函數(shù)，將 HTML表 和對(duì)象數(shù)組作為參數(shù)傳遞：
generateTable(table, mountains);
咱們深入研究一下 generateTable 的邏輯。參數(shù) data 是一個(gè)與 mountains 相對(duì)應(yīng)的數(shù)組。最外層的 for 循環(huán)遍歷數(shù)組并為每個(gè)元素創(chuàng)建一行：
function generateTable(table, data) {
for (var i=0; i < data.length; i++) {
var row=table.insertRow();
// omitted for brevity
}
}
最內(nèi)層的循環(huán)遍歷任何給定對(duì)象的每個(gè)鍵，并為每個(gè)對(duì)象創(chuàng)建一個(gè)包含鍵值的文本節(jié)點(diǎn)
function generateTable(table, data) {
for (var i=0; i < data.length; i++) {
var row=table.insertRow();
for (var key in data[i]) {
// inner loop
var cell=row.insertCell();
var text=document.createTextNode(data[i][key]);
cell.appendChild(text);
}
}
}
最終代碼：
var mountains=[
{ name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
{ name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
{ name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
{ name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
{ name: "Monte Amiata", height: 1738, place: "Siena" }
];
function generateTableHead(table, data) {
var thead=table.createTHead();
var row=thead.insertRow();
for (var i=0; i < data.length; i++) {
var th=document.createElement("th");
var text=document.createTextNode(data[i]);
th.appendChild(text);
row.appendChild(th);
}
}
function generateTable(table, data) {
for (var i=0; i < data.length; i++) {
var row=table.insertRow();
for (var key in data[i]) {
var cell=row.insertCell();
var text=document.createTextNode(data[i][key]);
cell.appendChild(text);
}
}
}
其中調(diào)用：
var table=document.querySelector("table");
var data=Object.keys(mountains[0]);
generateTable(table, mountains);
generateTableHead(table, data);
執(zhí)行結(jié)果：
當(dāng)然，咱們的方法還可以該進(jìn)，下個(gè)章節(jié)將介紹。
總結(jié)
DOM 是 web 瀏覽器保存在內(nèi)存中的 web 頁面的虛擬副本。DOM 操作是指從 DOM 中創(chuàng)建、修改和刪除 HTML 元素的操作。在過去，咱們常常依賴 jQuery 來完成更簡(jiǎn)單的任務(wù)，但現(xiàn)在原生 API 已經(jīng)足夠成熟，可以讓 jQuery 過時(shí)了。另一方面，jQuery 不會(huì)很快消失，但是每個(gè) JS 開發(fā)人員都必須知道如何使用原生 API 操作 DOM。
這樣做的理由有很多，額外的庫增加了加載時(shí)間和 JS 應(yīng)用程序的大小。更不用說 DOM 操作在面試中經(jīng)常出現(xiàn)。
DOM 中每個(gè)可用的 HTML 元素都有一個(gè)接口，該接口公開一定數(shù)量的屬性和方法。當(dāng)你對(duì)使用何種方法有疑問時(shí)，參考MDN文檔。操作 DOM 最常用的方法是 document.createElement()用于創(chuàng)建新的 HTML 元素，document.createTextNode() 用于在 DOM 中創(chuàng)建文本節(jié)點(diǎn)。最后但同樣重要的是 .appendchild()，用于將新的 HTML 元素或文本節(jié)點(diǎn)附加到現(xiàn)有元素。
HTML 元素還能夠發(fā)出事件，也稱為DOM事件。值得注意的事件為“click”、“submit”、“drag”、“drop”等等。DOM 事件有一些特殊的行為，比如“默認(rèn)”和冒泡。
JS 開發(fā)人員可以利用這些屬性，特別是對(duì)于事件冒泡，這些屬性對(duì)于加速 DOM 中的事件處理非常有用。雖然對(duì)原生 API 有很好的了解是件好事，但是現(xiàn)代前端庫提供了不容置疑的好處。用 Angular、React 和 Vue 來構(gòu)建一個(gè)大型的JS應(yīng)用程序確實(shí)是可行的。
代碼部署后可能存在的BUG沒法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。
原文：https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter8.md
AVASCRIPT基本語法-區(qū)分大小寫
javascript嚴(yán)格區(qū)分大小寫，避免輸入錯(cuò)誤，用戶采用一致的大小寫形式。
1.定義構(gòu)造函數(shù)時(shí)，可以讓函數(shù)名大寫。
如 Date()函數(shù)；
d=new Date(); //Date 大寫
alert(d);
2.如果變量名是多個(gè)詞鏈寫的可以考慮大寫
1）駱駝命名法 每個(gè)邏輯點(diǎn)的詞可以大寫
printEmployeePaycheck(){
.....................................
};
TML: HyperText Markup Language 超文本標(biāo)記語言
HTML代碼不區(qū)分大小寫, 包括HTML標(biāo)記、屬性、屬性值都不區(qū)分大小寫;
任何空格或回車鍵在代碼中都無效，插入空格或回車有專用的標(biāo)記，分別是 、<br>
HTML標(biāo)記中不要有空格，否則瀏覽器可能無法識(shí)別。
如何添加注釋(comment:評(píng)論;注釋)
<!-- -->
<comment></comment>
<!-- --> 不能留有空格字符集
<meta http-equiv="Content-Type" content="text/html;charset=#"/><base target="_blank">可以將a鏈接的默認(rèn)屬性設(shè)置為_blank屬性
單個(gè)標(biāo)簽要有最好有結(jié)束符(可以沒有結(jié)束符)
<br/> <img src="" width="" /> 便于兼容XHTML(XHTML必須要有結(jié)束符)
HTML標(biāo)簽的屬性值可以有引號(hào),可以沒有引號(hào),為了提高代碼的可讀性,推薦使用引號(hào)(單引號(hào)和雙引號(hào))，盡管屬性值是整數(shù)，也推薦加上引號(hào)。
<marquee behavior="slide"></marquee> 便于兼容XHTML(XHTML必須要有引號(hào))
<marquee behavior=slide></marquee>經(jīng)過測(cè)試,以上程序都可以正確運(yùn)行
HTML標(biāo)簽涉及到的顏色值格式:
color_name 規(guī)定顏色值為顏色名稱的文本顏色(比如 "red")。
hex_number 規(guī)定顏色值為十六進(jìn)制值的文本顏色(比如 "#ff0000")。
rgb_number 規(guī)定顏色值為 rgb 代碼的文本顏色(比如 "rgb(255,0,0)")。
transparent 透明色 color:transparent
rgba(紅0-255,綠0-255,藍(lán)0-255,透明度0-1)
opacity屬性: 就是葫蘆娃兄弟老六(技能包隱身)
css:
div{opacity:0.1} /*取值為0-1*/英文(顏色值)不區(qū)分大小寫
HTML中顏色值：采用十六進(jìn)制兼容性最好(十六進(jìn)制顯示顏色效果最佳)
CSS中顏色值：不存在兼容性
紅色 #FF0000
綠色 #00FF00
藍(lán)色 #0000FF
黑色： #000000
灰色 #CCCCCC
白色 #FFFFFF
青色 #00FFFF
洋紅 #FF00FF
黃色 #FFFF00
請(qǐng)問后綴 html 和 htm 有什么區(qū)別?
答: 1. 如果一個(gè)網(wǎng)站有 index.html和index.htm，默認(rèn)情況下，優(yōu)先訪問.html
2. htm后綴是為了兼容以前的DOS系統(tǒng)8.3的命名規(guī)范
XHTML與HTML之間的關(guān)系?
XHTML是EXtensible HyperText Markup Language的英文縮寫,即可擴(kuò)展的超文本標(biāo)記語言.
XHTML語言是一種標(biāo)記語言,它不需要編譯,可以直接由瀏覽器執(zhí)行.
XHTML是用來代替HTML的, 是2000年w3c公布發(fā)行的.
XHTML是一種增強(qiáng)了的HTML,它的可擴(kuò)展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求.
XHTML是基于XML的應(yīng)用.
XHTML更簡(jiǎn)潔更嚴(yán)謹(jǐn).
XHTML也可以說就是HTML一個(gè)升級(jí)版本.(w3c描述它為'HTML 4.01')
XHTML是大小寫敏感的,XHTML與HTML是不一樣的;HTML不區(qū)分大小寫,標(biāo)準(zhǔn)的XHTML標(biāo)簽應(yīng)該使用小寫.
XHTML屬性值必須使用引號(hào),而HTML屬性值可用引號(hào),可不要引號(hào)
XHTML屬性不能簡(jiǎn)寫：如checked必須寫成checked="checked"
單標(biāo)記<br>, XHTML必須有結(jié)束符<br/>,而HTML可以使用<br>,也可以使用<br/>
除此之外XHTML和HTML基本相同.
網(wǎng)頁寬度設(shè)置多少為最佳?
960px
target屬性值理解
_self 在當(dāng)前窗口中打開鏈接文件,是默認(rèn)值
_blank 開啟一個(gè)新的窗口打開鏈接文件
_parent 在父級(jí)窗口中打開文件,常用于框架頁面
_top 在頂層窗口中打開文件,常用語框架頁面
字符集：
charset=utf-8
Gb2312 簡(jiǎn)單中文字符集, 最常用的中文字符
Gbk 簡(jiǎn)繁體字符集, 中文字符集
Big5 繁體字符集, 臺(tái)灣等等
Utf-8 世界性語言的字符集
ANSI編碼格式編碼格式的擴(kuò)展字符集有g(shù)b2312和gbk
單位問題：
HTML屬性值數(shù)值型的一般不帶單位, CSS必須帶單位;
強(qiáng)制刷新
ctrl+F5
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
