/

在處理 DOM 時，時間的重要性

在處理 DOM 時，時間的重要性

在與我的編程訓練班學生一起工作時，我幫助了其中一些人解決了一個問題：時間。

特別是，有一件事起初可能並不明顯。

當您存取 DOM 元素的值並將其存儲到變量中時，當 DOM 元素更改時，該變量將 不會 更新為新值。

假設您在表單中有一個輸入字段 <input id="temperature">，並以以下方式獲取其值：

1
const temperature = document.querySelector('input#temperature').value

temperature 變數會獲取瀏覽器在執行此語句時輸入字段的狀態，並且值將永遠保持不變。

這就是為什麼您不能像這樣操作：

1
2
3
4
5
6
const temperature = document.querySelector('input#temperature').value

document.querySelector('form')
 .addEventListener('submit', event => {
 //將溫度值發送到服務器
})

而您需要在提交表單時訪問溫度值：

1
2
3
4
5
document.querySelector('form')
 .addEventListener('submit', event => {
 const temperature = document.querySelector('input#temperature').value
 //將溫度值發送到服務器
})

或者，您可以將輸入字段的 引用 存儲在變量中，然後在提交表單時使用它來訪問其值：

1
2
3
4
5
6
const temperatureElement = document.querySelector('input#temperature')
document.querySelector('form')
 .addEventListener('submit', event => {
 const temperature = temperatureElement.value
 //將溫度值發送到服務器
})

tags: [“DOM”, “JavaScript”, “timing”]