首先我們要了解DOM 的概念!
DOM 全名為: Document Object Model
文檔物件模型 (DOM) 是提供我們寫程式的一種介面，可讓腳本語言（如 JavaScript）訪問網頁的結構和內容。
DOM 每一層都有自己的節點(Node)，每個節點都有屬於自己的物件。
我們能透過DOM內建的屬性與方法去讀取或更改內容。
我們可以看到 Document 在最上層的級別，到下面的節點都有自己的子孫。
用DOM Tree 來解釋的話。
當我們打開HTML 是以下範例
<body>
<div>
<p style="color: purple;">Paragraph text</p>
</div>
<div>
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
</div>
</body>body
\_ div
| \_ p
| \_ [text]
| |
| \_ [attribute]
\_ div
\_ ul
\_ li
| \_ [text]
|
\_ li
\_ [text]**<script src="qurey.js"></script>**
以上一段程式碼，可以放在 <head> 裡，或是 <body> 裡。
但是在 DOM 裡，此段 <script src="qurey.js"></script> 程式碼必須放在 </body> 前面。
若把 <script src="qurey.js"></script> 程式碼放在 <head> 裡，就抓取不到 HTML 的節點。(因為 HTML 標籤節點還沒解析出來)
<body>
<h1> 這是海景第一排</h1>
<h2 class="header"> 就是我啊! </h2>
<a href="https://products.aspose.app/cells/zh-hant/editor/html" class="link">這個連結給它點下去!</a>
<script src="JS\qurey.js"></script>
</body>// 選取網頁上的元素 css 選擇器 .header 是層級
const q2_head = document.querySelector('.header');
const qh1 =document.querySelector('h1');
const link_e = document.querySelector('.link');q2_head
qh1
link_e
import 與 export 在Node.js 有提到其用法: Node.js require、module以及exports 模組設定 - Hugo Habor 每一個Javascript檔案可當作獨立模組系統(ES Module) 1. Module（模組）…
作者今天遇到一個很奇怪的問題 寫程式寫到一半... 點擊應用程式時... 怎麼都跳不出畫面... 後來查詢了一下是Reg註冊可能被微軟更新給搞掉了... 文章資訊來源: 【以解決】各位.exe檔案打不開，不要相信"在 Windows 7 或 Windows Vista 中無法打開 .EXE 檔案"這篇文章…
Node.js可以提供你很多模組，今天來探索如何使用 Node.js 的 http 模組來架設一個簡單的伺服器。 本篇使用模組require 載入你所需要的模組。這次我們使用'http' 模組來創造一個簡單的server。 資料參考 Node.js - createServer 起手式 - iT…
針對Node.js來談談 require、module以及exports 模組設定。這些概念允許開發者將大型程序分解成小的、可管理的、可重用的部分，稱為模塊。 下面將逐一介紹這些概念，以及它們如何與 JavaScript 關聯。 An Essential Guide to Node.js Modules (javascripttutorial.net) 1. Module（模組）…
像是很多專案必須讀取國家資料中心的metadata，許多檔案格式為CSV、JSON、Html可以利用網頁技術去爬蟲；拿一個範例來嘗試看看就知道這些語法的實際用途。 [主題週]專題報導-開放資料 (Open Data)相關議題與應用 (114230) - Cool3c 在這裡我們使用台北市資料大平台 UBike2.0 作為資料依據! 目的 來抓取空位數量 >15， 抓取空位數量 <15。…