目錄
一、DOM概述：
1.節點Node：
2.節點Node屬性：
innerHTML 屬性：
nodeType 屬性：
nodeName 屬性：
nodeValue 屬性：
二、DOM window 物件：
window物件屬性：
window物件方法：
三、incident事件：
1.事件概述：
2.事件句柄 (Event Handlers)：
一、DOM概述：
DOM，全稱Document Object Model檔案物件模型，JavaScript通過DOM來操作HTML頁面中的元素，進而控制頁面效果，
- 檔案：表示整個HTML頁面
- 物件：將網頁中的每一部分都轉換為了一個物件
- 模型：使用模型來表示物件間的關系，方便我們獲取物件
1.節點Node：
節點Node，是構成HTML檔案的最基本單元，常用節點：
- 檔案節點：整個HTML檔案
- 元素節點：HTML檔案中的HTML標簽
- 屬性節點：元素的屬性
- 文本節點：HTML標簽中的文本內容
2.節點Node屬性：
innerHTML 屬性：
獲取元素內容的最簡單方法是使用 innerHTML 屬性，innerHTML 屬性對于獲取或替換 HTML 元素的內容很有用，
nodeType 屬性：
nodeType 屬性回傳節點的型別，nodeType 是只讀的，
nodeName 屬性：
nodeName 屬性規定節點的名稱，nodeName 始終包含 HTML 元素的大寫字母標簽名，
- nodeName 是只讀的
- 元素節點的 nodeName 與標簽名相同
- 屬性節點的 nodeName 與屬性名相同
- 文本節點的 nodeName 始終是 #text
- 檔案節點的 nodeName 始終是 #document
nodeValue 屬性：
nodeValue 屬性規定節點的值，
- 元素節點的 nodeValue 是 undefined 或 null
- 文本節點的 nodeValue 是文本本身
- 屬性節點的 nodeValue 是屬性值
二、DOM window 物件：
瀏覽器已經為我們提供了檔案節點物件，window，可以在頁面中直接使用，檔案節點代表整個網頁，
window物件屬性：
window物件方法：
三、incident事件：
1.事件概述：
事件就是檔案或者瀏覽器視窗中發生的一些特定的互動瞬間，JavaScript與HTML之間的互動是通過事件實作的，對于Web應用來說，有下面這些代表性的事件：點擊某個元素，將滑鼠移動至某個元素上方，按下鍵盤某個鍵等等，
2.事件句柄 (Event Handlers)：
HTML 4.0 的新特性之一是能夠使 HTML 事件觸發瀏覽器中的行為，比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript，下面是一個屬性串列，可將之插入 HTML 標簽以定義事件的行為，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="but01" onclick="console.log('按鈕01被單擊！')"> 按鈕01 </button>
<button id="but02"> 按鈕02 </button>
</body>
<!-- 引入外部JavaScript代碼 -->
<script type="text/javascript" src="demo.js"></script>
</html>// 通過document物件獲取到HTML頁面中的按鈕元素進行事件系結：
var but02 = document.getElementById("but02");
console.log(but02)
// 事件系結：
but02.onclick = function(){
console.log("按鈕02被單擊！");
};
瀏覽器加載頁面順序：自上而下的加載，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/401662.html
標籤：其他
上一篇：給網站添加訪問地圖3d版，平面版
下一篇：React Hooks介紹