百度文庫的DOM介紹完全看不明白，能不能用生動形象簡明易懂舉例比喻的方法給我解釋下什麼是DOM，有什麼用，怎麼學。
&
&&&周杰倫&
&
&window.onload = function(){document.getElementById("3年2班").innerHTML="馬上到校長室來";}&&&=======================DOM是Document Object Model的英文縮寫，翻譯過來是文檔對象模型，提供給Javascript用來動態修改文檔狀態…
例如上面這個例子…
參考一下我的另一篇回答：http://www.zhihu.com/question/33453164/answer/56549408
就是將XML（或者HTML）內的節點定義成基本統一的對象數據可以供程序語言（如javaScript）控制的技術規範。
1 什麼是 DOM
- 你可以把 DOM 看成節點
- 上圖是一個 html 文件，也就是網頁的結構。
- html 標籤是一個節點（Node）。
- head、title、body、p 標籤都是節點。
- 嵌套其他節點的節點叫做父節點。
- 被嵌套的節點叫做子節點。
- 同一個父節點下的節點叫做兄弟節點。
- 父親的父親以及上溯十八代祖宗叫做祖先節點。
- 兒子的兒子以及子子孫孫無窮匱也叫做後代節點。
2 DOM 有什麼用
- 通過 DOM 你可以改變網頁。
- 你可以使用 Javascript 語言來操作 DOM 以改變網頁。
- 為了改變網頁，你必須告訴 Javascript 改變哪一個節點。這就是操作 DOM。
- 比如：
在一個網頁中按下 F12，你的瀏覽器會打開控制台（Console），你輸入
var x = document.querySelector("p");
alert(x);
- 第一行就是使用 Javascript 訪問 document 節點，然後訪問節點中的第一個 P 節點，將這個節點傳遞給變數 x。等一下？什麼是 document 節點？ Html 文件里沒這個標籤啊？整個 Html 文件就是 document 節點。
- 第二行通過 alert(x) 使瀏覽器彈出上面紅圈內的內容，提示 x 是一個 html段落對象，p 就是段落，p 的類型就是對象。
- 如果你再輸入
x.innerHTML = "第一次成功的改變了DOM"
就會改變 P 內的內容。
- 如果你為以上內容綁定一個滑鼠動作（事件），比如 onclick （滑鼠點擊事件）：
var x = document.querySelector("p");
x.onclick = function(){
x.innerHTML = "第一次成功的改變了DOM";
}
也就是點擊 P 元素的時候會調用這個 Javascript 函數，將 P 內的文字改變。
既然點擊可以對 DOM 進行改變，那麼舉一反三，所有的事件都可以，划過，滾動等等。
既然點擊可以讓 P 元素有所反饋，那麼舉一反三，就可以讓所有的元素都根據事件進行反饋。
- 當你在知乎的搜索欄輸入數據時，Javascript 捕獲到了你的輸入，對伺服器使用非同步查詢，動態顯示搜索結果。
- 當你向下滑動時，Javascript 捕獲到了你滑動的距離，根據距離的大小來判斷是否改變 DOM，進而讓頂部的導航欄跟隨瀏覽器窗口滾動，免得你回頭去找。
- 當你點擊修改按鈕時，Javascript 捕獲到了這個按鈕的滑鼠點擊事件，反饋了一個可編輯的答案給你。
這回懂了？操作 DOM 可以讓你更改網頁的交互方式。所有網頁的交互都依賴這種 DOM 技術，即使不用 Javascript，也可以使用其他語言來操作 DOM。DOM 是一顆樹，樹枝和樹葉都做了編號，你告訴一個腳本，一個函數去尋找哪一個枝幹的哪一個葉子，對這個葉子做什麼改變。
3 怎麼學習 DOM
- 練習，練習，練習。
- document.getElementById("wonb")，訪問 id 為 wonb 的節點。
- document.getElementsByClassName("yesninb")，訪問 class 為 yesninb 的節點。注意，class 在 DOM 中允許出現多次（廢話這就是 class 存在的意義），因此哪怕只有一個 class 為 yesninb 的節點，返回的也是一個數組。
- 既然是數組，如果你將它傳遞給 var y，那麼你訪問這唯一的該死的節點時，就要使用 y[0]，而不是 y，因為 y 代表的是數組而不是它其中的元素。
4 如果你看懂了
- 你可以隨便搜索一下 DOM，結合自己的 html 文件練習一下操作常用 DOM 節點的方式。
- W3C 等入門網站介紹了常用的 DOM 方法。
- 多做。看一個方法，實踐一下。
5 如果你看不懂
- 去學 HTML ， 以及 Javascript 的前三章。
6 進階
- Javascript 不能夠真正改變 DOM，它僅僅是改變呈現內容，當你刷新的時候就會發現我靠這怎麼他媽的什麼都還原了。
- 但是你可以把這些改變用請求的方式傳遞給後端語言介面，由後端語言比如 PHP Python Java Node等來進行後續的操作，它們接到你的請求之後就去修改伺服器數據，這樣改變就生效了。
- 但是用戶的交互比如彈窗、滑過變色等等根本沒必要讓伺服器也跟著摻和，why? 因為交互只是暫時的，用完了，還要變成默認的，不需要保存到伺服器，只要保證交互的時候有反饋就行了。
- 這就是前端。
- HTML 表達靜態結構（網頁有哪些元素，每個元素代表什麼意義，元素包含了什麼內容）
- CSS 呈現美化（元素的顏色，形狀，布局）
- Javascript 負責動態交互（操作 DOM，使用 Ajax 進行非同步刷新，與伺服器交互）
你種一棵小樹，給每一片葉子做標誌，然後從樹根開始找到每一片唯一的葉子。這就是DOM
轉載自：XML DOM解析 基礎概念 - 聖騎士wind - 博客園
W3C制定了一套書寫XML分析器的標準介面規範——DOM
應用程序開發過程中，應用程序不是直接對XML文檔進行操作的，而是首先由XML分析器對XML文檔進行分析。
然後，應用程序通過XML分析器所提供的DOM介面或SAX介面對分析結果進行操作，從而間接地實現了對XML文檔的訪問。
DOM介紹 優缺點分析
DOM: Document Object Model 文檔對象模型。
在應用程序中，基於DOM的XML分析器將一個XML文檔轉換成一個對象模型的集合（通常稱DOM樹），應用程序通過對這個對象模型的操作，來實現對XML文檔數據的操作。
通過DOM介面，應用程序可以在任何時候訪問XML文檔中的任何一部分數據，因此，這種利用DOM介面的機制也被稱作隨機訪問機制。
DOM樹所提供的隨機訪問方式給應用程序的開發帶來了很大的靈活性，它可以任意地控制整個XML文檔中的內容。
然而，由於DOM分析器把整個XML文檔轉化成DOM樹放在了內存中，因此，當文檔比較大或結構比較複雜時，對內存的需求就比較高。
而且，對於結構複雜的樹的遍歷也是一項耗時的操作。
所以，DOM分析器對機器性能的要求比較高，實現效率不十分理想。
由於DOM分析器所採用的樹結構的思想與XML文檔的結構相吻合，同時鑒於隨機訪問所帶來的方便，因此，DOM分析器還是有很廣泛的應用價值的。
DOM的組成
對於XML應用開發來說，DOM就是一個對象化的XML數據介面，一個與語言無關、與平台無關的標準介面規範。
DOM定義了HTML文檔和XML文檔的邏輯結構，給出了一種訪問和處理這兩種文檔的方法。
文檔代表的是數據，而DOM則代表了如何去處理這些數據。
作為W3C的標準介面規範，目前，DOM由三部分組成，包括：核心（core）、HTML介面和XML介面。
核心部分是結構化文檔比較底層對象的集合，這一部分所定義的對象已經完全可以表達出任何HTML和XML文檔中的數據了。
HTML介面和XML介面兩部分則是專為操作具體HTML文檔和XML文檔所提供的高級介面。
DOM樹
一個XML文檔及其所對應的DOM樹如下：
&
&
&
&Harry Potter&</title&><br />
&J K. Rowling&</author&><br />
&<year&>2005&</year&><br />
&<P>29.99&</price&>
&</book&></p>
<p> &<book category="cooking"><br />
&<title lang="en">Everyday Italian&</title&><br />
&Giada De Laurentiis&</author&><br />
&<year&>2005&</year&><br />
&<P>30.00&</price&>
&</book&></p>
<p> &<book category="web"><br />
&<title lang="en">Learning XML&</title&><br />
&Erik T. Ray&</author&><br />
&<year&>2003&</year&><br />
&<P>39.95&</price&>
&</book&></p>
<p> &<book category="web"><br />
&<title lang="en">XQuery Kick Start&</title&><br />
&James McGovern&</author&><br />
&Per Bothner&</author&><br />
&Kurt Cagle&</author&><br />
&James Linn&</author&><br />
&Vaidyanathan Nagarajan&</author&><br />
&<year&>2003&</year&><br />
&<P>49.99&</price&>
&</book&></p>
<p>&</bookstore&><br />
</code></pre>
<p></P></P></p>
<p><center> <script src="/336-5.js"></script></center></p>
<figure><P style="text-align:center;"><img src="//i1.wp.com/pic3.zhimg.com/50/v2-f33511cb53b1dcea32d864da0773b13c_hd.jpg" dw="577" dh="291" w="577" data-original="https://pic3.zhimg.com/v2-f33511cb53b1dcea32d864da0773b13c_r.jpg"></P></figure>
<p></P><P> 要嚴格區分XML文檔樹中的根節點與根元素節點：</P><P> 文檔（根節點）和根元素節點是兩回事。</P><P> 根節點代表整個文檔，是我們解析XML文檔的入口，通過它獲取到Document對象；</P><P> 根元素節點代表XML文檔的根元素，必須要在獲得Document對象之後才能一層一層地去訪問它的元素。</P></p>
<h2><b>DOM模型結構</b></h2>
<p><P> 最常見的節點類型：</P><P><b>元素</b>：元素是XML的基本構建。</P><P> 元素可以有其他元素、文本節點或兩者兼有來作為其子節點。</P><P> 元素節點還是可以有屬性的唯一類型的節點。</P></p>
<p><center> <script src="/336-5.js"></script></center></p>
<p><P><b>屬性</b>：屬性節點包含關於元素節點的信息，但實際上，不認為它是元素的子節點。</P><P><b>文本</b>：確切來講，文本節點是文本。它可以包含許多信息或僅僅是空白。</P><P><b>文檔（根節點）</b> ：文檔節點是整個文檔中所有其他節點的父節點。（根節點不等於根元素節點）。</P><P> 較不常見的節點類型：CDATA、注釋、處理指令。</P></p>
<h2><b>DOM的四個基本介面</b></h2>
<p><P><b>在DOM介面規範中，有四個基本的介面：Document, Node, NodeList, NamedNodeMap。</b></P></p>
<h2><b>Document</b></h2>
<p><P> Document介面是對文檔進行操作的入口，它是從Node介面繼承過來的。 </P></p>
<h2><b>Node</b></h2>
<p><P> Node介面是其他大多數介面的父類。</P><P> 在DOM樹中，Node介面代表了樹中的一個節點。</P></p>
<h2><b>NodeList</b></h2>
<p><P> NodeList介面是一個節點的集合，它包含了某個節點中的所有子節點。</P><P> 它提供了對節點集合的抽象定義，並不包含如何實現這個節點集的定義。</P></p>
<p><center> <script src="/336-5.js"></script></center></p>
<p><P> NodeList用於表示有順序關係的一組節點，比如某個節點的子節點序列。</P><P> 在DOM中，NodeList的對象是<b>live的</b>，對文檔的改變，會直接反映到相關的NodeList對象中。</P></p>
<h2><b>NamedNodeMap</b></h2>
<p><P> NamedNodeMap介面也是一個節點的集合，通過該介面，可以建立節點名和節點之間的一一映射關係，從而利用節點名可以直接訪問特定的節點，這個介面主要用在屬性節點的表示上。</P><P> 儘管NamedNodeMap所包含的節點可以通過索引來進行訪問，但是這只是提供了一種枚舉方法，NamedNodeMap所包含的節點集中節點是無序的。</P><P> 與NodeList相同，在DOM中，NamedNodeMap對象也是<b>live的</b>。</P></P></p>
<hr />XML（或HTML）就是一個<b>層次型</b>的文件格式，裡面有元素，屬性，文本等內容。如下面的XML示例：</P><P><code class="language-xml">&<?xml version="1.0" encoding="UTF-8"?&></p>
<p>&<bookstore&></p>
<p>&<book category="COOKING"&><br />
&<title lang="en"&>Everyday Italian&</title&><br />
&Giada De Laurentiis&</author&><br />
&<year&>2005&</year&><br />
&<P>30.00&</price&>
&</book&></p>
<p>&<book category="WEB"&><br />
&<title lang="en"&>Learning XML&</title&><br />
&Erik T. Ray&</author&><br />
&<year&>2003&</year&><br />
&<P>39.95&</price&>
&</book&></p>
<p>&</bookstore&><br />
</code></pre>
<p><P>（示例來源：http://www.w3schools.com/xquery/xquery_example.asp）</P><P>但是要修改XML文件添加一個元素或者修改一個元素的文本不是很容易的事情。</P><P>DOM就是XML文檔在內存中的表示形式，如下圖所示：</P></p>
<p><center> <script src="/336-5.js"></script></center></p>
<p></P></p>
<figure><P style="text-align:center;"><img src="//i1.wp.com/pic4.zhimg.com/50/a92533fd47b29c816efd3b4cf6cd614e_hd.jpg" dw="486" dh="275" w="486" data-original="https://pic4.zhimg.com/a92533fd47b29c816efd3b4cf6cd614e_r.jpg"></P></figure>
<p></P>（圖片來源： http://www.w3schools.com/dom/）<P>這樣便於通過編程的方式對節點進行操作，如獲取元素的文本，獲取屬性的值，增加子元素，修改元素的名稱，增加屬性，刪除屬性，修改屬性的值。</P><P><code class="language-js">xmlDoc=loadXMLDoc("books.xml");</p>
<p>newel=xmlDoc.createElement("edition");</p>
<p>x=xmlDoc.getElementsByTagName("book")[0];<br />
x.appendChild(newel);<br />
</code></pre>
<p><P>（示例來源：http://www.w3schools.com/dom/dom_nodes_add.asp）</P><P>要修改XML的時候，要先將XML載入到內存，形成一個DOM的<b>樹</b>，可以對這個內存中的樹進行操作，然後再寫到文件中。</P>本文的示例都來自W3CSchool，更多示例，請前往：http://www.w3schools.com/dom/default.asp</P></p>
<hr /><P><b>什麼是DOM？</b></P><P>DOM全稱是Document Object Model(文檔對象模型)，是為HTML和XML提供的API。那麼為什麼DOM可以同時提供給HTML和XML編程介面。雖然他們用來標記的標籤不同，但是他們本質的結構是相同的。換句話說，按照DOM的標準，HTML和XML都是以標籤為結點構造的樹結構，DOM將HTML和XML的相同的結構本質抽象出來，然後通過腳本語言，如Javascript，按照DOM里的模型標準訪問和操作文檔內容。</P><P>在Chrome瀏覽器端，單擊右鍵打開View Page Source展示文檔結構。通過這種方式可以直觀的看到文檔當前的內容和結構。DOM則不同，它是提供一個API給編程語言，比如Javascript，通過一系列抽象的方法操作文檔的內容，結構和樣式。這有點想SQL和Excel，Excel可以直觀的展示數據的結構，而SQL是一個負責操作數據的工具，幫助組織，更新，添加和刪除數據內容。</P><b>DOM 和 HTML是一回事嗎？</b><P>就像很多人把JQuery和Javascript的本質搞混一樣，DOM和HTML也完全不是一回事，DOM是一個API，HTML(Hyper Text Markup Language)則是一種標記語言，HTML在DOM的模型標準中被視為對象，DOM只提供編程介面，卻無法實際操作HTML裡面的內容。</P><P>但是前端工程師，一般在瀏覽器端操作HTML。每個Web瀏覽器都會使用DOM，所以頁面可以被腳本語言訪問。而所有的瀏覽器都是以Javascript作為默認的腳本語言。所以HTML在瀏覽器端基本上可以直接通過DOM模型來操作，通過&<script&>標籤載入或者直接插入Javascript腳本，通過DOM直接操作瀏覽器端的HTML文件。正是這種無縫融合，導致DOM和HTML的概念很容易混淆。</P><b>DOM 和 JavaScript什麼關係？</b><P>Javascript可以通過DOM直接訪問和操作網頁文檔的內容，一開始，DOM是為方便Javascript操作設計的API。但其實發展到後來，他們是兩個獨立的個體。而且Javascript不是唯一可以使用DOM的編程語言，比如python也可以訪問DOM。所以DOM不是提供給Javascript的API，也不是Javascript里的API。但JavaScript可以通過DOM訪問和操作HTML和XML文檔內容。</P></P></p>
<hr /><P>看了不少答案，心中漸漸雲霧頓開，我就簡單用類比的方式答一下：</P><P>如果將文檔的內容視為一棟辦公樓，那DOM就是一種對辦公樓內空間分配的標準，它規定了，這個辦公樓的空間，應該是先分樓層，再分房間的方式，方便訪客找到這個房間。</P><P>有什麼用？舉例說明：你要去一個叫201的房間（獲取對象），你怎麼去呢? 用DOM的方法，你只需要走到二層，然後到第一個房間就行了，而你是用走，爬，甚至跳舞的方式過去（即：使用不同的編程語言）都沒關係，你只要按照DOM的規定，最終都能找到這個房間。</P><P>全世界的房子都是分樓層，再分房間的結構，於是，你去哪個辦公樓找人，你都能通過上某個樓層、按照房間的排列順序去找到某個房間。</P>同理</P>全世界的網頁內容都是DOM的結構，於是，你去找網頁中的某個對象時，都能通過某個標籤的某個子標籤找到某個對象。</P>不知道說清楚沒有，歡迎補充！</P></p>
<hr /><P>看了這麼複雜的解釋我都尷尬，最好理解的就是定義啊：W3C 文檔對象模型 （DOM） 是中立於平台和語言的介面，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。再簡單一點說就是一個對網頁內容進行修改的介面</P></P></p>
<hr /><P><b>牢記：站高一個維度去理解問題 ！</b></P><P>為了理解DOM，我們至少需要站在瀏覽器的角度來思考。</P><P>DOM概念本身很簡單，請先完全跟著我的思路來：</P></p>
<ol>
<li>普通文檔（*.txt）和HTML/XML文檔（*.html/*.xml）的區別僅僅是因為後者是有組織的結構化文件；</li>
<li>瀏覽器將結構化的文檔以樹的數據結構讀入瀏覽器內存，並將每個樹的子節點定義為一個NODE（想像這顆樹，從根節點到葉子節點都被建模為一個NODE對象）；</li>
<li>這每個節點（NODE）都有自己的屬性（名稱、類型、內容...）；</li>
<li>NODE之間有層級關係（parents、child、sibling...）；</li>
<li>以上已經完成文檔的建模工作（將文檔內容以樹形結構寫入內存），此時再編寫一些方法來操作節點（屬性和位置信息），即為NODE API。</li>
</ol>
<p><P>抽象一下：</P></p>
<ul>
<li>DOM是一種將HTML/XML文檔<b>組織成對象模型</b>的<b>建模過程</b>；</li>
<li>DOM建模重點在於<b>如何解析HTML/XML文檔</b>和開放符合DOM介面規範的<b>節點操作API介面</b>。</li>
</ul>
<p><P>再抽象一下：</P></p>
<ul>
<li>解析文檔，建模成對象模型，開放API介面。</li>
</ul>
<p><P>最後：</P></p>
<ul>
<li>DOM：<i>Document Object Model </i>文檔對象模型</li>
</ul>
<p><P>再回顧下整個過程，每個步驟都可以問自己幾個問題，比如：DOM到底是建模過程，還是最後建的那個模型，還是指操作節點的API介面呢，還是...？</P><P></P>以上是站在瀏覽器的角度思考DOM，你還可以站在瀏覽器設計人員、網頁編碼人員等角度考慮：</P></p>
<ul>
<li>DOM跟JavaScript什麼關係？</li>
<ul>
<li>DOM很顯然誕生在瀏覽器，一開始是用JS實現的；</li>
<li>但隨著DOM本身的發展，已經形成規範，你可以用任何一種語言比如Python來解析文檔，生成對像樹，只要滿足DOM標準，包括開放標準的操作介面，那你實現的就是一個DOM。</li>
</ul>
<li>DOM開放的介面如何操作？</li>
<ul>
<li>JS原生介面使用。</li>
<li>JQuery高緯度封裝如何使用。</li>
</ul>
<li>...</li>
</ul>
<p><P>至此，你應該明白了什麼是DOM，甚至明白了為什麼一開始不明白以後如何做，如何舉一反三，甚至還能看出一點如何建立體系化認知的影子。笑</P><P>牢記：站高一個維度去理解問題 ！</P></P></p>
<hr /><P>首先得溫習一點，一般網頁都是用HTML編寫的，而HTML採用標籤 &< &> 聲明各個結構（如下圖），如&<P>這裡是段落&</p&>在瀏覽器中打開就是一段寫著「這裡是段落」的一段話。</P></p>
<figure><P style="text-align:center;"><img src="//i1.wp.com/pic3.zhimg.com/50/v2-9bcc57d1615cf5cca6018c510e4a92ad_hd.jpg" dw="389" dh="172" w="389"></P></figure>
<p><P>同時HTML允許結構的嵌套，也就是說你可以在段落&<P>&</p&>之間插入其它標籤，比如分割線&</p>
<hr/&>。寫網頁（HTML）就好比繪製（罪犯）肖像，分別從頭部和身體兩大部分逐一描述（對應HTML文檔里的head、body），再詳細描述某部分的細節，如頭部可從頭髮、臉部、脖子入手，再詳細點，如臉部可再分眼睛、耳朵、鼻子、嘴巴等去描述（對應 HTML 文檔里的各種層級的嵌套）。我們暫且稱這個被描述的人為小明（後邊會再提到這個人）。</P><P>至此，靜態網頁的編寫就完成了。靜態網頁沒有任何交互行為，相當於一個麻木的人，沒有「反射神經」，怎麼欺負Ta，也不會哭，更不會還手，於是人們引入了 JS（JavaScript）。它的職責就是為了讓頁面「活起來」。</P><P>這時候就可以設置頁面的交互行為了，比如拍打小明的手臂，皮膚會發紫（對應 HTML 文檔中點擊某個按鈕時指定的段落會改變字體顏色）。這就存在一個對象的指定問題：計算機只聽得懂準確詳細的描述語言。剛剛說的「拍打小明的手臂，皮膚會發紫」我們能自動理解成「拍打小明的手臂，手臂上被拍打的皮膚會發紫」，計算機沒那麼聰明呃，不會自動補全，需要你一五一十地告訴它，是手臂上的、被拍打過的皮膚會發紫，而不是全身皮膚(Q_Q)或其它地方。</P><P>OK～到這裡就可以引入 DOM 這個概念了，你可以給某個具體的部位命名，比如皮膚Ⅰ區、皮膚ⅠⅠ區、皮膚ⅠⅠⅠ區、皮膚Ⅳ區……（對應HTML文檔里某個標籤結構聲明 id、class 等）。設置交互行為的時候就可以方便地指出是哪個部分做出什麼反應了（對應HTML文檔里 getElementById 等）。這時候小明就能做複雜的動作，比如敲左膝蓋抬右腳的反常規行為⊙ω⊙。</P></P></p>
<hr /><P>面向對象的思想無處不在！</P><P>要操作html或者xml文檔 首先要獲得對象 有了對象 就有了一切！</P><P>如何拿到能操作文檔的對象？DOM就是這個作用！</P><P>DOM首先將文檔映射解析成一顆倒立的樹，再創建一個document對象。</P><P>有了這個document對象以後 一切都在你手中了。</P></P></p>
<hr /><P><b>DOM</b> 你可以理解為HTML網頁的介面API，供JS調用介面重構網頁。</P><P>通過 JavaScript，您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。</P><P>譬如有時候我們通過javascript取一個標籤（a）的信息會用到下面的代碼： document.getElementsByTagName("a");</P></P></p>
<hr />推薦你一本書，寫的非常好。</P>[DOM Scripting, Web design with the JavaScript and the document object model]( http://book.douban.com/subject/1461786/)</P></p>
<hr /><span style="color:red"><i class="fa fa-paper-plane"></i></span> 推薦閱讀：</div>
<p>※<a target=_blank href=/p20180102220377296/>HTML 是什麼？</a><br />※<a target=_blank href=/p20180101248282550/>移動端開發使用css中使用position將一個div固定瀏覽器底部,會擋住內容,該怎麼完美的解決?</a><br />※<a target=_blank href=/p20180101819581540/>Mac 上最好的網頁編輯工具是什麼？</a><br />※<a target=_blank href=/p20171231837845704/>chrome手機模擬模式的時候，發現頁面會比正常的小很多，然後每次都要去瀏覽器設置調整字體，如何避免?</a><br />※<a target=_blank href=/p20171229540488124/>我想搭建一個網站，請問我需要什麼技術？目前前後端哪一些技術比較流行？有什麼資料可以推薦的嘛？</a></p>
<p>TAG:<a target=_blank href=/tag/前端開發/>前端開發</a> | <a target=_blank href=/tag/HTML/>HTML</a> | <a target=_blank href=/tag/JavaScript/>JavaScript</a> | <a target=_blank href=/tag/XML/>XML</a> | <a target=_blank href=/tag/DOM/>DOM</a> | </p>
<!-- AddThis Advanced Settings above via filter on the_content --><!-- AddThis Advanced Settings below via filter on the_content --><!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons above via filter on the_content --><!-- AddThis Share Buttons below via filter on the_content --><div class="at-below-post addthis_tool" data-url="https://www.getit01.com/p20180103734219998/"></div><!-- AddThis Share Buttons generic via filter on the_content --></div>
<script src="/ce.js"></script>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<div id="footer">
<div class="copyright">
<p> 一點新知 <a href="https://www.getit01.com/"><strong>
GetIt01 </strong></a>
<div style="display:none"><script src="https://s13.cnzz.com/z_stat.php?id=1270562218&web_id=1270562218" language="JavaScript"></script></div>
<br />
</p>
</div>
</div>
</div>
<!--gototop-->
<div id="tbox">
<a target="_blank" id="fb" href="https://www.facebook.com/sharer.php?u=https://www.getit01.com/p20180103734219998/"></a>
</div>
<script data-cfasync="false" type="text/javascript">if (window.addthis_product === undefined) { window.addthis_product = "wpp"; } if (window.wp_product_version === undefined) { window.wp_product_version = "wpp-6.1.1"; } if (window.wp_blog_version === undefined) { window.wp_blog_version = "4.8.22"; } if (window.addthis_share === undefined) { window.addthis_share = {}; } if (window.addthis_config === undefined) { window.addthis_config = {"data_track_clickback":true,"ignore_server_config":true,"ui_atversion":"300"}; } if (window.addthis_layers === undefined) { window.addthis_layers = {}; } if (window.addthis_layers_tools === undefined) { window.addthis_layers_tools = [{"share":{"counts":"each","numPreferredServices":5,"mobile":false,"position":"left","theme":"transparent"},"sharedock":{"counts":"each","numPreferredServices":5,"mobileButtonSize":"large","position":"bottom","theme":"transparent"}},{"sharetoolbox":{"numPreferredServices":5,"counts":"each","size":"32px","style":"fixed","shareCountThreshold":0,"elements":".addthis_inline_share_toolbox_vh9e,.at-above-post"}}]; } else { window.addthis_layers_tools.push({"share":{"counts":"each","numPreferredServices":5,"mobile":false,"position":"left","theme":"transparent"},"sharedock":{"counts":"each","numPreferredServices":5,"mobileButtonSize":"large","position":"bottom","theme":"transparent"}}); window.addthis_layers_tools.push({"sharetoolbox":{"numPreferredServices":5,"counts":"each","size":"32px","style":"fixed","shareCountThreshold":0,"elements":".addthis_inline_share_toolbox_vh9e,.at-above-post"}}); } if (window.addthis_plugin_info === undefined) { window.addthis_plugin_info = {"info_status":"enabled","cms_name":"WordPress","plugin_name":"Share Buttons by AddThis","plugin_version":"6.1.1","plugin_mode":"WordPress","anonymous_profile_id":"wp-465109ee2f0e70a26b602727e258dac0","page_info":{"template":"posts","post_type":""},"sharing_enabled_on_post_via_metabox":false}; }
(function() {
var first_load_interval_id = setInterval(function () {
if (typeof window.addthis !== 'undefined') {
window.clearInterval(first_load_interval_id);
if (typeof window.addthis_layers !== 'undefined' && Object.getOwnPropertyNames(window.addthis_layers).length > 0) {
window.addthis.layers(window.addthis_layers);
}
if (Array.isArray(window.addthis_layers_tools)) {
for (i = 0; i < window.addthis_layers_tools.length; i++) {
window.addthis.layers(window.addthis_layers_tools[i]);
}
}
}
},1000)
}());
</script><script type='text/javascript' src='https://s7.addthis.com/js/300/addthis_widget.js?ver=4.8.22#pubid=wp-465109ee2f0e70a26b602727e258dac0'></script>
<script type='text/javascript' src='https://www.getit01.com/wp-content/themes/Qu/js/loostrive.js?ver=1.0'></script>
<script type='text/javascript' src='https://www.getit01.com/wp-includes/js/wp-embed.min.js?ver=4.8.22'></script>
</body></html>
<!-- Dynamic page generated in 0.128 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2024-07-04 01:59:51 -->
<!-- super cache -->
