Indexing an HtmlCollection or NodeList

Question

I am trying to clone a node that is a child of another node, however js is not letting me index the HTMLCollection/NodeList datatype. Whenever I try to index that datatype it always results in an undefined value. Even when I convert that datatype to an array as per Most efficient way to convert an HTMLCollection to an Array I am still not able to index the array.

var viewports = document.getElementsByClassName('imageViewerViewport');
console.log(viewports[0].childNodes)  // In the console shows the children I expect to see
console.log(viewports[0].childNodes.item(0))  // Nothing shows up  - undefined
console.log(viewports[0].childNodes.item(1))  // Nothing shows up  - undefined
console.log(viewports[0].children.item(0))  // Nothing shows up  - undefined
console.log(viewports[0].children.item(1))  // Nothing shows up  - undefined    
console.log(viewports[0].childNodes[0])  // Nothing shows up  - undefined
console.log(viewports[0].childNodes[1])  // Nothing shows up  - undefined    
console.log(viewports[0].children[0])  // Nothing shows up  - undefined
console.log(viewports[0].children[1])  // Nothing shows up  - undefined
console.log("Here")
var second_canvas = viewports[0].children.item(1).cloneNode(true);  // Error that is detailed below
viewports[1].appendChild(second_canvas);

Error that cloning the node gives: Cannot read property 'cloneNode' of undefined.

Can you post your sample HTML – Bibberty Jul 17 '19 at 23:20 — Bibberty, Jul 17 '19 at 23:20
All the HTML is automatically generated by JS. – user10011538 Jul 18 '19 at 19:31 — user10011538, Jul 18 '19 at 19:31
Use inspect in Chrome, copy out the generated HTML. – Bibberty Jul 18 '19 at 20:29 — Bibberty, Jul 18 '19 at 20:29

score 0 · Answer 1 · answered Jul 18 '19 at 21:19

So the answer is that not ALL childNodes are valid Node Here is a verbose version, where we log to show the invalid nodes.

const cloneThings = () => {
  document.querySelectorAll('.cloneMyChildren').forEach(parentNode => {
    console.log(parentNode.classList.length);
    parentNode.childNodes.forEach(child => {
      console.log(child.outerHTML); // This is here to show, the child nodes are NOT all HTMLElements.
      if(child.outHTML) {
        const childClone = child.cloneNode(true);
        childClone.classList.add('clone');
        document.body.appendChild(childClone);
      }
    });
  });
};

document.addEventListener('click', ({ target }) => {
  if(target.matches('button')) {
    cloneThings();
  }
});

.cloneMe {
  border: 1px solid red;
}

.clone {
  border: 1px solid blue;
}

<div class="cloneMyChildren">
  <span class="cloneMe">Clone Me</span>
  <span class="cloneMe">Clone Me</span>  
</div>
<div class="cloneMyChildren">
  <span class="cloneMe">Clone Me</span>
  <span class="cloneMe">Clone Me</span>  
</div>
<div class="cloneMyChildren">
  <span class="cloneMe">Clone Me</span>
  <span class="cloneMe">Clone Me</span>  
</div>
<div class="cloneMyChildren">
  <span class="cloneMe">Clone Me</span>
  <span class="cloneMe">Clone Me</span>  
</div>
<div class="cloneMyChildren">
  <span class="cloneMe">Clone Me</span>
  <span class="cloneMe">Clone Me</span>  
</div>
<button>Clone Stuff</button>

Here is a more concise version.

const cloneThings = () => {
  Array.from(document.querySelectorAll('.cloneMyChildren'))
       .flatMap(p => Array.from(p.childNodes).filter(c => c.outerHTML !== undefined))
       .forEach(n => {
          const childClone = n.cloneNode(true);
          childClone.classList.add('clone');
          document.body.appendChild(childClone);       
       });
};

document.addEventListener('click', ({ target }) => {
  if(target.matches('button')) {
    cloneThings();
  }
});

.cloneMe {
  border: 1px solid red;
}

.clone {
  border: 1px solid blue;
}

<div class="cloneMyChildren">
  <span class="cloneMe">Clone Me</span>
  <span class="cloneMe">Clone Me</span>  
</div>
<div class="cloneMyChildren">
  <span class="cloneMe">Clone Me</span>
  <span class="cloneMe">Clone Me</span>  
</div>
<div class="cloneMyChildren">
  <span class="cloneMe">Clone Me</span>
  <span class="cloneMe">Clone Me</span>  
</div>
<div class="cloneMyChildren">
  <span class="cloneMe">Clone Me</span>
  <span class="cloneMe">Clone Me</span>  
</div>
<div class="cloneMyChildren">
  <span class="cloneMe">Clone Me</span>
  <span class="cloneMe">Clone Me</span>  
</div>
<button>Clone Stuff</button>

Indexing an HtmlCollection or NodeList

1 Answers1