README
This commit is contained in:
parent
9f6b1d9340
commit
4938da78fb
24
README.md
Normal file
24
README.md
Normal file
|
@ -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");
|
||||||
|
```
|
|
@ -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");
|
|
||||||
```
|
|
||||||
##
|
|
||||||
## 教學開始
|
|
||||||
### 先看全部程式碼
|
### 先看全部程式碼
|
||||||
```
|
```
|
||||||
<!--CSS的部分-->
|
<!--CSS的部分-->
|
||||||
|
|
Loading…
Reference in New Issue
Block a user