Phương pháp bạn đang tìm kiếm được gọi là getElementsByTagName. Nó trả về một danh sách các phần tử giống như mảng (không phải là một mảng).
Lưu ý rằng mẫu cuối cùng của bạn .attributes['media'] không trả lại chuỗi như các phương pháp khác. Nó trả về một nút thuộc tính để thay thế.
Về lý thuyết, cách truy cập nội dung phải tương đương nhưng lỗi trình duyệt dẫn đến hành vi khác trong thực tế. Nó có lẽ là tốt nhất để sử dụng một lớp trừu tượng (một thư viện như jQuery) để có được hành vi nhất quán.Nếu bạn có ý định lập trình mà không có thư viện, sự lựa chọn tùy thuộc vào khẩu vị của bạn, tuy nhiên tôi muốn nói rằng việc đi qua nút thuộc tính là an toàn nhất nói chung.
Để thêm chi tiết kỹ thuật một chút, mặc dù cách khác nhau trả về cùng một cách phần lớn thời gian, điều này không nhất thiết đúng cho các thuộc tính không tồn tại. Lấy HTML sau làm ví dụ: <a href='test'>. Bạn có thể tự mình thử trong một trình duyệt khác trên a test jsFiddle (kết quả dưới đây là từ Firefox).
// Get reference to element
var a = document.getElementsByTagName('a')[0];
// Existent attributes
console.log(a.href); // String: http://fiddle.jshell.net/_display/test
console.log(a.getAttribute('href')); // String: test
console.log(a.attributes['href']); // Attribute node: href
Lưu ý rằng một lần một URI tuyệt đối được trả về, một lần khác giá trị ban đầu được trả về.
// Existent invalid attributes
console.log(a.other); // undefined
console.log(a.getAttribute('other')); // String: thing
console.log(a.attributes['other']); // Attribute node: other
Mọi thứ tồn tại khi tải trang được hợp nhất vào DOM nhưng không khả dụng dưới dạng thuộc tính nếu không hợp lệ.
// Inexistent but valid attributes
console.log(a.title); // Empty string
console.log(a.getAttribute('title')); // null
console.log(a.attributes['title']); // undefined
Cuộc gọi đầu tiên trả về giá trị mặc định của thuộc tính. Sau đó, chúng tôi đã thấy null làm điểm đánh dấu cho thuộc tính không tồn tại. Cuối cùng, chúng tôi đã có một cái gọi là NamedNodeMap mà là một cái gì đó giống như một hỗn hợp của một mảng và đối tượng. Truy cập nó như một đối tượng đã cho giá trị undefined.
// Creating attributes
a.setAttribute('title', 'test title');
console.log(a.title); // String: test title
console.log(a.getAttribute('title')); // String: test title
console.log(a.attributes['title']); // Attribute node: title
Thuộc tính cũng có sẵn dưới dạng thuộc tính.
// Creating "attributes" by using property
a.rel = 'test rel';
console.log(a.rel); // String: test rel
console.log(a.getAttribute('rel')); // String: test rel
console.log(a.attributes['rel']); // Attribute node: rel
Đặt thuộc tính cho thuộc tính hợp lệ cũng tạo một mục nhập trong attributes bản đồ.
// Inexistent invalid attributes
console.log(a.dummyInvention); // undefined
console.log(a.getAttribute('dummyInvention')); // null
console.log(a.attributes['dummyInvention']); // undefined
Truy cập thuộc tính trên a, giá trị trả lại đánh dấu và truy cập chỉ mục trên bản đồ nút.
// Creating invalid attributes via setAttribute
a.setAttribute('title2', 'test title2');
console.log(a.title2); // undefined
console.log(a.getAttribute('title2')); // String: test title2
console.log(a.attributes['title2']); // Attribute node: title2
Thuộc tính được tạo ngay cả khi thuộc tính tồn tại không hợp lệ nhưng không khả dụng dưới dạng thuộc tính.
// Creating invalid "attributes" via property
a.title3 = 'test title3';
console.log(a.title3); // String: test title3
console.log(a.getAttribute('title3')); // null
console.log(a.attributes['title3']); // undefined
Đối tượng a được gia hạn nhưng DOM không bị ảnh hưởng.
// NamedNodeMap of length 4 and indexes other, href, title, rel, title2 (valid attributes or result of setAttribute in order of creation except those from parsing)
console.log(a.attributes);
Bản đồ nút chỉ phản ánh trạng thái hiện tại của DOM. Nó không nhận thức được phần mở rộng đối tượng của chúng tôi a mà chúng tôi đã nhận được qua getElementsByTagName.
Điều quan trọng cần lưu ý là thao tác đối tượng JavaScript không nhất thiết ảnh hưởng đến DOM. DOM chỉ phản ánh những điều đã có sẵn trên phân tích cú pháp cộng với sửa đổi với các phương thức DOM hoặc sửa đổi thuộc tính (của các thuộc tính được xác định trước). Tôi hy vọng tôi không bỏ lỡ bất kỳ trường hợp quan trọng nào và rằng các bình luận đã đủ dài để xem điều gì xảy ra.
Tôi sẽ đánh giá cao nhận xét về NamedNodeMap cuối cùng bởi vì tôi muốn biết hành vi của Firefox có chính xác không để loại bỏ thứ tự các thuộc tính khỏi phân tích cú pháp.
Chỉ cần lưu ý: hai bản dịch đầu tiên giống với cùng một thứ trong JavaScript ('.x = [" x "]' nói chung), đó không phải là đặc trưng cho thuộc tính phần tử. –
Đó là 'getElementsByTagName', không phải' getElementByTag'. – Oded
có thể trùng lặp của [Để sử dụng getAttribute(), hoặc không sử dụng getAttribute(): đó là câu hỏi] (http://stackoverflow.com/questions/7278922/to-use-getattribute-or-not-to-use -getattribute-that-is-the-question) –