Hôm nay tôi biết được rằng các trình duyệt thêm các phần tử HTML có thuộc tính id
hoặc name
vào đối tượng window
. Kết quả là chúng trở thành biến toàn cục trong JavaScript. Lấy ví dụ này
// Output:
Tôi đã tìm thấy một bài viết về StackOverflow từ 12 năm trước hỏi về hành vi này. Hóa ra các biến toàn cục này được đặt tên là các phần tử, trong khi tính năng này được gọi là. Internet Explorer đã giới thiệu chức năng này và sau đó, các trình duyệt khác đã sử dụng chức năng này vì một số trang web dựa vào hành vi. Lôi cuốn
suy nghĩ đầu tiên của tôi là. "Ồ, tại sao hành vi này chưa bao giờ xung đột với bất kỳ mã JavaScript nào của tôi?" . Nếu bạn khai báo một biến trùng tên thì nó sẽ đứng trước biến toàn cục
// Output: "Something else"
Bạn cũng không nên sử dụng thẻ id hoặc tên để truy cập DOM. Thay vào đó, với vanilla JavaScript, hãy sử dụng các phương thức querySelector
hoặc getElementById
Bạn chỉ có thể sử dụng biến Javascript trong HTML bằng cách liên kết biến Javascript với phần tử HTML bằng thuộc tính id
hoặc class
Liên kết biến Javascript với phần tử HTML
- Tạo một phần tử trong HTML
Mã số
Content is loading ...
Gán id cho phần tử
Mã số
Content is loading ...
Nếu bạn kiểm tra điều này bây giờ, tất cả những gì bạn sẽ thấy là
Giờ đây, bạn có thể thêm Javascript vào trang của mình bằng thẻ script
Bây giờ, bạn có thể bắt đầu làm việc với Javascript. Tạo biến Javascript của bạn
Mã số
var newContent = "This content will be loaded as a paragraph on the p tag when we add it through Javascript.";
Bạn lấy phần tử trong Javascript bằng giá trị id được gán
Mã số
var contentHolder = document.getElementById['content-holder'];
Để hiển thị biến trong HTML, hãy gán biến cho phần tử trong Javascript bằng thuộc tính InternalHTML
Mã số
contentHolder.innerHTML = newContent;
Kết quả
Hoàn thành mã
________số 8_______
Bạn có thể sử dụng phương pháp trên cho các biến chuỗi và số
Sử dụng biến mảng Javascript trong HTML
Để xem các biến mảng và đối tượng trong HTML, bạn phải lặp qua các mục trong Javascript trước khi chuyển chúng sang HTML
Ví dụ
Kết quả
Bạn cũng có thể tương tác với mã cho dự án này
Chào bạn. Tôi là Avic Ndugu
Tôi đã xuất bản hơn 100 bài đăng trên blog về HTML, CSS, Javascript, React và các chủ đề liên quan khác. Khi tôi không viết, tôi thích đọc sách, đi bộ đường dài và nghe podcast
HTML được tạo thành từ các phần tử giúp xác định cấu trúc của trang web, Các phần tử cùng loại có cùng hành vi trên một trang web. Một cách để làm cho một phần tử hoạt động khác đi là thêm các thuộc tính cho chúng. Một trong những cách để thêm thuộc tính vào phần tử HTML là sử dụng thuộc tính, ví dụ: bạn có thể thêm kiểu CSS cho phần tử bằng thuộc tính bộ chọn như lớp, id và tên
Làm việc với bộ chọn
Bộ chọn giúp bạn nhắm mục tiêu các phần tử HTML cụ thể, bằng cách này, bạn có thể dễ dàng đính kèm các kiểu hoặc hành vi CSS bằng Javascript. Các thuộc tính được sử dụng phổ biến nhất là các lớp, id và tên
Mặc dù bất kỳ bộ chọn nào trong số này đều có thể được sử dụng để thêm kiểu hoặc hành vi, nhưng các lớp được ưu tiên hơn khi thêm kiểu vào phần tử. Điều này là do một phần tử có thể có nhiều lớp và các phần tử khác nhau có thể sử dụng các lớp này
Điều này có nghĩa là bạn có thể áp dụng nhiều kiểu cho một phần tử cũng như áp dụng một kiểu cho nhiều phần tử
Thuộc tính name
được sử dụng với các phần tử đầu vào để vừa đánh dấu là khóa cho dữ liệu mà chúng thu thập. Ngoài ra, nó có thể được sử dụng để áp dụng các kiểu được nhắm mục tiêu. Nhiều đầu vào có thể chia sẻ một tên, lý do là bạn có thể có nhiều biểu mẫu trong một trang
thuộc tính ID
Các id, không giống như các lớp và tên, chỉ nên được gán cho một phần tử, nó có nghĩa là đóng vai trò là mã định danh duy nhất để truy cập các phần tử. Nhưng dựa trên thông số kỹ thuật, hầu hết các trình duyệt đều chuyển đổi id thành biến. Biến sẽ chứa đối tượng DOM của phần tử
Việc không sử dụng id một cách cẩn thận có thể dẫn đến việc làm ô nhiễm phạm vi toàn cầu của javascript, điều này cũng có thể dẫn đến sự cố nếu id của bạn xung đột với các tên biến trong phạm vi toàn cầu
Ngay từ cái nhìn đầu tiên, đây có thể được coi là một cách dễ dàng hơn để truy cập DOM của bất kỳ phần tử nào chỉ bằng tên id mà không phải sử dụng bộ chọn truy vấn
đây là một ý tưởng tồi. Sẽ an toàn hơn nhiều nếu chỉ sử dụng bộ chọn truy vấn
Một giải pháp đơn giản
Thật không may, việc chuyển đổi id thành biến nằm ngoài tầm kiểm soát của bạn, nhưng bạn có thể lấy lại quyền kiểm soát đó, một cách là sử dụng tên biến không hợp lệ làm tên id, theo cách này sẽ không có cách nào xung đột với biến của bạn trong
Đôi khi bạn không thể do cuộc trò chuyện đặt tên hoặc một số lý do khác, trong trường hợp đó, tùy chọn tốt nhất là cố gắng sử dụng ít id hơn ở bất cứ đâu và khi có thể