I traversed DOM and made my life easy.

A few days ago, I was trying to create a periodic table in ReactJS(View Library, quite famous too) and after fishing around I got the right sample built in HTML and CSS. Without a further ado, I started building my folder/files structure, components in React and by the time I was about to populate DOM, I came to know about a hurdle that will change my life, not actually, but it did.

If any of you don’t know, the periodic table is a collection of chemical elements assembled on the basis of their atomic number, electron configuration, and few other properties.

I realised that I have to collect data which comprises of chemical element’s name, their symbols, and categories which will help me in defining chemical groups. I got the HTML in front of me but copy pasting was not I wanted to do in a ReactJS project. This is the point where I got the idea of writing a JavaScript which will gather these data for me as a JSON object.

It was already mid-night and I had to wake up early in the morning so that I can be on time at my workplace. But the curiosity urged me to try this. I prepared myself a coffee, stretch my hands and started writing the script.

I won’t be displaying the whole HTML structure but few elements which will give you guys an overview of our chemical elements list.

Now, I have to travel a.k.a traverse the DOM and pick up required information with which I can create a JSON object and can use it in my ReactJS project.

Firstly, I targeted parent element with its id periodic-table. Then I collected its children. The collection took shape of an array and iterating an array was quite an easy thing to do in JavaScript. Iterating over an array helped me in getting all the required inner child nodes which contain title, symbols and class name.

Every round of loop collected required data and pushed it into an array called elementArray.

In the end, I got my final result with the help of which I created an API which will display a list of all the chemical elements. This API I used it in my ReactJS and rendered the components with an ease.

Final result:

So this was my experience of traveling DOM and get to know more about JavaScript.

Keep Coding 💻