[Implementation] document.getElementsByClassName(className) using R...

"getElementsByClassName(className)” is a method that returns a collection of all elements in the document with the specific class name.

Let’s see the example below.

<!DOCTYPE html>

<html>

<body>

<div class=“numberOne”>First div element.</div>

<div class=“numberOne”>Second div element.</div>

<button onclick=“myFunction()”>Try it</button>

<script>

function myFunction() {

var x = document.getElementsByClassName(“numberOne”);

x[0].innerHTML = “changed div class”;

</script>

</body>

</html>

In the <script>,

"var x = document.getElementsByClassName(“numberOne”);"

means that x variable is declared to get elements by the class name “numberOne”.

And, it was written that the content of the first value of x (x[0]) is changed to “changed div class”.

So, the content of the first value of x (“First div element.”) should be changed to “changed div class”.

As above, it can get elements by class name.

Get all elements with the specific class name, and returns an array of the elements.

(That is, it should be operated the same as "document.getElementsByClassName(className)")

* Select each element in <body> of HTML.

* If each element has a class and the class is the same as “className", it is added to an array.

* Check if each element has child Node.

* If it has, check if the child Node has a class and the class is the same as className.(Use recursion function)

* If the child Node has, it is added to an array.

* Like this way, it can check if element in all elements has a class and the class name is the same as “className”.

Let’s do implement "document.getElementsByClassName(className)".

<1> Declare <body> of HTML and an empty array.

var bodyHtml = document.body; // <body>

var result = [];

<2> Declare a function for recursion.

var hasClass = function(bodyHtml) {

<3> If each element has a class and the class is same as the “className”, it is added to an array.

var hasClass = function(bodyHtml) {

// Use classList to control specific class

if(bodyHtml.classList && bodyHtml.classList.contains(className)) {

result.push(bodyHtml); // add to the array "result"

<4> Check if each element has child Node.

If it has, each child Node is used as an argument for the recursion function that was declared already.

// using 'hasChildNodes()'

// if each element has Child Node

if(bodyHtml.hasChildNodes()) {

// if it has child Node,

for(var i = 0; i< bodyHtml.childNodes.length; i++) {

// each child Node is used as an argument for recursion function

hasClass(bodyHtml.childNodes[i]);

<5> Return the final array.

hasClass(bodyHtml); // To use recursion for the first time, call recursion function

return result; // return the final array "result"

<Code>

var getElementsByClassName = function(className

){

var bodyHtml = document.body;

var result = []

var hasClass = function(bodyHtml) {

if(bodyHtml.classList && bodyHtml.classList.contains(className)) {

result.push(bodyHtml);

if(bodyHtml.hasChildNodes()) {

for(var i = 0; i< bodyHtml.childNodes.length; i++) {

hasClass(bodyHtml.childNodes[i]);

hasClass(bodyHtml);

return result;

};

[Implementation] document.getElementsByClassName(className) using Recursion