Connect with us:
Type something to search...
to navigateto selectESC to close

JavaScript DOM Manipulation

JavaScript DOM Manipulation

The Document Object Model (DOM) represents the structure of a web page. JavaScript can be used to manipulate the DOM to change the content, style, or structure of a web page.

Selecting Elements

You can select elements using methods like getElementById, querySelector, or querySelectorAll:

let title = document.getElementById("title");
let paragraphs = document.querySelectorAll("p");

Modifying Content

You can change the content of an element using innerHTML or textContent:

title.textContent = "Updated Title";

Changing Styles

You can modify the style of an element using the style property:

title.style.color = "blue";
title.style.fontSize = "24px";

Example

<!DOCTYPE html>
<html>
<body>
    <h1 id="title">Original Title</h1>
    <script>
        let title = document.getElementById("title");
        title.textContent = "Updated Title";
        title.style.color = "blue";
    </script>
</body>
</html>

Next: Advanced Events →