Khi trình duyệt tải trang, nó 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ừ nó. Đố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 sẽ tự động trở thành thuộc tính của các đối tượng DOM Chẳng hạn, nếu thẻ là document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 7, thì đối tượng DOM có document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 8Nhưng ánh xạ thuộc tính-thuộc tính không phải là một đối 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 làm thế nào để làm việc với chúng, khi chúng giống nhau và khi chúng khác nhau. Thuộc tính DOMChúng tôi đã 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, không ai giới hạn chúng tôi và nếu không đủ, chúng tôi có thể thêm của riêng 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 hạn, hãy tạo một thuộc tính mới trong document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 9document.body.myData = {
name: 'Caesar',
title: 'Imperator'
};
alert(document.body.myData.title); // Imperator
Chúng ta cũng có thể thêm một phương thức document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
Chúng tôi cũng có thể sửa đổi các nguyên mẫu dựng sẵn như Element.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 0 và thêm các phương thức mới cho tất cả các phần tửElement.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY
Vì vậy, các thuộc tính và phương thức DOM hoạt động giống như các đối tượng JavaScript thông thường - Họ có thể có bất kỳ giá trị
- Chúng phân biệt chữ hoa chữ thường (viết
Element.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 1, không phải Element.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 2)
thuộc tính HTMLTrong 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 tiêu 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ó Element.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 3 hoặc một thuộc tính tiêu chuẩn khác, thì 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ẩnVí dụ document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 0Xin lưu ý rằng một thuộc tính tiêu chuẩn cho một phần tử có thể không xác định đối với một phần tử khác. Chẳng hạn, Element.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 4 là tiêu chuẩn cho Element.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 5 (HTMLInputElement), nhưng không phải cho Element.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 6 (HTMLBodyElement). Các thuộc tính tiêu chuẩn được mô tả trong đặc tả cho lớp phần tử tương ứngỞ đây chúng ta có thể thấy nó document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 4Vì vậy, nếu một thuộc tính không chuẩn, thì sẽ không có thuộc tính DOM cho thuộc tính đó. 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 có thể truy cập bằng cách sử dụng các phương pháp sau Element.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 7 – kiểm tra sự tồn tạiElement.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 8 – nhận giá trịElement.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 9 – đặt giá trịdocument.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 00 – loại bỏ thuộc tính
Các phương thức này hoạt động chính xác với những gì được viết bằng HTML Ngoài ra, người ta có thể đọc tất cả các thuộc tính bằng cách sử dụng document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 01. một tập hợp các đối tượng thuộc về lớp Attr dựng sẵn, với các thuộc tính document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 02 và document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 03Đây là bản demo đọc thuộc tính không chuẩn document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 2Thuộc tính HTML có các tính năng sau - Tên của họ không phân biệt chữ hoa chữ thường (
Element.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 3 giống như document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 05) - Giá trị của chúng luôn là các chuỗi
Đây là bản trình diễn mở rộng về cách làm việc với các thuộc tính document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 5Xin lưu ý document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 06 – chữ cái đầu tiên ở đây là chữ hoa và trong HTML tất cả đều là chữ thường. Nhưng điều đó không quan trọng. tên thuộc tính không phân biệt chữ hoa chữ thường- Chúng ta có thể gán bất cứ thứ gì cho một thuộc tính, nhưng nó sẽ trở thành một chuỗi. Vì vậy, ở đây chúng tôi có giá trị
document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 07 - Tất cả các thuộc tính bao gồm các thuộc tính mà chúng tôi đặt đều hiển thị trong
document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 08 - Bộ sưu tập
document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 09 có thể lặp lại và có tất cả các thuộc tính của phần tử (chuẩn và không chuẩn) dưới dạng các đối tượng có thuộc tính document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 02 và document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 03
Đồng bộ hóa thuộc tính thuộc tínhKhi một thuộc tính tiêu chuẩn thay đổi, thuộc tính tương ứng sẽ được cập nhật tự động và ngược lại (với một số ngoại lệ) Trong ví dụ bên dưới, Element.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 3 được sửa đổi dưới dạng thuộc tính và chúng ta có thể thấy thuộc tính cũng được thay đổi. Và sau đó ngược lại như vậydocument.body.myData = {
name: 'Caesar',
title: 'Imperator'
};
alert(document.body.myData.title); // Imperator 3Nhưng có những trường hợp loại trừ, chẳng hạn như document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 43 chỉ đồng bộ hóa từ thuộc tính → thuộc tính chứ không quay lạidocument.body.myData = {
name: 'Caesar',
title: 'Imperator'
};
alert(document.body.myData.title); // Imperator 5Trong ví dụ trên “Tính năng” đó thực sự có ích, vì hành động của người dùng có thể dẫn đến ____103 thay đổi, và sau đó, nếu chúng ta muốn khôi phục giá trị “gốc” từ HTML, thì đó là thuộc tính Thuộc tính DOM được gõThuộc tính DOM không phải lúc nào cũng là chuỗi. Chẳng hạn, thuộc tính document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 46 (đối với các hộp kiểm) là một giá trị booleandocument.body.myData = {
name: 'Caesar',
title: 'Imperator'
};
alert(document.body.myData.title); // Imperator 9Có những ví dụ khác. Thuộc tính document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 47 là một chuỗi, nhưng thuộc tính document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 47 là một đối tượngdocument.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 0Hầu hết các thuộc tính là chuỗi mặc dù Rất hiếm khi, 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. Chẳng hạn, thuộc tính DOM document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 49 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 document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 20Đây là một ví dụ document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 1Nếu chúng tôi cần giá trị của document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 49 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 tôi có thể sử dụng document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 22Thuộ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 còn những cái không chuẩn, tùy chỉnh thì sao? Đô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 document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 2Ngoài ra, chúng có thể được sử dụng để tạo kiểu cho một phần tử Chẳng hạn, ở đây đối với trạng thái đơn đặt hàng, thuộc tính document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 23 được sử dụngdocument.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 3Tại sao sử dụng một thuộc tính lại thích hợp hơn là có các lớp như document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 24, document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 25, document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 26?Bởi vì một thuộc tính thuận tiện hơn để quản lý. Trạng thái có thể được thay đổi dễ dàng như document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 4Nhưng có thể có vấn đề 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 không chuẩn cho mục đích của mình và sau đó tiêu chuẩn giới thiệu nó và khiến nó làm một việc gì đó? . Có thể có những hiệu ứng bất ngờ trong trường hợp như vậy Để tránh xung đột, tồn tại data-* thuộc tính Tất cả các thuộc tính bắt đầu bằng “data-” được dành riêng cho người lập trình sử dụng. Chúng có sẵn trong tài sản document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 27Chẳng hạn, nếu một document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 28 có một thuộc tính tên là document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 29, thì nó có sẵn dưới dạng document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 50Như thế này document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 5Các thuộc tính nhiều từ như ________ 251 trở thành trường hợp lạc đà. document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 52Đây là một ví dụ về "trạng thái đơn hàng" được viết lại document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 6Sử dụng thuộc tính document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 53 là cách hợp lệ, an toàn để chuyển dữ liệu tùy chỉnhXin lưu ý rằng chúng tôi không chỉ có thể đọc mà còn có thể sửa đổi các thuộc tính dữ liệu. Sau đó, CSS cập nhật chế độ xem cho phù hợp. trong ví dụ trên dòng cuối cùng document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 54 đổi màu thành xanh dươngTóm lược- Thuộc tính – là những gì được viết bằng HTML
- Thuộc tính – là những gì có trong các đối tượng DOM
Một so sánh nhỏ PropertiesAttributesTypeBất kỳ giá trị nào, thuộc tính tiêu chuẩn có các loại được mô tả trong thông số kỹ thuậtMột chuỗiNameName phân biệt chữ hoa chữ thườngTên không phân biệt chữ hoa chữ thườngCác phương pháp để làm việc với các thuộc tính là Element.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 7 – để kiểm tra sự tồn tạiElement.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 8 – để lấy giá trịElement.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY 9 – để đặt giá trịdocument.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 00 – để xóa thuộc tínhdocument.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) 01 là tập hợp tất cả các thuộc tính
Đối với hầu hết các trường hợp, sử dụng thuộc tính DOM là tốt hơn. Chúng ta chỉ nên đề cập đến các thuộc tính khi các thuộc tính DOM không phù hợp với chúng ta, chẳng hạn như khi chúng ta cần các thuộc tính chính xác
Bạn có thể đặt thuộc tính HTML ở đâu?
Thuộc tính HTML . Tất cả các phần tử HTML có thể có các thuộc tính Các thuộc tính cung cấp thêm thông tin về các phần tử Các thuộc tính luôn được chỉ định trong thẻ bắt đầu Các thuộc tính thường có các cặp tên/giá trị như. tên = "giá trị"
Một thuộc tính nên được đặt ở đâu trong một phần tử?
Các thuộc tính được đặt bên trong thẻ mở của phần tử . Một phần tử có thể có nhiều thuộc tính.
Bạn có thể thêm bất kỳ thuộc tính nào vào phần tử HTML không?
Có thể thêm các thuộc tính cho phần tử HTML bằng cách sử dụng phương thức Thêm của thuộc tính Thuộc tính , như minh họa trong đoạn mã bên dưới. Thuộc tính của phần tử có thể được thay đổi trong thời gian chạy bằng cách gán một giá trị phù hợp cho thuộc tính Giá trị của thuộc tính cụ thể đó, như được hiển thị trong đoạn mã bên dưới.
Thuộc tính HTML luôn xuất hiện ở đâu?
Các thuộc tính HTML thường có các cặp tên-giá trị và luôn nằm trong trong thẻ mở của một phần tử . |