Khi viết mã nguồn HTML, bạn có thể xác định các thuộc tính trên các thành phần HTML của mình. Sau đó, khi trình duyệt phân tích mã của bạn, một nút DOM tương ứng sẽ được tạo. Nút này là một đối tượng, và do đó nó có các thuộc tính .
Chẳng hạn, phần tử HTML này:
<input type="text" value="Name:">
có 2 thuộc tính ( typevà value).
Khi trình duyệt phân tích mã này, một đối tượng HTMLInputE bổ sung sẽ được tạo và đối tượng này sẽ chứa hàng tá thuộc tính như: accept, accessKey, align, alt, các thuộc tính, tự động lấy nét, baseURI, đã kiểm tra, childEuityCount, childNodes, children, classList, className, khách hàng, v.v.
Đối với một đối tượng nút DOM đã cho, các thuộc tính là các thuộc tính của đối tượng đó và các thuộc tính là các thành phần của thuộc attributestính của đối tượng đó.
Khi một nút DOM được tạo cho một phần tử HTML nhất định, nhiều thuộc tính của nó liên quan đến các thuộc tính có cùng tên hoặc tương tự, nhưng đó không phải là mối quan hệ một đối một. Chẳng hạn, đối với phần tử HTML này:
<input id="the-input" type="text" value="Name:">
nút DOM tương ứng sẽ có id, typevà valuetài sản (số những người khác):
Các idbất động sản là một tài sản phản ánh cho idthuộc tính: Bắt tài sản lần đọc giá trị thuộc tính, và thiết lập tài sản ghi giá trị thuộc tính. idlà một thuộc tính phản ánh thuần túy , nó không sửa đổi hoặc giới hạn giá trị.
Các typebất động sản là một tài sản phản ánh cho typethuộc tính: Bắt tài sản lần đọc giá trị thuộc tính, và thiết lập tài sản ghi giá trị thuộc tính. typekhông phải là một thuộc tính được phản ánh thuần túy bởi vì nó bị giới hạn ở các giá trị đã biết (ví dụ: các loại đầu vào hợp lệ). Nếu bạn đã có <input type="foo">, sau đó theInput.getAttribute("type")cung cấp cho bạn "foo"nhưng theInput.typecung cấp cho bạn "text".
Ngược lại, thuộc valuetính không phản ánh valuethuộc tính. Thay vào đó, nó là giá trị hiện tại của đầu vào. Khi người dùng thay đổi thủ công giá trị của hộp đầu vào, thuộc valuetính sẽ phản ánh thay đổi này. Vì vậy, nếu người dùng "John"nhập vào hộp đầu vào, thì:
theInput.value // returns "John"
trong khi:
theInput.getAttribute('value') // returns "Name:"
Các valuebất động sản phản ánh hiện tại văn bản nội dung bên trong hộp đầu vào, trong khi các valuethuộc tính chứa ban đầu văn bản nội dung của các valuethuộc tính từ mã nguồn HTML.
Vì vậy, nếu bạn muốn biết những gì hiện trong hộp văn bản, hãy đọc thuộc tính. Tuy nhiên, nếu bạn muốn biết giá trị ban đầu của hộp văn bản là gì, hãy đọc thuộc tính. Hoặc bạn có thể sử dụng thuộc defaultValuetính, đó là sự phản ánh thuần túy của valuethuộc tính:
theInput.value // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue // returns "Name:"
Có một số tính năng mà trực tiếp phản ánh thuộc tính của họ ( rel, id), một số là phản ánh trực tiếp với những cái tên hơi khác nhau ( htmlForphản ánh forthuộc tính, classNamephản ánh classthuộc tính), nhiều phản ánh thuộc tính của họ, nhưng với những hạn chế / sửa đổi ( src, href, disabled, multiple), vv trên. Các thông số kỹ thuật bao gồm các loại phản ánh.
