Question

我正在为自己构建调试工具，我需要做的是将namedNodeMap转换为文本或可以使用alert()，{{1 }}或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;
}

要将此数据显示为纯文本格式，需要对其进行转换，但是如何转换？最好的方法是什么？

Answer 1

当我调试具有混乱属性的元素时，我想要一种简单的方法来清理它们并遇到Element.attributes，导致NamedNodeMaps，最后DDG将我引到了这里。

经过一番测试，我最终得出结论（使用OP的术语，并在3个图中分割了一层以更好地说明该过程）：

代码

myObjArr = Array.prototype.slice.call(target.attributes)
myStrArr = myObjArr.map(function(item){return item.name+'='+item.value})
text = JSON.stringify(myStrArr)

myObjArr = Array.prototype.slice.call（target.attributes）

第1行通常使用普通的HTML集合.slice（）方法将NamedNodeMaps对象（target.attributes）转换为数组：

namedNodeMap elems ==>数组obj元素，例如：
{“ 0” ： {name ： value}，...} ==> [{name ： value}，...]

在此阶段，仍可以使用通用属性通过索引引用每个数组元素：

myObjArr[ index ].name
myObjArr[ index ].value

或更通用的Object.keys方法：

myObjArr[ Object.keys(myObjArr)[index] ]

myStrArr = myObjArr.map（function（item）{返回item.name +'='+ item.value}）

第2行使用.map（）使用上述名称/值属性将对象数组转换为字符串数组，以便：

[[{名称：值}，...] ==> [“名称=值”，...]

还可以调整.map（）函数，以简单的{name：value}对象或[name，value]数组等形式返回项目，例如：

.map(function(aRow) { return {[aRow.name]:aRow.value} })    // as {name:value} objects

.map(function(aRow) { return [aRow.name, aRow.value] })     // as [name,value] arrays

第三行仅使用旧的备用JSON.stringify完成到字符串的转换，但是.join（）对于简单数组也是如此。

注意：如果解析或以其他方式分析字符串，则任何包含等号（=）或逗号（，）的项都可能会造成干扰，在这种情况下必须予以考虑。

Answer 2

地图中的每个属性都有several properties。可能最有趣的是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>

JavaScript将namedNodeMap转换为字符串

2 个答案: