Dapatkan semua Atribut dari elemen HTML dengan Javascript / jQuery

161

Saya ingin meletakkan semua atribut dalam elemen Html ke dalam array: seperti saya punya Obyek jQuery, yang html terlihat seperti ini:

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

sekarang salah satu caranya adalah dengan menggunakan parser xml yang dijelaskan di sini , tetapi kemudian saya perlu tahu bagaimana cara mendapatkan kode html objek saya.

cara lain adalah membuatnya dengan jquery, tapi bagaimana caranya? jumlah atribut dan nama-nama yang umum.

Terima kasih

Btw: Saya tidak bisa mengakses elemen dengan document.getelementbyid atau yang serupa.

javascript jquery attributes parsing k0ni
sumber

Jawaban:

218

Jika Anda hanya ingin atribut DOM, mungkin lebih mudah untuk menggunakan attributesdaftar simpul pada elemen itu sendiri:

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

Perhatikan bahwa ini hanya mengisi array dengan nama atribut. Jika Anda membutuhkan nilai atribut, Anda dapat menggunakan nodeValueproperti:

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);
}
Roland Bouman
sumber
Masalahnya adalah saya tidak bisa menggunakan getElementById, ini adalah objek jquery. apakah ada cara agar saya bisa membuat getelementbyclassname di dalam konteks seperti di jquery?
k0ni
4
Anda dapat menggunakan getElementById-var el = document.getElementById($(myObj).attr("id"));
Sampson
45
Anda bisa mendapatkan objek DOM dari objek jQuery melalui getmetode ... misalnya:var obj = $('#example').get(0);
Matt Huggins
3
@ k0ni - dapatkah Anda menggunakan misalnya var atts = $ (myObject) [0] .attributes; ?
Ralph Cowling
12
Peringatan: di IE ini tidak hanya ditentukan, tetapi semua atribut yang mungkin
Alexey Lebedev
70

Anda dapat menggunakan plugin sederhana ini sebagai $ ('# 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);
manRo
sumber
4
FYI: Ini hanya memaparkan elemen pertama pemilih.
Brett Veenstra
Saya menguji dan bekerja dengan atribut yang ditambahkan secara dinamis (chrome)
CodeToad
57

Sederhana:

var element = $("span[name='test']");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);});
Aki143S
sumber
Adakah kerugian dari hal ini?
rzr
7
Attr.nodeValuetidak digunakan lagi value, kata Google Chrome. Jadi ini bisa jadi this.name + ':' + this.value. The Attr Interface
Thai
20

Karena di IE7 elem.attributes mendaftar semua atribut yang mungkin, tidak hanya yang sekarang, kita harus menguji nilai atribut. Plugin ini berfungsi di semua browser utama:

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

Pemakaian:

var attribs = $('#some_id').getAttributes();
DUzun
sumber
1
Mengetik ini - el.get (0) di baris 6 harus elem.get (0).
Graham Charles
Dari pengalaman saya barusan ini sebenarnya sedikit lebih kompleks dari ini. Setidaknya dalam beberapa kasus. Misalnya, apakah ini akan menyertakan atribut bernama 'dataFld' dengan nilai 'null' (nilai string) atau akankah ia mengecualikannya?
mightyiam
Ini tidak berfungsi dengan properti yang ditambahkan secara dinamis, menyebabkan properti dan atribut tidak selalu sinkron.
DUzun
18

Setter dan 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);

Menggunakan:

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

// Getter
var attrs = $('#element').attrs();
Eduardo Cuomo
sumber
2
Bagus, saya suka jawaban ini yang terbaik. Cocok dengan sangat baik jQuery.attr.
Scott Rippey
1
Dua rekomendasi: Dapatkah Anda memperbarui untuk menggunakan nama variabel "non-minified"? Dan saya melihat Anda menggunakannya jQuery.attrdi setter, tetapi mungkin akan bermanfaat untuk menggunakannya dalam pengambil juga.
Scott Rippey
Juga, hal kecil - seharusnya tidak ada titik koma setelah pernyataan pertama Anda untuk ().
jbyrd
6

Gunakan .sliceuntuk mengonversi attributesproperti menjadi Array

The attributesmilik node DOM adalah NamedNodeMap, yang merupakan Array-seperti objek.

Objek seperti array adalah objek yang memiliki lengthproperti dan yang nama propertinya disebutkan, tetapi sebaliknya memiliki metode sendiri dan tidak diwarisi dariArray.prototype

The slicemetode dapat digunakan untuk mengkonversi objek Array seperti ke Array baru .

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

console.log(attrs);
<span name="test" message="test2">See console.</span>
Luaskan cuplikan

