JavaScript преобразовать namedNodeMap в строку

Question

Я нахожусь в процессе создания инструмента отладки для себя, и мне нужно преобразовать namedNodeMap в текст или значение, которое я могу отобразить, используя alert(), innerHTML или console.log().В основном строка.Но есть ли реальный способ сделать это?Вот мой код, который возвращает namedNodeMap любого нажатого элемента:

document.addEventListener('click', function(e) {
  e = e || window.event;

  var target = e.target || e.srcElement,
    text = target.attributes

  console.log(text);

}, false);

div:nth-child(1) {
  height: 200px;
  width: 200px;
  background-color: orange;
}

div:nth-child(2) {
  height: 200px;
  width: 200px;
  background-color: green;
}

<div class='some_class' id="some_id"></div>
<div class='some_class' data-attribute="some_data"></div>

Чтобы эти данные отображались в виде простого текста, их необходимо преобразовать, но как?И какой будет лучший способ?

Answer 1

Каждый атрибут на карте имеет несколько свойств .Вероятно, наиболее интересными являются name и value.Вы могли бы сопоставить NamedNodeMap с простым объектом, ключом которого являются эти свойства, каждое из которых имеет соответствующее значение.

Вы можете использовать второй аргумент Array.from для такого вида сопоставления и объединить результаты в одинобъект с Object.assign:

document.addEventListener('click', function(e) {
    e = e || window.event;

    var target = e.target || e.srcElement,
        text = Object.assign({},
            ...Array.from(target.attributes, ({name, value}) => ({[name]: value}))
        );

    console.log(text);

}, false);

div.some_class:nth-child(1) {
  height: 200px;
  width: 200px;
  background-color: orange;
}

div.some_class:nth-child(2) {
  height: 200px;
  width: 200px;
  background-color: green;
}

<div class='some_class' id="some_id"></div>
<div class='some_class' data-attribute="some_data"></div>