Table of Contents

前端(Html-Javascript-Css)

介紹

三大元素構成：HTML、CSS、JavaScript
HTML是一種DOM元素
這邊先以如何用JS去跟HTML做溝通

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

前端(Html-Javascript-Css)

介紹

三大元素構成：HTML、CSS、JavaScript

HTML ：網頁內容的描述語言，負責建立網頁的主結構。
CSS ：網頁外觀形態的描述語言，負責美化網頁。
JavaScript ：一門函式先行的直譯式程式語言，經常用在呈現網頁動態效果。負責描述網頁如何與用戶互動。

HTML是一種DOM元素

是 HTML、XML 和 SVG 文件的程式介面。它提供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。DOM 提供了文件以擁有屬性與函式的節點與物件組成的結構化表示。節點也可以附加事件處理程序，一旦觸發事件就會執行處理程序。 本質上，它將網頁與腳本或程式語言連結在一起。
DOM 是一個將 HTML 文件以樹狀的結構來表示的模型，而組合起來的樹狀圖，我們稱之為「DOM Tree」。

這邊先以如何用JS去跟HTML做溝通

透過 DOM API 取得節點

// 根據傳入的值，找到 DOM 中 id 為 'xxx' 的元素。
document.getElementById("xxx"); 
// 針對給定的 tag 名稱，回傳所有符合條件的 NodeList 物件 [註1]
document.getElementsByTagName("xxx");

// 針對給定的 class 名稱，回傳所有符合條件的 NodeList 物件。
document.getElementsByClassName("xxx");

// 針對給定的 Selector 條件，回傳第一個 或 所有符合條件的 NodeList。
document.querySelector("xxx");
document.querySelectorAll("xxx");