1. 程式人生 > >HTML DOM介紹

HTML DOM介紹

HTML DOM介紹

注:第一篇文,整理自w3school,學習的好網站

1.流程

在這裡插入圖片描述

2.HTML DOM

HTML DOM樹
在這裡插入圖片描述

2.1 什麼是節點

HTML DOM所有事物都是節點

  1. 文件節點: 整個文件是一個文件節點
  2. 元素節點: 每個 HTML 元素是元素節點
  3. 文字節點: HTML 元素內的文字是文字節點
  4. 屬性節點: 每個 HTML元素所擁有的 屬性是屬性節點
  5. 註釋節點: 註釋是註釋節點

2.2 什麼是HTML元素

HTML 文件是由 HTML 元素定義的。
HTML 元素指的是從開始標籤(start tag)到結束標籤(end tag)的所有程式碼。

3.HTML DOM 應用

HTML DOM 是物件 物件就有方法和屬性

3.1屬性

3.1.1 innerHTML 屬性:節點的文字

3.1.2 nodeName 屬性:節點的名稱

在這裡插入圖片描述

3.1.3 nodeValue 屬性:節點的值

在這裡插入圖片描述

3.1.4 nodeType 屬性:節點的型別

在這裡插入圖片描述

3.2方法

在這裡插入圖片描述

3.JS HTML DOM 應用(增刪該查輸出)

3.0 輸出

在這裡插入圖片描述

3.1 增 (五步)

//建立節點
在這裡插入圖片描述
//寫節點內容
在這裡插入圖片描述
//將節點內容寫到哪個節點
在這裡插入圖片描述
//找到已經存在的節點
在這裡插入圖片描述

//把節點寫到找的節點去
在這裡插入圖片描述

3.2 刪 (三步)

//HTML 元素,您必須首先獲得該元素的父元素:
在這裡插入圖片描述


//找到 id=“p1” 的

元素:
在這裡插入圖片描述
//從父元素中刪除子元素
在這裡插入圖片描述

3.3 改

改變HTML 內容
在這裡插入圖片描述
改變 HTML 屬性
在這裡插入圖片描述
改變CSS樣式
在這裡插入圖片描述

3.4查

通過 id 查詢 HTML 元素
在這裡插入圖片描述
通過標籤名查詢 HTML 元素
在這裡插入圖片描述

4 HTML DOM 事件

如需詳情,點選這裡

4.1 格式:事件=JavaScript

4.2 主要介紹的事件:

  • onclick 事件 : 滑鼠點選
  • onchange 事件: 內容改變
  • onload / onunload 事件: 頁面載入/與i出
  • onmouseover / onmouseout 事件: 滑鼠移到/移出
  • onmousedown/onmouseup事件: 滑鼠按住/釋放

5 HTML與Script 程式碼

5.1程式碼連結

程式碼需求點選這裡

5.2程式碼執行器

程式碼執行器連結點選這裡

5.3注意

//將 Script程式碼 放置在HTML最後一個 p標籤 之後
在這裡插入圖片描述