Nhận tất cả các thuộc tính từ một phần tử HTML với Javascript / jQuery

Tôi muốn đặt tất cả các thuộc tính trong một phần tử Html vào một mảng: như tôi có một đối tượng jQuery, đó là html trông như thế này:

<span name="test" message="test2"></span>

bây giờ một cách là sử dụng trình phân tích cú pháp xml được mô tả ở đây , nhưng sau đó tôi cần biết cách lấy mã html của đối tượng.

cách khác là làm cho nó với jquery, nhưng làm thế nào? số lượng thuộc tính và tên là chung chung.

Cảm ơn

Btw: Tôi không thể truy cập phần tử bằng document.getelementbyid hoặc một cái gì đó tương tự.

Nếu bạn chỉ muốn các thuộc tính DOM, có thể sử dụng attributesdanh sách nút trên chính phần tử đó có thể đơn giản hơn :

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

Lưu ý rằng điều này sẽ lấp đầy mảng chỉ với tên thuộc tính. Nếu bạn cần giá trị thuộc tính, bạn có thể sử dụng thuộc nodeValuetính:

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);
}

Bạn có thể sử dụng plugin đơn giản này dưới dạng $ ('# some_id'). GetAttribut ();

(function($) {
    $.fn.getAttributes = function() {
        var attributes = {}; 

        if( this.length ) {
            $.each( this[0].attributes, function( index, attr ) {
                attributes[ attr.name ] = attr.value;
            } ); 
        }

        return attributes;
    };
})(jQuery);

Đơn giản:

var element = $("span[name='test']");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);});

Bởi vì trong IE7 elem.attribution liệt kê tất cả các thuộc tính có thể, không chỉ các thuộc tính hiện tại, chúng tôi phải kiểm tra giá trị thuộc tính. Plugin này hoạt động trong tất cả các trình duyệt chính:

(function($) {
    $.fn.getAttributes = function () {
        var elem = this, 
            attr = {};

        if(elem && elem.length) $.each(elem.get(0).attributes, function(v,n) { 
            n = n.nodeName||n.name;
            v = elem.attr(n); // relay on $.fn.attr, it makes some filtering and checks
            if(v != undefined && v !== false) attr[n] = v
        })

        return attr
    }
})(jQuery);

Sử dụng:

var attribs = $('#some_id').getAttributes();

Setter và 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);

Sử dụng:

// Setter
$('#element').attrs({
    'name' : 'newName',
    'id' : 'newId',
    'readonly': true
});

// Getter
var attrs = $('#element').attrs();

Sử dụng .sliceđể chuyển đổi thuộc attributestính sang Mảng

Các attributestài sản của các nút DOM là một NamedNodeMap, mà là một mảng giống như đối tượng.

Một đối tượng giống như Array là một đối tượng có thuộc lengthtính và có tên thuộc tính được liệt kê, nhưng mặt khác có các phương thức riêng và không kế thừa từArray.prototype

Các slicephương pháp có thể được sử dụng để chuyển đổi đối tượng mảng giống như một mảng mới .

var elem  = document.querySelector('[name=test]'),
    attrs = Array.prototype.slice.call(elem.attributes);

console.log(attrs);

<span name="test" message="test2">See console.</span>

Cách tiếp cận này hoạt động tốt nếu bạn cần lấy tất cả các thuộc tính có tên và giá trị trong các đối tượng được trả về trong một mảng.

Ví dụ đầu ra:

[
    {
        name: 'message',
        value: 'test2'
    }
    ...
]

function getElementAttrs(el) {
  return [].slice.call(el.attributes).map((attr) => {
    return {
      name: attr.name,
      value: attr.value
    }
  });
}

var allAttrs = getElementAttrs(document.querySelector('span'));
console.log(allAttrs);

<span name="test" message="test2"></span>

Nếu bạn chỉ muốn một mảng tên thuộc tính cho thành phần đó, bạn chỉ có thể ánh xạ kết quả:

var onlyAttrNames = allAttrs.map(attr => attr.name);
console.log(onlyAttrNames); // ["name", "message"]

