Tầm quan trọng của thời gian khi làm việc với DOM

Trong khi làm việc với các sinh viên trong chương trình đào tạo của tôi, tôi đã giúp một vài người trong số họ tìm ra một vấn đề: thời gian.

Đặc biệt, có một điều ban đầu có thể không rõ ràng.

Khi bạn truy cập giá trị của một phần tử DOM và bạn lưu trữ nó vào một biến, biến đó sẽKHÔNG PHẢIsẽ được cập nhật với giá trị mới khi phần tử DOM thay đổi.

Giả sử bạn có một trường đầu vào trong một biểu mẫu<input id="temperature">và bạn nhận được giá trị của nó theo cách này:

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

Cáctemperaturebiến nhận giá trị của trạng thái của trường đầu vào tại thời điểm trình duyệt thực hiện câu lệnh này, và sau đó giá trị vẫn giữ nguyên mãi mãi.

Đây là lý do tại sao bạn không thể làm như thế này:

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

document.querySelector(‘form’) .addEventListener(‘submit’, event => { //send the temperature value to your server })

nhưng bạn cần truy cập giá trị nhiệt độ khi gửi biểu mẫu:

document.querySelector('form')
        .addEventListener('submit', event => {
  const temperature = document.querySelector('input#temperature').value
  //send the temperature value to your server
})

Ngoài ra, bạn có thể lưu trữ trường đầu vàotài liệu tham khảotrong một biến và sử dụng biến đó để truy cập giá trị của nó khi gửi:

const temperatureElement = document.querySelector('input#temperature')
document.querySelector('form')
        .addEventListener('submit', event => {
  const temperature = temperatureElement.value
  //send the temperature value to your server
})

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: