The class attribute in HTML is used to define a class for one or more HTML elements. This way, a lot of elements can belong to the same class of elements and share the same style in the style sheet, so you don't have to write the same style for every element over and over again.
That being said, sometimes you want to change styles dynamically, depending on the user's input. For example, you want to implement day/night mode for your web page, which can effectively be done with changing element's class.
The DOM or Document Object Model is an interface that creates a tree structure from XML or HTML. The hierarchy of the document's elements is represented through the DOM. A tree is made up of nodes and branches, where elements are nodes and elements' relations are branches. In the DOM Tree, the root node is html - the very first element necessary to start marking up an HTML document:
<!DOCTYPE HTML> <html> <head> <title>Web page title</title> </head> <body> <h1>Some heading</h1> </body> </html>
Note: Internet Explorer 8 and 9 do not support
classList has a couple of methods that we can leverage:
add(class_name)- adds a new class
class_nameto the list.
remove(class_name)- removes a class
class_namefrom the list.
toggle(class_name)- adds class
class_nameif it is not already added, otherwise removes it.
contains(class_name)- checks whether
class_nameis in the list of classes applied to the HTML element.
What is PHP: - Who invented PHP, how it works, answers to all such questions about PHP, and much other information, you are going to