Câu trả lời của Roland Bouman là cách Vanilla đơn giản, tốt nhất. Tôi nhận thấy một số nỗ lực tại các phích cắm jQ, nhưng chúng dường như không đủ "đầy đủ" với tôi, vì vậy tôi đã tự làm. Nhược điểm duy nhất cho đến nay là không có khả năng truy cập các attrs được thêm động mà không gọi trực tiếp elm.attr('dynamicAttr'). Tuy nhiên, điều này sẽ trả về tất cả các thuộc tính tự nhiên của một đối tượng phần tử jQuery.

Plugin sử dụng cách gọi kiểu jQuery đơn giản:

$(elm).getAttrs();
// OR
$.getAttrs(elm);

Bạn cũng có thể thêm một tham số chuỗi thứ hai để chỉ nhận một attr cụ thể. Điều này thực sự không cần thiết cho một lựa chọn thành phần, vì jQuery đã cung cấp $(elm).attr('name'), tuy nhiên, phiên bản plugin của tôi cho phép trả về nhiều lần. Vì vậy, ví dụ, một cuộc gọi như

$.getAttrs('*', 'class');

Sẽ dẫn đến một mảng []trả về của các đối tượng {}. Mỗi đối tượng sẽ trông như:

{ class: 'classes names', elm: $(elm), index: i } // index is $(elm).index()

Cắm vào

;;(function($) {
    $.getAttrs || ($.extend({
        getAttrs: function() {
            var a = arguments,
                d, b;
            if (a.length)
                for (x in a) switch (typeof a[x]) {
                    case "object":
                        a[x] instanceof jQuery && (b = a[x]);
                        break;
                    case "string":
                        b ? d || (d = a[x]) : b = $(a[x])
                }
            if (b instanceof jQuery) {
                var e = [];
                if (1 == b.length) {
                    for (var f = 0, g = b[0].attributes, h = g.length; f < h; f++) a = g[f], e[a.name] = a.value;
                    b.data("attrList", e);
                    d && "all" != d && (e = b.attr(d))
                } else d && "all" != d ? b.each(function(a) {
                    a = {
                        elm: $(this),
                        index: $(this).index()
                    };
                    a[d] = $(this).attr(d);
                    e.push(a)
                }) : b.each(function(a) {
                    $elmRet = [];
                    for (var b = 0, d = this.attributes, f = d.length; b < f; b++) a = d[b], $elmRet[a.name] = a.value;
                    e.push({
                        elm: $(this),
                        index: $(this).index(),
                        attrs: $elmRet
                    });
                    $(this).data("attrList", e)
                });
                return e
            }
            return "Error: Cannot find Selector"
        }
    }), $.fn.extend({
        getAttrs: function() {
            var a = [$(this)];
            if (arguments.length)
                for (x in arguments) a.push(arguments[x]);
            return $.getAttrs.apply($, a)
        }
    }))
})(jQuery);

Tuân thủ

;;(function(c){c.getAttrs||(c.extend({getAttrs:function(){var a=arguments,d,b;if(a.length)for(x in a)switch(typeof a[x]){case "object":a[x]instanceof jQuery&&(b=a[x]);break;case "string":b?d||(d=a[x]):b=c(a[x])}if(b instanceof jQuery){if(1==b.length){for(var e=[],f=0,g=b[0].attributes,h=g.length;f<h;f++)a=g[f],e[a.name]=a.value;b.data("attrList",e);d&&"all"!=d&&(e=b.attr(d));for(x in e)e.length++}else e=[],d&&"all"!=d?b.each(function(a){a={elm:c(this),index:c(this).index()};a[d]=c(this).attr(d);e.push(a)}):b.each(function(a){$elmRet=[];for(var b=0,d=this.attributes,f=d.length;b<f;b++)a=d[b],$elmRet[a.name]=a.value;e.push({elm:c(this),index:c(this).index(),attrs:$elmRet});c(this).data("attrList",e);for(x in $elmRet)$elmRet.length++});return e}return"Error: Cannot find Selector"}}),c.fn.extend({getAttrs:function(){var a=[c(this)];if(arguments.length)for(x in arguments)a.push(arguments[x]);return c.getAttrs.apply(c,a)}}))})(jQuery);

