Bản tóm tắt. trong hướng dẫn này, bạn sẽ học cách lấy giá trị của một thuộc tính của một phần tử bằng 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]
3Để lấy giá trị của một thuộc tính của một phần tử, bạn sử dụng 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]
3Code language: JavaScript [javascript]
let attributeValue = element.getAttribute[attributeName];
Ví dụ: để lấy giá trị của 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]
5 của phần tử neo, bạn sử dụng đoạn mã sauCode language: JavaScript [javascript]
const link = document.querySelector['a']; let title = link.getAttribute['title'];
Có thể sử dụng 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]
3 để lấy 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]
7. Ví dụCode language: HTML, XML [xml]
Save
Để lấy giá trị của 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]
8 của phần tử neo, bạn sử dụng 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]
3 như sau ví dụ
Phần tử có bao nhiêu thuộc tính.
để tê = tài liệu. getElementById["myImg"]. thuộc tính. chiều dài;
Tự mình thử »Hiển thị tất cả thuộc tính của phần tử .
const nodeMap = tài liệu. getElementById["myImg"]. thuộc tính;
let text = "";
for [let i = 0; i < nodeMap. chiều dài; . tên + " = " + nodeMap[i]. giá trị + "
text += nodeMap[i].name + " = " + nodeMap[i].value + "
";
}
tài liệu. getElementById["bản trình diễn"]. InternalHTML = văn bản;
Thêm ví dụ bên dưới
Định nghĩa và cách sử dụng
Thuộc tí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 trả về một tập hợp các thuộc tính trong một phần tửThuộc tí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 trả về NamedNodeMapNamedNodeMap
NamedNodeMap là một tập hợp các thuộc tính của một phần tử không có thứ tự giống như mảng
Nói cách khác. một NamedNodeMap là một danh sách các đối tượng Attr
NamedNodeMap có thuộc tính độ dài trả về số lượng nút
Các nút có thể được truy cập theo tên hoặc số chỉ mục. Chỉ số bắt đầu từ 0
cú pháp
Giá trị trả về
TypeDescriptionNamedNodeMapMột tập hợp các đối tượng thuộc tínhThêm ví dụ
Phần tử có bao nhiêu thuộc tính
để tê = tài liệu. getElementById["myButton"]. thuộc tính. chiều dài;
Tự mình thử »Lấy tên thuộc tính thứ hai [chỉ mục 1] của phần tử
hãy để attr = tài liệu. getElementById["myBtn"]. thuộc tính[1]. Tên;
Tự mình thử »Hỗ trợ trình duyệ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
2 là tính năng DOM Cấp 1 [1998]Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt
ChromeIEEdgeFirefoxSafariOperaCó9-11CóCóCóCóví dụ
Lấy giá trị của thuộc tính lớp của một phần tử
hãy để văn bản = yếu tố. getAttribution["lớp"];
Tự mình thử »Lấy giá trị của thuộc tính đích của một phần tử
hãy để văn bản = myAnchor. getAttribute["mục tiêu"];
Tự mình thử »Thêm ví dụ bên dưới
Định nghĩa và cách sử dụng
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]
3 trả về giá trị thuộc tính của phần tửcú pháp
yếu tố. getAttribute[tên]
Thông số
Tham sốDescriptionnameBắt buộc.Tên thuộc tính.
Giá trị trả về
TypeDescriptionStringGiá trị của thuộc tính.______84 nếu thuộc tính không tồn tại.
Thêm ví dụ
Lấy giá trị của thuộc tính title của một phần tử
hãy để văn bản = myButton. getAttribute[" title"];
Tự mình thử »Hỗ trợ trình duyệ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
5 là tính năng DOM Cấp 1 [1998]Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt
ChromeIEEdgeFirefoxSafariOperaCó9-11CóCóCóCó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.
Chú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ử________số 8
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
1, không phảiElement.prototype.sayHi = function[] { alert[`Hello, I'm ${this.tagName}`]; }; document.documentElement.sayHi[]; // Hello, I'm HTML document.body.sayHi[]; // Hello, I'm BODY
2]Element.prototype.sayHi = function[] { alert[`Hello, I'm ${this.tagName}`]; }; document.documentElement.sayHi[]; // Hello, I'm HTML document.body.sayHi[]; // Hello, I'm BODY
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 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ụ
3Code language: JavaScript [javascript]
const link = document.querySelector['a']; let title = link.getAttribute['title'];
Xin 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 [], 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 []. 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ó
7Code language: JavaScript [javascript]
const link = document.querySelector['a']; let title = link.getAttribute['title'];
Vì 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
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ịElement.prototype.sayHi = function[] { alert[`Hello, I'm ${this.tagName}`]; }; document.documentElement.sayHi[]; // Hello, I'm HTML document.body.sayHi[]; // Hello, I'm BODY
30 – loại bỏ thuộc tính
Code language: JavaScript [javascript]const link = document.querySelector['a']; let title = link.getAttribute['title'];
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
31. một tập hợp các đối tượng thuộc về một lớp dựng sẵn, với các thuộc tínhCode language: JavaScript [javascript]
const link = document.querySelector['a']; let title = link.getAttribute['title'];
32 vàCode language: JavaScript [javascript]
const link = document.querySelector['a']; let title = link.getAttribute['title'];
33Code language: JavaScript [javascript]
const link = document.querySelector['a']; let title = link.getAttribute['title'];
Đây là bản demo đọc thuộc tính không chuẩn
5Code language: HTML, XML [xml]
Save
Thuộ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 [
3 giống 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
35]
Code language: JavaScript [javascript]const link = document.querySelector['a']; let title = link.getAttribute['title'];
- 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
8Code language: HTML, XML [xml]
Save
Xin lưu ý
36 – 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
Code language: JavaScript [javascript]const link = document.querySelector['a']; let title = link.getAttribute['title'];
- 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ị
37
Code language: JavaScript [javascript]const link = document.querySelector['a']; let title = link.getAttribute['title'];
- Tất cả các thuộc tính bao gồm cả những thuộc tính mà chúng tôi đặt đều hiển thị trong
38
Code language: JavaScript [javascript]const link = document.querySelector['a']; let title = link.getAttribute['title'];
- Bộ sưu tập
39 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
Code language: JavaScript [javascript]const link = document.querySelector['a']; let title = link.getAttribute['title'];
32 và
Code language: JavaScript [javascript]const link = document.querySelector['a']; let title = link.getAttribute['title'];
33
Code language: JavaScript [javascript]const link = document.querySelector['a']; let title = link.getAttribute['title'];
Khi 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.sayTagName = function[] {
alert[this.tagName];
};
document.body.sayTagName[]; // BODY [the value of "this" in the method is document.body]
6Nhưng có những trường hợp loại trừ, ví dụ:
73 chỉ đồng bộ hóa từ thuộc tính → thuộc tính chứ không quay lạiCode language: JavaScript [javascript]
const link = document.querySelector['a']; let title = link.getAttribute['title'];
document.body.sayTagName = function[] {
alert[this.tagName];
};
document.body.sayTagName[]; // BODY [the value of "this" in the method is document.body]
8Trong ví dụ trên
- Thay đổi thuộc tính
33 cập nhật thuộc tính
Code language: JavaScript [javascript]const link = document.querySelector['a']; let title = link.getAttribute['title'];
- Nhưng thay đổi thuộc tính không ảnh hưởng đến thuộc tính
“Tính năng” đó thực sự có thể hữu ích, bởi vì các hành động của người dùng có thể dẫn đến ____133 thay đổi, và sau đó, nếu chúng ta muốn khôi phục giá trị “gốc” từ HTML, thì nó nằm trong thuộc tính
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
76 [đối với các hộp kiểm] là một giá trị booleanCode language: JavaScript [javascript]
const link = document.querySelector['a']; let title = link.getAttribute['title'];
document.body.sayTagName = function[] {
alert[this.tagName];
};
document.body.sayTagName[]; // BODY [the value of "this" in the method is document.body]
2Có những ví dụ khác. Thuộc tính
77 là một chuỗi, nhưng thuộc tínhCode language: JavaScript [javascript]
const link = document.querySelector['a']; let title = link.getAttribute['title'];
77 là một đối tượngCode language: JavaScript [javascript]
const link = document.querySelector['a']; let title = link.getAttribute['title'];
document.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
79 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ộtCode language: JavaScript [javascript]
const link = document.querySelector['a']; let title = link.getAttribute['title'];
50Code language: HTML, XML [xml]
Save
Đâ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
79 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ụngCode language: JavaScript [javascript]
const link = document.querySelector['a']; let title = link.getAttribute['title'];
52Code language: HTML, XML [xml]
Save
Khi 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
53 được sử dụngCode language: HTML, XML [xml]
Save
document.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ư
54,Code language: HTML, XML [xml]
Save
55,Code language: HTML, XML [xml]
Save
56?Code language: HTML, XML [xml]
Save
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 các 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
57Code language: HTML, XML [xml]
Save
Chẳng hạn, nếu một
58 có một thuộc tính có tên làCode language: HTML, XML [xml]
Save
59, thì nó có sẵn dưới dạngCode language: HTML, XML [xml]
Save
80Code language: HTML, XML [xml]
Save
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]
5Các thuộc tính nhiều từ như ________ 281 trở thành trường hợp lạc đà.
82Code language: HTML, XML [xml]
Save
Đâ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
83 là cách hợp lệ, an toàn để truyền dữ liệu tùy chỉnhCode language: HTML, XML [xml]
Save
Xin 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
84 đổi màu thành xanh lamCode language: HTML, XML [xml]
Save
- 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à
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ịElement.prototype.sayHi = function[] { alert[`Hello, I'm ${this.tagName}`]; }; document.documentElement.sayHi[]; // Hello, I'm HTML document.body.sayHi[]; // Hello, I'm BODY
30 – để xóa thuộc tính
Code language: JavaScript [javascript]const link = document.querySelector['a']; let title = link.getAttribute['title'];
31 là tập hợp tất cả các thuộc tính
Code language: JavaScript [javascript]const link = document.querySelector['a']; let title = link.getAttribute['title'];
Đố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