diff --git a/README.md b/README.md new file mode 100644 index 0000000..53950b5 --- /dev/null +++ b/README.md @@ -0,0 +1,24 @@ +# 前端(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"); +``` \ No newline at end of file diff --git a/前端_基礎HTML/README.md b/前端_基礎HTML/README.md index 4f28805..0e88fae 100644 --- a/前端_基礎HTML/README.md +++ b/前端_基礎HTML/README.md @@ -1,29 +1,5 @@ -# 前端(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"); -``` -## -## 教學開始 +# 基礎網頁 ### 先看全部程式碼 ```