JSFiddle - React, Tailwind, and code Playground

by Jussia

HTML

<div>
   <span id="p_id">id id id id
      <span id="p_id2">id2 id id2 id2</span>
         <span id="p_id5">id5 id5 id5 id5
         <span id="p_id6">id6 id6 id6 id6</span>
         </span>
    </span>
     <span class="p_class">class class class
        <span id="p_id3">id3 id3 id3 id3
          <span id="p_id4">id4 id4 id4 id4</span>
        </span>
     </span>
    <span>tag tag tag</span>
</div>
<div>
    <span id="p_id1">id1 id1 id1 id1</span>
     <span class="p_class1">class1 class1 class1</span>
    <span>tag1 tag1 tag1</span>
</div>

<p id="demo"></p>

JavaScript

var stringId = '#p_id';
var stringClass = '.p_class';
var stringTag = 'p';

function Jquery(string) {
	this.selector = string
	  var list = document.querySelectorAll(string)
    this.context = Array.prototype.slice.call(list).map((item) => {
    	return item
    })
	  
	   this.find = function(el) {
	  /* console.log('el', el)
	      var children = [];
	      var result = [];
	     this.context.forEach((item) => {
	         var childrenArray = Array.prototype.slice.call(item.children)
	           children.push(childrenArray)
	         })
	  console.log('children', children) */
    var element = document.querySelectorAll(el)
    console.log('element', element)
    console.log('getNestedNodes(element)', getNestedNodes(element))
      return document.querySelectorAll(el)
	  }
}

function getNestedNodes(nodeList) {
    var ary = [];

    // Loop the collection of nodes
    for(var i = 0; i < nodeList.length; ++i) {
        var node = nodeList[i];

        // Create the new object with the "tag" populated
        var jsonNode = {"tag":node.nodeName};

        // Add the attributes to the object
        for(var k =0, attrs = node.attributes, l = attrs.length; k < l; ++k) {
            jsonNode[attrs.item(k).nodeName] = attrs.item(k).nodeValue;
        }

        // Make a recursive call if any children are present, and add the result
        if (node.children && node.children.length)
            jsonNode['children'] = getNestedNodes(node.children);

        ary.push(jsonNode);
    }
    return ary;
}
var $ = new Jquery('#p_id');

//document.getElementById("demo").innerHTML

//console.log('div', $)
console.log('find', $.find('#p_id2').find('#p_id5'))