jsFiddle

/*  BEGIN PLUGIN  */
;;(function($) {
	$.getAttrs || ($.extend({
		getAttrs: function() {
			var a = arguments,
				c, b;
			if (a.length)
				for (x in a) switch (typeof a[x]) {
					case "object":
						a[x] instanceof f && (b = a[x]);
						break;
					case "string":
						b ? c || (c = a[x]) : b = $(a[x])
				}
			if (b instanceof f) {
				if (1 == b.length) {
					for (var d = [], e = 0, g = b[0].attributes, h = g.length; e < h; e++) a = g[e], d[a.name] = a.value;
					b.data("attrList", d);
					c && "all" != c && (d = b.attr(c));
					for (x in d) d.length++
				} else d = [], c && "all" != c ? b.each(function(a) {
					a = {
						elm: $(this),
						index: $(this).index()
					};
					a[c] = $(this).attr(c);
					d.push(a)
				}) : b.each(function(a) {
					$elmRet = [];
					for (var b = 0, c = this.attributes, e = c.length; b < e; b++) a = c[b], $elmRet[a.name] = a.value;
					d.push({
						elm: $(this),
						index: $(this).index(),
						attrs: $elmRet
					});
					$(this).data("attrList", d);
					for (x in $elmRet) $elmRet.length++
				});
				return d
			}
			return "Error: Cannot find Selector"
		}
	}), $.fn.extend({
		getAttrs: function() {
			var a = [$(this)];
			if (arguments.length)
				for (x in arguments) a.push(arguments[x]);
			return $.getAttrs.apply($, a)
		}
	}))
})(jQuery);
/*  END PLUGIN  */
/*--------------------*/
$('#bob').attr('bob', 'bill');
console.log($('#bob'))
console.log(new Array(50).join(' -'));
console.log($('#bob').getAttrs('id'));
console.log(new Array(50).join(' -'));
console.log($.getAttrs('#bob'));
console.log(new Array(50).join(' -'));
console.log($.getAttrs('#bob', 'name'));
console.log(new Array(50).join(' -'));
console.log($.getAttrs('*', 'class'));
console.log(new Array(50).join(' -'));
console.log($.getAttrs('p'));
console.log(new Array(50).join(' -'));
console.log($('#bob').getAttrs('all'));
console.log($('*').getAttrs('all'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
All of below is just for stuff for plugin to test on. See developer console for more details.
<hr />
<div id="bob" class="wmd-button-bar"><ul id="wmd-button-row-27865269" class="wmd-button-row" style="display:none;">
<div class="post-text" itemprop="text">
<p>Roland Bouman's answer is the best, simple Vanilla way. I noticed some attempts at jQ plugs, but they just didn't seem "full" enough to me, so I made my own. The only setback so far has been inability to access dynamically added attrs without directly calling <code>elm.attr('dynamicAttr')</code>. However, this will return all natural attributes of a jQuery element object.</p>

<p>Plugin uses simple jQuery style calling:</p>

<pre class="default prettyprint prettyprinted"><code><span class="pln">$</span><span class="pun">(</span><span class="pln">elm</span><span class="pun">).</span><span class="pln">getAttrs</span><span class="pun">();</span><span class="pln">
</span><span class="com">// OR</span><span class="pln">
$</span><span class="pun">.</span><span class="pln">getAttrs</span><span class="pun">(</span><span class="pln">elm</span><span class="pun">);</span></code></pre>

<p>You can also add a second string param for getting just one specific attr. This isn't really needed for one element selection, as jQuery already provides <code>$(elm).attr('name')</code>, however, my version of a plugin allows for multiple returns. So, for instance, a call like</p>

<pre class="default prettyprint prettyprinted"><code><span class="pln">$</span><span class="pun">.</span><span class="pln">getAttrs</span><span class="pun">(</span><span class="str">'*'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'class'</span><span class="pun">);</span></code></pre>

<p>Will result in an array <code>[]</code> return of objects <code>{}</code>. Each object will look like:</p>

<pre class="default prettyprint prettyprinted"><code><span class="pun">{</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">:</span><span class="pln"> </span><span class="str">'classes names'</span><span class="pun">,</span><span class="pln"> elm</span><span class="pun">:</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">elm</span><span class="pun">),</span><span class="pln"> index</span><span class="pun">:</span><span class="pln"> i </span><span class="pun">}</span><span class="pln"> </span><span class="com">// index is $(elm).index()</span></code></pre>
    </div>
  </div>

Nhiều cách ngắn gọn hơn để làm điều đó:

Cách cũ (IE9 +):

var element = document.querySelector(/* … */);
[].slice.call(element.attributes).map(function (attr) { return attr.nodeName; });

Cách ES6 (Cạnh 12+):

[...document.querySelector(/* … */).attributes].map(attr => attr.nodeName);

• document.querySelector()trả về Phần tử đầu tiên trong tài liệu khớp với bộ chọn đã chỉ định.
• Element.attributestrả về một đối tượng NamedNodeMap chứa các thuộc tính được gán của phần tử HTML tương ứng.
• [].map() tạo một mảng mới với kết quả gọi một hàm được cung cấp trên mọi phần tử trong mảng gọi.

Bản giới thiệu:

console.log(
  [...document.querySelector('img').attributes].map(attr => attr.nodeName)
);

/* Output console formatting */
.as-console-wrapper { position: absolute; top: 0; }

<img src="…" alt="…" height="…" width="…"/>

Không giúp đỡ à?

Thuộc tính này trả về tất cả các thuộc tính của một phần tử thành một mảng cho bạn. Đây là một ví dụ.

window.addEventListener('load', function() {
  var result = document.getElementById('result');
  var spanAttributes = document.getElementsByTagName('span')[0].attributes;
  for (var i = 0; i != spanAttributes.length; i++) {
    result.innerHTML += spanAttributes[i].value + ',';
  }
});

<span name="test" message="test2"></span>
<div id="result"></div>

Để có được các thuộc tính của nhiều phần tử và sắp xếp chúng, tôi khuyên bạn nên tạo một mảng gồm tất cả các phần tử mà bạn muốn lặp qua và sau đó tạo một mảng con cho tất cả các thuộc tính của từng phần tử được lặp qua.

Đây là một ví dụ về tập lệnh sẽ lặp qua các phần tử được thu thập và in ra hai thuộc tính. Kịch bản này giả định rằng sẽ luôn có hai thuộc tính nhưng bạn có thể dễ dàng sửa lỗi này bằng ánh xạ tiếp theo.

window.addEventListener('load',function(){
  /*
  collect all the elements you want the attributes
  for into the variable "elementsToTrack"
  */ 
  var elementsToTrack = $('body span, body div');
  //variable to store all attributes for each element
  var attributes = [];
  //gather all attributes of selected elements
  for(var i = 0; i != elementsToTrack.length; i++){
    var currentAttr = elementsToTrack[i].attributes;
    attributes.push(currentAttr);
  }
  
  //print out all the attrbute names and values
  var result = document.getElementById('result');
  for(var i = 0; i != attributes.length; i++){
    result.innerHTML += attributes[i][0].name + ', ' + attributes[i][0].value + ' | ' + attributes[i][1].name + ', ' + attributes[i][1].value +'<br>';  
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<span name="test" message="test2"></span>
<div name="test" message="test2"></div>
<div name="test" message="test2"></div>
<div name="test" message="test2"></div>
<div name="test" message="test2"></div>
<div id="result"></div>

Mỗi câu trả lời ở đây đều thiếu giải pháp đơn giản nhất bằng cách sử dụng phương thức phần tử getAttributionNames !

Nó lấy tên của tất cả các thuộc tính hiện tại của phần tử dưới dạng Mảng thông thường, sau đó bạn có thể rút gọn thành một đối tượng đẹp của các khóa / giá trị.

const getAllAttributes = el => el
  .getAttributeNames()
  .reduce((obj, name) => ({
    ...obj,
    [name]: el.getAttribute(name)
  }), {})

console.log(getAllAttributes(document.querySelector('div')))

<div title="hello" className="foo" data-foo="bar"></div>

Hãy tưởng tượng bạn đã có một yếu tố HTML như dưới đây:

<a class="toc-item"
   href="/books/n/ukhta2333/s5/"
   id="book-link-29"
>
   Chapter 5. Conclusions and recommendations
</a>

Một cách bạn có thể nhận được tất cả các thuộc tính của nó là chuyển đổi chúng thành một mảng:

const el = document.getElementById("book-link-29")
const attrArray = Array.from(el.attributes)

// Now you can iterate all the attributes and do whatever you need.
const attributes = attrArray.reduce((attrs, attr) => {
    attrs !== '' && (attrs += ' ')
    attrs += `${attr.nodeName}="${attr.nodeValue}"`
    return attrs
}, '')
console.log(attributes)

Và bên dưới là chuỗi những gì bạn sẽ nhận được (từ ví dụ), bao gồm tất cả các thuộc tính:

class="toc-item" href="/books/n/ukhta2333/s5/" id="book-link-29"

Hãy thử một cái gì đó như thế này

    <div id=foo [href]="url" class (click)="alert('hello')" data-hello=world></div>

và sau đó nhận được tất cả các thuộc tính

    const foo = document.getElementById('foo');
    // or if you have a jQuery object
    // const foo = $('#foo')[0];

    function getAttributes(el) {
        const attrObj = {};
        if(!el.hasAttributes()) return attrObj;
        for (const attr of el.attributes)
            attrObj[attr.name] = attr.value;
        return attrObj
    }

    // {"id":"foo","[href]":"url","class":"","(click)":"alert('hello')","data-hello":"world"}
    console.log(getAttributes(foo));

cho mảng các thuộc tính sử dụng

    // ["id","[href]","class","(click)","data-hello"]
    Object.keys(getAttributes(foo))

Element.prototype.getA = function (a) {
        if (a) {
            return this.getAttribute(a);
        } else {
            var o = {};
            for(let a of this.attributes){
                o[a.name]=a.value;
            }
            return o;
        }
    }

có <div id="mydiv" a='1' b='2'>...</div> thể sử dụng

mydiv.getA() // {id:"mydiv",a:'1',b:'2'}

Rất đơn giản. Bạn chỉ cần lặp qua phần tử thuộc tính và đẩy nodeValues ​​của chúng vào một mảng:

let att = document.getElementById('id');

let arr = Array();

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

Nếu muốn tên của thuộc tính, bạn có thể thay thế 'nodeValue' cho 'nodeName'.

let att = document.getElementById('id');

let arr = Array();

for (let i = 0; i < att.attributes.length; i++) {
    arr.push(att.attributes[i].nodeName);
}

Thuộc tính để chuyển đổi đối tượng

* Yêu cầu: lodash

function getAttributes(element, parseJson=false){
    let results = {}
    for (let i = 0, n = element.attributes.length; i < n; i++){
        let key = element.attributes[i].nodeName.replace('-', '.')
        let value = element.attributes[i].nodeValue
        if(parseJson){
            try{
                if(_.isString(value))
                value = JSON.parse(value)
            } catch(e) {}
        }
        _.set(results, key, value)
    }
    return results
}

Điều này sẽ chuyển đổi tất cả các thuộc tính html thành một đối tượng lồng nhau

Ví dụ HTML: <div custom-nested-path1="value1" custom-nested-path2="value2"></div>

Kết quả: {custom:{nested:{path1:"value1",path2:"value2"}}}

Nếu parseJson được đặt thành giá trị json thực sẽ được chuyển đổi thành các đối tượng

Trong javascript:

var attributes;
var spans = document.getElementsByTagName("span");
for(var s in spans){
  if (spans[s].getAttribute('name') === 'test') {
     attributes = spans[s].attributes;
     break;
  }
}

Để truy cập tên và giá trị thuộc tính:

attributes[0].nodeName
attributes[0].nodeValue