DomIterator

PHP terminal script to convert given HTML dom tree to Javascript code.

Just run and paste your HTML dom tree, the command line accepts multiline inputs.
On a new line, enter "!q" (without quotes) to end the input.
You'll see your dom tree and also the javascript code will be output.
Script will also save your code to a "dom.js" file for easy access.
Creates a javascript variable name from the code.
You can use "data-jsid" in your html to tell the script what to use as variable name.
This is the current priority for creating a variable name: data-jsid > class (first class from all assigned ones) > dom name (like div, img, h4, etc.)
If variable name is already used, a number will be added and incremented if needed (like img1, img2, etc.)

For example, this html:

<div class="categoryparent" data-jsid="categoryParent">
  <div class="categoryname" data-jsid="categoryName">
    <h4>Generate JS Code!</h4>
  </div>

  <div class="mainvideoholder" data-jsid="topHolder">
    <div class="left" data-jsid="buttonLeft">
      <img class="arrow" src="/images/video/arrow-left.svg">
    </div>

    <div class="videos" data-jsid="videoHolder">
    Holding videos since 1977
    </div>

    <div class="right" data-jsid="buttonRight">
      <img class="arrow" src="images/video/arrow-right.svg">
    </div>
  </div>
</div>

Becomes this javascript code

const categoryParent = document.createElement('div');
categoryParent.setAttribute('class','categoryparent');

const categoryName = document.createElement('div');
categoryName.setAttribute('class','categoryname');
categoryParent.appendChild(categoryName);

const h4 = document.createElement('h4');
categoryName.appendChild(h4);
h4.innerHTML = "Generate JS Code!";

const topHolder = document.createElement('div');
topHolder.setAttribute('class','mainvideoholder');
categoryParent.appendChild(topHolder);

const buttonLeft = document.createElement('div');
buttonLeft.setAttribute('class','left');
topHolder.appendChild(buttonLeft);

const arrow = document.createElement('img');
arrow.setAttribute('class','arrow');
arrow.setAttribute('src','/images/video/arrow-left.svg');
buttonLeft.appendChild(arrow);

const videoHolder = document.createElement('div');
videoHolder.setAttribute('class','videos');
topHolder.appendChild(videoHolder);
videoHolder.innerHTML = "Holding videos since 1977";

const buttonRight = document.createElement('div');
buttonRight.setAttribute('class','right');
topHolder.appendChild(buttonRight);

const arrow1 = document.createElement('img');
arrow1.setAttribute('class','arrow');
arrow1.setAttribute('src','images/video/arrow-right.svg');
buttonRight.appendChild(arrow1);

emrahgunduz/dom-iterator

DomIterator