Javascript uses the **document object model (DOM)** to manipulate the DOM elements. **Rendering** refers to showing the output in the browser.

The DOM establishes parent-child relationships, and adjacent sibling relationships, among the various elements in the HTML file. 

<br>

# Code

An example of an HTML file and its corresponding DOM is shown below:

<!DOCTYPE html>
<html>
<body>
  <h1>My First Web Page</h1>
  <p>My First Paragraph</p>
  <p id="demo"></p>
</body>
</html>

# Implementation

We can use Javascript to access and even change these DOM elements, hence, altering the output on the screen. The `getElementById` method and the `innerHTML` property are particularly useful for accessing and changing these elements. 

<br>

## Example

The following example demonstrates how Javascript alters the contents of the DOM using these methods when an action is performed.

<html>
    <head>
    </head>
    <body>
        <h1>My First Web Page</h1>
        <p>My First Paragraph</p>
        <p id="demo"> This content will change on clicking the button</p>
        <button type="button" onclick='document.getElementById("demo").innerHTML = "New content!"'>Click to render new content</button>

    </body>
</html>

codemirror

## Explanation

In the above code, we have added Javascript code to the `onclick` property of the button. When the user presses the button, the Javascript code finds an element with the `id = demo` in the DOM and alters the contents of this element.

What is JavaScript rendering?

Javascript uses the document object model (DOM) to manipulate the DOM elements. Rendering refers to showing the output in the browser. The DOM establishes parent-child relationships, and adjacent sibling relationships, among the various elements in the HTML file.  Code An example of an HTML file and its corresponding DOM is shown below: 