使用 js 操作頁面元素的方法
DOM(文件物件模型) 是瀏覽器對 html 檔案的描述方式DOM API 是瀏覽器提供給 JavaScript 操作 html 頁面內元素的方式簡而言之, 瀏覽器提供了一些內建函式來讓我們操作頁面(增刪改查)
查詢元素
查詢元素使用 document.querySelector() 函式document 是整個文件(包含了 html), 可以理解為 html 的父節點這個函式的引數是一個選擇器(和 CSS 選擇器一樣)選擇器語法和 CSS 選擇器一樣, 現在只用 3 個基礎選擇器元素選擇器
例如
// 元素選擇器
var body = document.querySelector('body')
// class 選擇器, 用的是 .類名
var form = document.querySelector('.login-form')
// id 選擇器, 用的是 #id
var loginButton = document.querySelector('#id-button-login')
設定特定屬性值
例如
user.value = 'set value'
修改
用 insertAdjacentHTML 給一個元素新增子元素
// 這裡我們給 .login-form 新增一個 h1 標籤
var form = document.querySelector('.login-form')
// 第一個引數表示插入的位置, 'beforeend' 表示插入在結束之前(也就是新增到標籤末尾)
// 第二個引數是你想插入的 html 內容
form.insertAdjacentHTML('beforeend', '<h1 class="gua-h1">你好</h1>')
刪除元素
var pwd = document.querySelector('#id-input-password')
pwd.remove()
// 有一個常見的需求是在 字典/陣列 和 字串 之間相互轉換
// 這個過程叫做 序列化/反序列化
// 在 js 中, 序列化使用 JSON 資料格式
// 全稱 JavaScript Object Notation (js 物件標記)
// 這個格式已經是現在用於網際網路資料交換的事實標準格式了
// python 也有內建的標準庫進行這種轉換
js 中轉換方式如下
// 注意 typeof 語句可以檢視一個變數的型別
var s = JSON.stringify([1, 2, 3, 4])
log('序列化後的字串', typeof s, s)
var a = JSON.parse(s)
log('反序列化後的陣列', typeof a, a)
事件
// 事件是用來處理響應的一個機制
// 這個響應可以來自於使用者(點選, 滑鼠移動, 滾動), 也可以來自於瀏覽器
// 下面的連結描述了所有事件, 不過我們先從最常用的事件學起, click 事件
// https://developer.mozilla.org/en-US/docs/Web/Events
//
// 常用例子, 給按鈕新增一個點選的事件
// 1, 獲得按鈕
var loginButton = document.querySelector('#id-button-login')
// 2, 宣告一個函式, 用於在按鈕點選後執行
var clicked = function() {
log('按鈕被點選到了')
}
// 3, 新增事件, 使用 addEventListener 函式, 它有兩個引數
// 第一個是事件的名字, 'click' 表示點選
// 第二個是事件發生後會被自動呼叫的函式
loginButton.addEventListener('click', clicked)
// 新增完成, 可以自己在瀏覽器試試, 記得開啟 console
例子
/*
1, 給 add button 繫結事件
2, 在事件處理函式中, 獲取 input 的值
3, 用獲取的值 組裝一個 todo-cell HTML 字串
4, 插入 todo-list 中
*/
var log = function() {
console.log.apply(console, arguments)
}
var e = function(sel) {
return document.querySelector(sel)
}
var todoTemplate = function(todo) {
var t = `
<div class="todo-cell">
<button class="todo-delete">刪除</button>
<span>${todo}</span>
</div>
`
return t
/*
上面的寫法在 python 中是這樣的
t = """
<div class="todo-cell">
<button class="todo-delete">刪除</button>
<span>{}</span>
</div>
""".format(todo)
*/
}
var insertTodo = function(todo) {
var todoCell = todoTemplate(todo)
// 插入 todo-list
var todoList = e('.todo-list')
todoList.insertAdjacentHTML('beforeend', todoCell)
}
var b = e('#id-button-add')
// 注意, 第二個引數可以直接給出定義函式
b.addEventListener('click', function(){
log('click')
var input = e('#id-input-todo')
var todo = input.value
// log('todo ', todo)
insertTodo(todo)
})
/*
給 刪除 按鈕繫結刪除的事件
1, 繫結事件
2, 刪除整個 todo-cell 元素
*/
var todoList = e('.todo-list')
// 事件響應函式會被傳入一個引數, 就是事件本身
todoList.addEventListener('click', function(event){
// log('click todolist', event)
// 我們可以通過 event.target 來得到被點選的元素
var self = event.target
// log('被點選的元素是', self)
// 通過比較被點選元素的 class 來判斷元素是否是我們想要的
// classList 屬性儲存了元素的所有 class
// 在 HTML 中, 一個元素可以有多個 class, 用空格分開
// log(self.classList)
// 判斷是否擁有某個 class 的方法如下
if (self.classList.contains('todo-delete')) {
log('點到了 刪除按鈕')
// 刪除 self 的父節點
// parentElement 可以訪問到元素的父節點
self.parentElement.remove()
} else {
// log('點選的不是刪除按鈕******')
}
})
// var ajax = function(method, path, data, reseponseCallback) {
// var r = new XMLHttpRequest()
// // 設定請求方法和請求地址
// r.open(method, path, true)
// // 設定傳送的資料的格式
// r.setRequestHeader('Content-Type', 'application/json')
// // 註冊響應函式
// r.onreadystatechange = function() {
// if(r.readyState === 4) {
// reseponseCallback(r)
// }
// }
// // 傳送請求
// r.send(data)
// }
//
// var loadTodos = function() {
// var baseUrl = 'localhost:3000'
// var method = 'POST'
// var path = '/api/todo/all'
// var url = baseUrl + path
// var data = 'todo=吃瓜'
// ajax(method, url, data, function(r){
// console.log('收到伺服器響應的資料', r)
// // insertTodos(todos)
// })
// }