Javascript | Accessing and manipulating HTML elements

When building web applications, one of the most important tasks is manipulating HTML elements. JavaScript provides many methods to access and modify the content and structure of HTML elements. In this article, we will explore how to access and manipulate HTML elements using JavaScript.

Accessing HTML Elements: To access an HTML element using JavaScript, we use the document object, which represents the entire HTML document. Here are some common methods to access HTML elements:

1. getElementById(): This method is used to get an HTML element by its id.

var element = document.getElementById("myElement");

2. getElementsByClassName(): This method is used to get HTML elements by their class name.

var elements = document.getElementsByClassName("myClass");

3. getElementsByTagName(): This method is used to get HTML elements by their tag name.

var elements = document.getElementsByTagName("p");

4. querySelector(): This method is used to get an HTML element by its CSS selector.

var element = document.querySelector("#myElement");

Manipulating HTML Elements: Once we have accessed an HTML element, we can use JavaScript to manipulate its content and structure. Here are some common methods to manipulate HTML elements:

1. Changing the HTML Content: We can change the content of an HTML element using the innerHTML property.

var element = document.getElementById("myElement");
element.innerHTML = "New content";

2. Changing the HTML Attribute: We can change the value of an HTML attribute using the setAttribute() method.

var element = document.getElementById("myElement");
element.setAttribute("src", "newImage.png");

3. Changing the CSS Style: We can change the style of an HTML element using the style property.

var element = document.getElementById("myElement");
element.style.color = "red";

4. Adding or Removing Classes: We can add or remove classes to an HTML element using the classList property.

var element = document.getElementById("myElement");
element.classList.add("newClass");
element.classList.remove("oldClass");

5. Creating New Elements: We can create new HTML elements using the createElement() method.

var newElement = document.createElement("div");

Conclusion: In this article, we have learned how to access and manipulate HTML elements using JavaScript. These methods are just the tip of the iceberg, there are many more ways to manipulate HTML elements using JavaScript. By understanding how to access and manipulate HTML elements, we can build dynamic and interactive web applications.