Gfullam
sumber
1
Akan mengembalikan array objek dan bukan nama atribut sebagai string,
Przemek
1
OP tidak menentukan array nama sebagai string: "Saya ingin meletakkan semua atribut dalam elemen Html ke dalam array." Ini melakukan itu.
gfullam
OK, masuk akal
Przemek
1
Saat beralih item di dalam attrs, Anda dapat mengakses nama atribut dengan nameproperti pada item.
tyler.frankenstein
3

Pendekatan ini berfungsi dengan baik jika Anda perlu mendapatkan semua atribut dengan nama dan nilai dalam objek yang dikembalikan dalam array.

Contoh output:

[
    {
        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>
Luaskan cuplikan

Jika Anda hanya menginginkan array nama atribut untuk elemen itu, Anda bisa memetakan hasilnya:

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

Roland Bouman 's jawabannya adalah yang terbaik, sederhana cara Vanilla. Saya perhatikan beberapa upaya di plugs jQ, tetapi mereka hanya tampaknya tidak "penuh" bagi saya, jadi saya membuatnya sendiri. Kemunduran hanya sejauh ini telah ketidakmampuan untuk akses attrs dinamis ditambahkan tanpa langsung menelepon elm.attr('dynamicAttr'). Namun, ini akan mengembalikan semua atribut alami dari objek elemen jQuery.

Plugin menggunakan panggilan gaya jQuery sederhana:

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

Anda juga dapat menambahkan param string kedua untuk mendapatkan hanya satu attr tertentu. Ini tidak benar-benar diperlukan untuk satu pemilihan elemen, karena jQuery sudah menyediakan $(elm).attr('name'), namun, versi plugin saya memungkinkan untuk beberapa pengembalian. Jadi, misalnya, panggilan seperti

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

Akan menghasilkan array []kembali objek {}. Setiap objek akan terlihat seperti:

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

Plugin

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

Sesuai

;;(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

Tampilkan cuplikan kode

SpYk3HH
sumber
2

Cara yang jauh lebih ringkas untuk melakukannya:

Cara lama (IE9 +):

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

Cara ES6 (Edge 12+):

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

Demo:

Tampilkan cuplikan kode

Przemek
sumber
1

Apakah ini membantu?

Properti ini mengembalikan semua atribut elemen ke dalam array untuk Anda. Berikut ini sebuah contoh.

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>
Luaskan cuplikan

Untuk mendapatkan atribut dari banyak elemen dan mengaturnya, saya sarankan membuat array dari semua elemen yang ingin Anda lewati dan kemudian membuat sub array untuk semua atribut dari setiap elemen yang dilingkari.

Ini adalah contoh skrip yang akan mengulang elemen yang dikumpulkan dan mencetak dua atribut. Script ini mengasumsikan bahwa akan selalu ada dua atribut tetapi Anda dapat dengan mudah memperbaikinya dengan pemetaan lebih lanjut.

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>
Luaskan cuplikan

www139
sumber
1

Setiap jawaban di sini tidak ada solusi paling sederhana menggunakan metode elemen getAttributeNames !

Ini mengambil nama-nama semua atribut elemen saat ini sebagai Array biasa, yang kemudian dapat Anda kurangi menjadi objek kunci / nilai yang bagus.

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>
Luaskan cuplikan

Tim Kindberg
sumber
1

Bayangkan Anda memiliki elemen HTML seperti di bawah ini:

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

Salah satu cara Anda bisa mendapatkan semua atributnya adalah dengan mengubahnya menjadi sebuah array:

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)

Dan di bawah ini adalah string yang akan Anda dapatkan (dari contoh), yang mencakup semua atribut:

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

Coba sesuatu seperti ini

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

dan kemudian dapatkan semua atribut

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

untuk penggunaan array atribut 

    // ["id","[href]","class","(click)","data-hello"]
    Object.keys(getAttributes(foo))
weroro
sumber
0 
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;
        }
    }

Memiliki <div id="mydiv" a='1' b='2'>...</div> bisa menggunakan

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

Sangat sederhana. Anda hanya perlu mengulang elemen atribut dan mendorong nilai simpul mereka ke dalam array:

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

let arr = Array();

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

Jika ingin nama atribut Anda dapat mengganti 'nodeValue' untuk 'nodeName'.

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

let arr = Array();

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

Atribut ke Konversi objek

* Membutuhkan: 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
}

Ini akan mengonversi semua atribut html ke objek bersarang

Contoh HTML: <div custom-nested-path1="value1" custom-nested-path2="value2"></div>

Hasil: {custom:{nested:{path1:"value1",path2:"value2"}}}

Jika parseJson disetel ke true, nilai json akan dikonversi ke objek

Dieter Gribnitz
sumber
-8

Dalam javascript:

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

Untuk mengakses nama dan nilai atribut:

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

sumber
Melewati semua elemen rentang akan terlalu lambat
0-0