getAttribute() so với các thuộc tính của đối tượng Element?

Question

Các biểu thức như Element.getAttribute("id") và Element.id trả về cùng một điều.

Loại nào sẽ được sử dụng khi chúng tôi cần thuộc tính của đối tượng HTMLElement?

Có vấn đề gì về trình duyệt chéo với các phương pháp này như getAttribute() và setAttribute() không?

Hoặc bất kỳ tác động nào đến hiệu suất giữa việc truy cập trực tiếp thuộc tính đối tượng so với sử dụng các phương pháp thuộc tính này?

Answer 1

getAttribute truy xuất thuộc tính của phần tử DOM, trong khi el.id truy xuất thuộc tính của phần tử DOM này. Chúng không giống nhau.

Hầu hết thời gian, thuộc tính DOM được đồng bộ hóa với các thuộc tính.

Tuy nhiên, việc đồng bộ hóa không đảm bảo cùng một giá trị. Ví dụ cổ điển là giữa el.href và el.getAttribute('href') cho phần tử neo.

Ví dụ:

<a href="/" id="hey"></a> 
<script> 
var a = document.getElementById('hey') 
a.getAttribute('href') // "/" 
a.href // Full URL except for IE that keeps '/' 
</script> 

Hành vi này xảy ra vì theo W3C, tài sản href phải là một liên kết tốt được hình thành. Hầu hết các trình duyệt đều tôn trọng tiêu chuẩn này (đoán xem ai không?).

Có một trường hợp khác cho thuộc tính checked của input. Thuộc tính DOM trả về true hoặc false trong khi thuộc tính trả về chuỗi "checked" hoặc một chuỗi rỗng.

Và sau đó, có một số thuộc tính được đồng bộ chỉ một chiều. Ví dụ tốt nhất là thuộc tính value của phần tử input. Thay đổi giá trị của nó thông qua thuộc tính DOM sẽ không thay đổi thuộc tính (chỉnh sửa: kiểm tra chú thích đầu tiên để có độ chính xác cao hơn).

Vì những lý do này, tôi khuyên bạn nên tiếp tục sử dụng DOM thuộc tính chứ không phải thuộc tính vì hành vi của chúng khác nhau giữa các trình duyệt.

Trên thực tế, chỉ có hai trường hợp bạn cần phải sử dụng các thuộc tính:

1. Một thuộc tính HTML tùy chỉnh, bởi vì nó không được đồng bộ hóa với một tài sản DOM.
2. Để truy cập thuộc tính HTML được tích hợp, thuộc tính này không được đồng bộ hóa từ thuộc tính và bạn chắc chắn bạn cần thuộc tính (ví dụ: value gốc của phần tử input).

Nếu bạn muốn giải thích chi tiết hơn, tôi khuyên bạn nên đọc this page. Nó sẽ đưa bạn một vài phút, nhưng bạn sẽ được vui mừng bởi các thông tin (mà tôi tóm tắt ở đây).

Answer 2

.id lưu chi phí cuộc gọi chức năng. (rất nhỏ, nhưng bạn đã hỏi.)

Answer 3

Theo số this jsPerf testgetAttribute chậm hơn id thuộc tính.

PS

Oddly đủ cả hai câu lệnh thực hiện rất xấu trên IE8 (so với các trình duyệt khác).

Answer 4

Luôn sử dụng các thuộc tính trừ khi bạn có lý do cụ thể.

• getAttribute() và setAttribute() bị phá vỡ trong IE cũ (và chế độ tương thích trong các phiên bản sau)
• tính được thuận tiện hơn (đặc biệt là những người tương ứng với thuộc tính boolean)

Có some exceptions:

• truy cập các thuộc tính của <form> các yếu tố
thuộc tính
• truy cập vào tùy chỉnh (mặc dù tôi muốn làm nản lòng sử dụng tùy chỉnh các thuộc tính ở tất cả)

Tôi đã viết về chủ đề này một vài lần trên SO:

• https://stackoverflow.com/a/7010268/96100
• https://stackoverflow.com/a/4456805/96100

Answer 5

getAttribute('attribute') thường trả về giá trị thuộc tính dưới dạng chuỗi, chính xác như được xác định trong nguồn HTML của trang.

Tuy nhiên, element.attribute có thể trả về giá trị được tính chuẩn hoặc được tính toán của thuộc tính. Ví dụ:

• <a href="/foo"></a>
  • a.href sẽ chứa đầy đủ URL
• <input type="checkbox" checked>
  • input.checked sẽ là đúng (boolean)
• <input type="checkbox" checked="bleh">
  • input.checked sẽ là đúng (boolean)
• <img src='http://dummyimage.com/64x64/000/fff'>
  • img.chiều rộng sẽ là 0 (số) trước khi hình ảnh được tải
  • img.width sẽ 64 (số) khi hình ảnh (hoặc vài byte đầu tiên của nó) được nạp
• <img src='http://dummyimage.com/64x64/000/fff' width="50%">
  • img .width sẽ là tính 50%
• <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
  • img.width sẽ là 50 (số)
• <div style='background: lime;'></div>
  • div.style sẽ là một đối tượng

Answer 6

Hãy thử bên dưới ví dụ để hiểu được điều này hoàn toàn. Đối với bên dưới DIV

<div class="myclass"></div>

Các Element.getAttribute('class') sẽ trở lại myclass nhưng bạn phải sử dụng Element.className mà lấy nó từ tài sản DOM.

Answer 7

Một lĩnh vực mà điều này tạo ra sự khác biệt lớn là tạo kiểu css dựa trên thuộc tính.

xem xét như sau:

const divs = document.querySelectorAll('div'); 
 

 
divs[1].custom = true; 
 
divs[2].setAttribute('custom', true);

div { 
 
    border: 1px solid; 
 
    margin-bottom: 8px; 
 
} 
 

 
div[custom] { 
 
    background: #36a; 
 
    color: #fff; 
 
}

<div>A normal div</div> 
 
<div>A div with a custom property set directly.</div> 
 
<div>A div with a custom attribute set with `setAttribute`</div>

Các div với thuộc tính tùy chỉnh thiết lập trực tiếp không phản ánh giá trị cho các thuộc tính, và không được chọn bởi bộ chọn thuộc tính của chúng tôi (div[custom]) trong css.

Tuy nhiên, div có thuộc tính tùy chỉnh được đặt bằng cách sử dụng setAttribute, có thể được chọn bằng bộ chọn thuộc tính css và được tạo kiểu cho phù hợp.