Hướng dẫn javascript attribute - thuộc tính javascript
Khi trình duyệt tải trang, trình duyệt sẽ “đọc” (một từ khác: “phân tích cú pháp”) HTML và tạo các đối tượng DOM từ đó. Đối với các nút phần tử, hầu hết các thuộc tính HTML tiêu chuẩn tự động trở thành thuộc tính của các đối tượng DOM. Hôm nay cafedev chia sẻ cho ace về các thuộc tính và đặc tính của chúng. Show
Ví dụ: nếu là thẻ 7, thì đối tượng DOM có body.id=”page”.Nhưng ánh xạ thuộc tính-thuộc tính không phải là một-một! Trong chương này, chúng ta sẽ chú ý đến việc tách biệt hai khái niệm này, để xem cách làm việc với chúng, khi nào chúng giống nhau và khi chúng khác nhau.
Chúng ta đã thấy các thuộc tính DOM tích hợp sẵn. Có rất nhiều. Nhưng về mặt kỹ thuật thì không ai giới hạn chúng ta, và nếu không đủ, chúng ta có thể thêm cái của mình. Các nút DOM là các đối tượng JavaScript thông thường. Chúng ta có thể thay đổi chúng. Ví dụ: hãy tạo một thuộc tính mới trong document.body:
Chúng ta cũng có thể thêm một phương thức:
Chúng ta cũng có thể sửa đổi các nguyên mẫu tích hợp sẵn như Element.prototype và thêm các phương thức mới vào tất cả các phần tử:
Vì vậy, các thuộc tính và phương thức DOM hoạt động giống như các thuộc tính và phương thức của các đối tượng JavaScript thông thường:
2. Thuộc tính(Attributes) HTMLThuộc tính(Attributes) HTML3. Đồng bộ hóa thuộc tính 4. Thuộc tính DOM được nhập 5. Thuộc tính không chuẩn, tập dữ liệu
6. Tóm lược Chúng ta đã thấy các thuộc tính DOM tích hợp sẵn. Có rất nhiều. Nhưng về mặt kỹ thuật thì không ai giới hạn chúng ta, và nếu không đủ, chúng ta có thể thêm cái của mình.
Các nút DOM là các đối tượng JavaScript thông thường. Chúng ta có thể thay đổi chúng. Ví dụ: hãy tạo một thuộc tính mới trong document.body:
Chúng phân biệt chữ hoa chữ thường (viết elem.nodeType, không phải elem.NoDeTyPe). Trong HTML, các thẻ có thể có các thuộc tính. Khi trình duyệt phân tích cú pháp HTML để tạo các đối tượng DOM cho các thẻ, nó sẽ nhận ra các thuộc tính chuẩn và tạo các thuộc tính DOM từ chúng. Vì vậy, khi một phần tử có id hoặc một thuộc tính chuẩn khác , thuộc tính tương ứng sẽ được tạo. Nhưng điều đó không xảy ra nếu thuộc tính không chuẩn.
Ví dụ:
Vì vậy, nếu một thuộc tính không phải là tiêu chuẩn, sẽ không có thuộc tính DOM cho nó. Có cách nào để truy cập các thuộc tính như vậy không?
Chắc chắn rồi. Tất cả các thuộc tính đều có thể truy cập được bằng cách sử dụng các phương pháp sau:
3. Đồng bộ hóa thuộc tínhĐồng bộ hóa thuộc tính4. Thuộc tính DOM được nhập 5. Thuộc tính không chuẩn, tập dữ liệu
6. Tóm lược Chúng ta đã thấy các thuộc tính DOM tích hợp sẵn. Có rất nhiều. Nhưng về mặt kỹ thuật thì không ai giới hạn chúng ta, và nếu không đủ, chúng ta có thể thêm cái của mình.Các nút DOM là các đối tượng JavaScript thông thường. Chúng ta có thể thay đổi chúng.
Chúng ta cũng có thể sửa đổi các nguyên mẫu tích hợp sẵn như Element.prototype và thêm các phương thức mới vào tất cả các phần tử: 4. Thuộc tính DOM được nhậpThuộc tính DOM được nhập5. Thuộc tính không chuẩn, tập dữ liệu
Có những ví dụ khác. Các thuộc tính style là một chuỗi, nhưng thuộc tính style là một đối tượng: 0Hầu hết các thuộc tính là chuỗi mặc dù. Rất hiếm, ngay cả khi loại thuộc tính DOM là một chuỗi, nó có thể khác với thuộc tính. Ví dụ: thuộc tính href DOM luôn là một URL đầy đủ , ngay cả khi thuộc tính chứa một URL tương đối hoặc chỉ một #hash. Đây là một ví dụ: 1Nếu chúng ta cần giá trị của href hoặc bất kỳ thuộc tính nào khác chính xác như được viết trong HTML, chúng ta có thể sử dụng getAttribute. 5. Thuộc tính không chuẩn, tập dữ liệuThuộc tính không chuẩn, tập dữ liệuKhi viết HTML, chúng ta sử dụng rất nhiều thuộc tính chuẩn. Nhưng những gì về những cái không chuẩn, tùy chỉnh? Đầu tiên, hãy xem chúng có hữu ích hay không? Để làm gì? Đôi khi các thuộc tính không chuẩn được sử dụng để chuyển dữ liệu tùy chỉnh từ HTML sang JavaScript hoặc để “đánh dấu” các phần tử HTML cho JavaScript. Như thế này: 2Ngoài ra, chúng có thể được sử dụng để tạo kiểu cho một phần tử. Ví dụ: ở đây đối với trạng thái đơn hàng, thuộc tính order-state được sử dụng: 3Tại sao sử dụng một thuộc tính được thích hợp hơn để có các lớp học như .order-state-new, .order-state-pending, order-state-canceled? Bởi vì một thuộc tính sẽ thuận tiện hơn để quản lý. Trạng thái có thể được thay đổi dễ dàng như: 4Nhưng có thể có một vấn đề có thể xảy ra với các thuộc tính tùy chỉnh. Điều gì sẽ xảy ra nếu chúng ta sử dụng một thuộc tính phi tiêu chuẩn cho các mục đích của mình và sau đó tiêu chuẩn giới thiệu nó và khiến nó hoạt động? Ngôn ngữ HTML vẫn tồn tại, nó phát triển và nhiều thuộc tính xuất hiện hơn để phù hợp với nhu cầu của các nhà phát triển. Có thể có những tác động không mong muốn trong trường hợp đó Để tránh xung đột, cócác thuộc tínhdata- * . Tất cả các thuộc tính bắt đầu bằng “data-” được dành riêng cho lập trình viên sử dụng. Chúng có sẵn trong thuộc tính dataset. Ví dụ: nếu một thuộc tính elem có tên “data-about”, thuộc tính đó có sẵn dưới dạng elem.dataset.about. Như thế này: 5Ngoài ra, chúng có thể được sử dụng để tạo kiểu cho một phần tử. Ví dụ: ở đây đối với trạng thái đơn hàng, thuộc tính order-state được sử dụng: 6Tại sao sử dụng một thuộc tính được thích hợp hơn để có các lớp học như .order-state-new, .order-state-pending, order-state-canceled? Bởi vì một thuộc tính sẽ thuận tiện hơn để quản lý. Trạng thái có thể được thay đổi dễ dàng như: Nhưng có thể có một vấn đề có thể xảy ra với các thuộc tính tùy chỉnh. Điều gì sẽ xảy ra nếu chúng ta sử dụng một thuộc tính phi tiêu chuẩn cho các mục đích của mình và sau đó tiêu chuẩn giới thiệu nó và khiến nó hoạt động? Ngôn ngữ HTML vẫn tồn tại, nó phát triển và nhiều thuộc tính xuất hiện hơn để phù hợp với nhu cầu của các nhà phát triển. Có thể có những tác động không mong muốn trong trường hợp đóTóm lược
Ví dụ: nếu một thuộc tính elem có tên “data-about”, thuộc tính đó có sẵn dưới dạng elem.dataset.about.
Tính chất
Tên phân biệt chữ hoa chữ thường
elem.hasAttribute(name) – để kiểm tra sự tồn tại.
elem.removeAttribute(name) – để loại bỏ thuộc tính. elem.attributes là một tập hợp của tất cả các thuộc tính.
Group Facebook Fanpage |