"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.
<Implementation Challenges>
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)")
<Algorithm>
* 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”.
<Implementation>
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 classif(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 Nodeif(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 functionhasClass(bodyHtml.childNodes[i]); }}<5> Return the final array.
hasClass(bodyHtml); // To use recursion for the first time, call recursion functionreturn 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;};