Javascript: Child Nodes

Get all of the child nodes based upon an initial node using recursion.

by ronpearl

HTML

<ul id="sortable" class="ui-sortable">
    <li class="ui-state-default">
        <img id="aImg" alt="sortable image" src="images/a.jpg" />
    </li>
    <li class="ui-state-default">
        <img id="bImg" alt="sortable image" src="images/b.jpg" />
    </li>
    <li class="ui-state-default">
        <img id="cImg" alt="sortable image" src="images/c.jpg" />
    </li>
</ul>

<div id="result"></div>

JavaScript

const processChildrenNodes = (node, getNodeChildren) => {
	if (!node.hasChildNodes())
  	return;

  const nodeChildren = [...node.childNodes];
  
	const imageNames = nodeChildren.reduce((result, child) => {   
  	if (getNodeChildren)
      processChildrenNodes(child, true);
  
    if (child.nodeType !== 3 && child.nodeName === 'IMG') {
    	result.push(child.getAttribute('src')
        .replace('.jpg', '')
        .split('/')
        .filter(item => item !== 'images')
      );
    }
    
    return result;
  }, []);
  
  if (imageNames[0] !== undefined)
  	return imageNames;
	else
  /* for (const thisNode of nodeChildren) {
    if (getNodeChildren)
      processChildrenNodes(thisNode, true);
      
    if (thisNode.nodeName === 'IMG') {
      images.push(
        thisNode.getAttribute('src')
        .replace('.jpg', '')
        .split('/')
        .filter(item => item !== 'images')
      );
    }
  } */
};

/* processChildrenNodes(document.getElementById('sortable'), true); */

document.getElementById('result').textContent += processChildrenNodes(document.getElementById('sortable'), true);