首先我們要了解DOM 的概念!
DOM 全名為: Document Object Model
文檔物件模型 (DOM) 是提供我們寫程式的一種介面，可讓腳本語言（如 JavaScript）訪問網頁的結構和內容。
DOM 每一層都有自己的節點(Node)，每個節點都有屬於自己的物件。
我們能透過DOM內建的屬性與方法去讀取或更改內容。
我們可以看到 Document 在最上層的級別，到下面的節點都有自己的子孫。
- Document 本身就是一個document node
- 所有的HTML elements也都是element nodes
- 所有的HTML attributes也都是attribute nodes
- 在HTML element內的text內容也是text node
- 所有的comments也都是comment nodes
用DOM Tree 來解釋的話。
甚麼是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]DOM HTML 環境
DOM 環境配置
**<script src="qurey.js"></script>**
以上一段程式碼，可以放在 <head> 裡，或是 <body> 裡。
但是在 DOM 裡，此段 <script src="qurey.js"></script> 程式碼必須放在 </body> 前面。
- 網頁瀏覽器一打開，HTML 程式碼會一行一行執行，HTML 標籤由上到下都解析成 DOM 節點，才可以使用 JavaScript 去抓取裡頭的內容。
若把 <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>JavaScript 篩選器
// 選取網頁上的元素 css 選擇器 .header 是層級
const q2_head = document.querySelector('.header');
const qh1 =document.querySelector('h1');
const link_e = document.querySelector('.link');網頁瀏覽器內執行
q2_head
qh1
link_e
