DOM MANIPULATION
DOM - Document Object Model, It is an API (Application Programming Interface) for manipulating HTML . They represents HTML structure. The structure is like tree. These documents allow JS to manipulate the HTML document.
The below example shows the DOM structure.
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>DOM MANIPULATION</h1>
<p> DOM - Document Object Model</p>
</body>
</html>
Once the HTML file is created the DOM is created, with the help of the DOM we can manipulate the HTML using JS. Let's see some methods of DOM manipulation.
document.getElementById("id-value"):
We can select the element by its id value in the document.
<p id="para"> DOM - Document Object Model</p>
<script>
console.log(document.getElementById("para"))
// console - "DOM - Document Object Model"
</script>
document.getElementByClass("class-value"):
We can select the element by its class value in the document.
<p class="para"> DOM - Document Object Model</p>
<script>
console.log(document.getElementByClass("para"))
// console - "DOM - Document Object Model"
</script>
document.createElement("element"):
We can create an element in HTML using document.createElement
document.removeElement("element"):
We can remove an element in HTML using document.removeElement.
There are many other ways to manipulate the HTML content using Javascript. DOM manipulation enables the web in more interactive way. These made the web more attractive, user friendly and more interactive.
Thank You!!!
Have a good day!!!
No comments:
Post a Comment