Получить все атрибуты из элемента HTML с помощью Javascript / jQuery

Question

Я хочу поместить все атрибуты в элемент Html в массив: как у меня есть объект jQuery, который HTML выглядит так:

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

Теперь один из способов - использовать описанный xml-анализатор здесь , но тогда мне нужно знать, как получить HTML-код моего объекта.

Другой способ - сделать это с помощью jquery, но как? количество атрибутов и имен являются общими.

Спасибо

Кстати: я не могу получить доступ к элементу с помощью document.getelementbyid или чего-то подобного.

Answer 1

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

имеющий <div id="mydiv" a='1' b='2'>...</div> можно использовать

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

Answer 2

Попробуйте что-то вроде этого

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

и затем получите все атрибуты

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

для массива атрибутов используйте

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

Answer 3

В каждом ответе здесь отсутствует простейшее решение, использующее getAttributeNames метод элемента!

Он извлекает имена всех текущих атрибутов элемента в виде обычного массива, который затем можно преобразовать в симпатичный объект ключей / значений.

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>

Answer 4

В JavaScript:

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

Для доступа к именам и значениям атрибутов:

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