如何将元素的 NamedNodeMap 克隆到空对象？

如何解决如何将元素的 NamedNodeMap 克隆到空对象？

我有一个 javaScript 对象数组，其中的对象称为 text，其中每个对象元素都包含有关 HTML 元素的信息，使用 Chrome 浏览器的检查源监视区域如下所示：

text:
  attributes: NamednodeMap
                0: baseURI: "file:.../awesomplete_textarea.html"
                   childNodes: NodeList []
                   firstChild: null
                   isConnected: false
                   lastChild: null
                   localName: "label"
                   name: "label"
                   namespaceURI: null
                   nextSibling: null
                   nodeName: "label"
                   nodeType: 2
                   nodeValue: "Alternative Rock"
                   ownerDocument: document
                   ownerElement: li
                   parentElement: null
                   parentNode: null
                   prefix: null
                   prevIoUsSibling: null
                   specified: true
                   textContent: "Alternative Rock"
                   value: "Alternative Rock"
                   __proto__: Attr }
              length: 1
              label: { same content as 0,above }
              __proto__: NamednodeMap }
  label: "Alternative Rock"
  tagName: "LI"
  value: "Alternative Rock (Alternative)"
  length: 16
  __proto__: String

注意：虽然text对象的属性成员（上面）只包含标签的信息属性，它还可以包含其他属性项，例如样式和/或类，它们是从我的网页中的一组 <li> 标记复制的，在这种情况下，text 对象和这些属性项的属性 成员。

收集信息 <li> 标签后，标签的属性将使用如下所示的 copyAttributes 函数复制到 text 对象中，这工作正常。

但是，当稍后尝试使用相同的 copyAttributes 函数将 text.attributes 复制到 attr > 变量然后创建一个新的 HTML 元素，我收到此错误：

mycode.js:98 Uncaught TypeError: to.setNamedItem is not a function
  at copyAttributes (mycode.js:98)
  at Function._.ITEM (mycode.js:940)
  at _.item (mycode_textarea.html:625)
  at mycode.js:826
  at Array.forEach (<anonymous>)
  at _.evaluate (mycode.js:825)

以下代码显示了这个调用是如何进行的，以及我试图将信息复制到 attr 对象变量中。

function copyAttributes( from,to ) {
  var attr;

  for( const [ key,value ] of Object.entries( from ) ) {

    if( !isNaN( key ) ) {  // Only add the named attributes ...

      let name = from[ key ].name;;  // get the attribute's name

      if( to[ name ] === undefined ) {

        attr       = document.createAttribute( name ); // Create the attribute.
        attr.value = value.value;                      // Assign its value.

        to.setNamedItem( attr );                       // Add it to to

      }

    }

  }

}

var tagName = 'li';
var attribute = {};

// copy the text.attributes from the text object to attributes.

copyAttributes( text.attributes,attributes );

// Add the information in the {...} object to the attributes object ...

Object.assign( attributes,attributes,{ innerHTML: label,// Add these to those just copied.
                 'role':    'option','id':      'list_' + this.count +
                            '_item_' + item_id,'value':   value } );

// Create the new `<li>` with the original tag's attributes and those added,above.

$.create( tagName,attributes );

问题似乎是copyAttributes函数的to参数不是NamednodeMap类型，所以不支持setNamedItem方法。 >

如何创建这种类型的空属性变量？

或者是否有更好/更简单的方法来使用 test.attributesattributes 填充attributes 变量强> 信息？

谢谢。

解决方法

这是一个 codepen 工作版本的下拉组合框，它正确地创建了 li 标签元素并将所需的属性复制到其中。

这个创建函数来自 Awesomplete 插件，但它被修改为不在新创建的元素上设置焦点。

$.create = function( tag,o ) {
  var element = document.createElement( tag );

  for( var i in o ) {
    var val = o[ i ];

    if( i === 'inside' ) {
      $( val ).appendChild( element );
    }
    else if( i === 'around' ) {

      var ref = $( val );

      ref.parentNode.insertBefore( element,ref );
      element.appendChild( ref );

      if( ref.getAttribute( 'autofocus' ) != null ) {
        ref.focus();
      }
    }
    else if( i in element ) {
      element[ i ] = val;
    }
    else {
      element.setAttribute( i,val );
    }
  }

  return element;
};

这是我修改后的代码，它调用上面的创建函数并分配属性。

if( tagName === 'LI' ) {

  matched = ( inputValue = ( ',' +
                             me.input.value.trim().toLowerCase() +
                             ',' ) )    // Normalize input.value so that the first item can be found.
                           .includes( ',' + value.toLowerCase() + ',' ) ||         // Find the normalized value in the normalized input.value ...
                           inputValue.includes( ',' +
                                                label.toLowerCase() + ',' );        // Find the normalized label in the normalized input.value ...

  Object.assign( attributes,attributes,{ 'role':          'option','id':            'awesomplete_list_' +
                            this.count +
                            '_item_' + item_id,'value':         value,// Give every option ( li ) a value attribute.
           'aria-selected': matched.toString() } );                 // If a match was found then set aria-selected to 'true'
                                                // else set area-selected to 'false'.

}
else {

  matched = false;

}

newTag = $.create( tagName );

    newTag.innerHTML = label;

if( text.attributes.length ) {

  // Now copy the attributes ...

  copyAttributes( text.attributes,newTag.attributes );

  // Add the rest of the attributes ...

  copyAttributes( attributes,newTag.attributes,true );

}

return newTag;