Lấy các phần tử HTML theo tên thuộc tính của chúng

Question

Có các phương thức có sẵn trong JavaScript để lấy các phần tử HTML bằng cách sử dụng ID, Lớp và Thẻ của chúng.

document.getElementByID(*id*); 
document.getElementsByClassName(*class*); 
document.getElementsByTagName(*tag*); 

Có phương pháp nào để lấy các phần tử theo tên thuộc tính hay không.

EX:

<span property="v:name">Basil Grilled Tomatoes and Onions</span> 

Giống như:

document.getElementsByAttributeName("property"); 

Answer 1

Có, nhưng nó không phải là hiện diện trong tất cả các trình duyệt. Các phiên bản Internet Explorer cũ (tức là trước phiên bản 8) không hỗ trợ phiên bản này. Hàm này là querySelectorAll (hoặc querySelector cho một phần tử), cho phép bạn sử dụng bộ chọn CSS để tìm các phần tử.

document.querySelectorAll('[property]'); // All with attribute named "property" 
document.querySelectorAll('[property=value]'); // All with "property" set to "value" exactly. 

(Complete list of attribute selectors on MDN.)

này tìm tất cả các yếu tố với các tài sản thuộc tính. Nó sẽ là tốt hơn để chỉ định một tên thẻ nếu có thể:

document.querySelectorAll('span[property]'); 

Bạn có thể làm việc xung quanh này nếu cần thiết bằng cách lặp qua tất cả các yếu tố trên trang để xem liệu họ có các thuộc tính thiết lập:

var withProperty = [], 
    els = document.getElementsByTagName('span'), // or '*' for all types of element 
    i = 0; 

for (i = 0; i < els.length; i++) { 
    if (els[i].hasAttribute('property')) { 
     withProperty.push(els[i]); 
    } 
} 

Các thư viện như jQuery xử lý điều này cho bạn: có thể là một ý tưởng hay để cho phép họ thực hiện việc nâng hạng nặng.

Answer 2

Tôi nghĩ rằng bạn muốn có một cái nhìn tại jQuery vì đó thư viện Javascript cung cấp rất nhiều chức năng mà bạn có thể muốn sử dụng trong các loại hình các trường hợp. Trong trường hợp của bạn, bạn có thể viết (hoặc tìm một trên internet) một phương pháp hasAttribute, như vậy (không kiểm tra):

$.fn.hasAttribute = function(tagName, attrName){ 
    var result = []; 
    $.each($(tagName), function(index, value) { 
    var attr = $(this).attr(attrName); 
    if (typeof attr !== 'undefined' && attr !== false) 
     result.push($(this)); 
    }); 
    return result; 
} 

Answer 3

Trong jQuery này là như vậy:

$("span['property'=v:name]"); // for selecting your span element 

Answer 4

Bạn có thể có được thuộc tính sử dụng javascript,

element.getAttribute(attributeName); 

Ex:

var wrap = document.getElementById("wrap"); 
var myattr = wrap.getAttribute("title"); 

Tham khảo:

https://developer.mozilla.org/en/DOM/element.getAttribute

Answer 5

Với PrototypeJS:

$$('span[property=v.name]'); 

hoặc

document.body.select('span[property=v.name]'); 

Cả trả về một mảng

Answer 6

Chỉ cần một câu trả lời

Array.prototype.filter.call(
    document.getElementsByTagName('span'), 
    function(el) {return el.getAttribute('property') == 'v.name';} 
); 

Trong tương lai

Array.prototype.filter.call(
    document.getElementsByTagName('span'), 
    (el) => el.getAttribute('property') == 'v.name' 
)