Get all Attributes from a HTML element with Javascript/jQuery

后端 未结 17 1804
时光说笑
时光说笑 2020-11-22 05:07

I want to put all attributes in a Html element into an array: like i have a jQuery Object, whichs html looks like this:



        
相关标签:
17条回答
  • 2020-11-22 05:28

    You can use this simple plugin as $('#some_id').getAttributes();

    (function($) {
        $.fn.getAttributes = function() {
            var attributes = {}; 
    
            if( this.length ) {
                $.each( this[0].attributes, function( index, attr ) {
                    attributes[ attr.name ] = attr.value;
                } ); 
            }
    
            return attributes;
        };
    })(jQuery);
    
    0 讨论(0)
  • 2020-11-22 05:30

    Simple:

    var element = $("span[name='test']");
    $(element[0].attributes).each(function() {
    console.log(this.nodeName+':'+this.nodeValue);});
    
    0 讨论(0)
  • 2020-11-22 05:32

    If you just want the DOM attributes, it's probably simpler to use the attributes node list on the element itself:

    var el = document.getElementById("someId");
    for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i < n; i++){
        arr.push(atts[i].nodeName);
    }
    

    Note that this fills the array only with attribute names. If you need the attribute value, you can use the nodeValue property:

    var nodes=[], values=[];
    for (var att, i = 0, atts = el.attributes, n = atts.length; i < n; i++){
        att = atts[i];
        nodes.push(att.nodeName);
        values.push(att.nodeValue);
    }
    
    0 讨论(0)
  • 2020-11-22 05:35

    Setter and Getter!

    (function($) {
        // Attrs
        $.fn.attrs = function(attrs) {
            var t = $(this);
            if (attrs) {
                // Set attributes
                t.each(function(i, e) {
                    var j = $(e);
                    for (var attr in attrs) {
                        j.attr(attr, attrs[attr]);
                    }
                });
                return t;
            } else {
                // Get attributes
                var a = {},
                    r = t.get(0);
                if (r) {
                    r = r.attributes;
                    for (var i in r) {
                        var p = r[i];
                        if (typeof p.nodeValue !== 'undefined') a[p.nodeName] = p.nodeValue;
                    }
                }
                return a;
            }
        };
    })(jQuery);
    

    Use:

    // Setter
    $('#element').attrs({
        'name' : 'newName',
        'id' : 'newId',
        'readonly': true
    });
    
    // Getter
    var attrs = $('#element').attrs();
    
    0 讨论(0)
  • 2020-11-22 05:36

    Use .slice to convert the attributes property to Array

    The attributes property of DOM nodes is a NamedNodeMap, which is an Array-like object.

    An Array-like object is an object which has a length property and whose property names are enumerated, but otherwise has its own methods and does not inherit from Array.prototype

    The slice method can be used to convert Array-like objects to a new Array.

    var elem  = document.querySelector('[name=test]'),
        attrs = Array.prototype.slice.call(elem.attributes);
    
    console.log(attrs);
    <span name="test" message="test2">See console.</span>

    0 讨论(0)
  • 2020-11-22 05:36

    Very simple. You just need to loop over the attributes element and push their nodeValues into an array:

    let att = document.getElementById('id');
    
    let arr = Array();
    
    for (let i = 0; i < att.attributes.length; i++) {
        arr.push(att.attributes[i].nodeValue);
    }
    

    If want the name of the attribute you can replace 'nodeValue' for 'nodeName'.

    let att = document.getElementById('id');
    
    let arr = Array();
    
    for (let i = 0; i < att.attributes.length; i++) {
        arr.push(att.attributes[i].nodeName);
    }
    
    0 讨论(0)
提交回复
热议问题