Open zuppachu opened 6 years ago
跑在哪裡,就能夠操控跟哪邊有關的東西,目前有兩個:
什麼是 DOM? DOM 為 HTML 跟 XML 的程式界面。由瀏覽器提供,我們可以用 DOM 跟網頁進行互動! 它可以讓程式語言來操縱 HTML 的結構 (structure)、樣式 (style)、或內容 (content)。然後它並不僅侷限於 JavaScript,只是目前主流、最能跑在 browser 上是 JavaScript。
2018/10/26突然想到,JS 可以利用 DOM 的語法,對 HTML 伸出魔爪,抓到 HTML 的關鍵字對他們進行操作,以便設計出互動性的網頁(?
從 The Net Ninja 可再細分以下項目:
備註:可參考關於 DOM 完整系列。
什麼 Document? 就是網頁(= HTML Document)。
什麼是 Object? 就是所有在 HTML 裡面的元素(element),如
<head></head>
<body></body>
<p></p>
什麼是 Model? (source: The Net Ninjia)
什麼是 Nodes? 每個我們可以在 Document 上更改的東西就是節點,如:
<style></style>
小結 DOM:
範例如下: (用 JS 去操控 HTML and CSS)
var test = document.getElementById('test'); //選到 id="test" 的元素 test.style.background = 'red'; //改變背景顏色為紅色 test.innerText = '12345'; //改變內容
JavaScript 的執行環境:
跑在哪裡,就能夠操控跟哪邊有關的東西,目前有兩個:
DOM (Document Object Model) 文件物件模組
什麼是 DOM? DOM 為 HTML 跟 XML 的程式界面。由瀏覽器提供,我們可以用 DOM 跟網頁進行互動! 它可以讓程式語言來操縱 HTML 的結構 (structure)、樣式 (style)、或內容 (content)。然後它並不僅侷限於 JavaScript,只是目前主流、最能跑在 browser 上是 JavaScript。
從 The Net Ninja 可再細分以下項目:
什麼 Document? 就是網頁(= HTML Document)。
什麼是 Object? 就是所有在 HTML 裡面的元素(element),如
<head></head>
<body></body>
<p></p>
什麼是 Model? (source: The Net Ninjia)
什麼是 Nodes? 每個我們可以在 Document 上更改的東西就是節點,如:
<style></style>
小結 DOM:
範例如下: (用 JS 去操控 HTML and CSS)
Githubissues.