JavaScript DOM Code Examples PDF Download Laurence Svekis

JavaScript DOM Code Examples

What is the DOM in JavaScript and how can we access it?

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. We can access the DOM using JavaScript’s document object. Here’s an example:

<!DOCTYPE html>

<html>

  <head>

    <title>My Page</title>

  </head>

  <body>

    <p>Hello, world!</p>

    <button id=”myButton”>Click me!</button>

    <script src=”script.js”></script>

  </body>

</html>

// Accessing the DOM

const myButton = document.getElementById(‘myButton’);

const myParagraph = document.getElementsByTagName(‘p’)[0];

In this example, we’re accessing the DOM using document.getElementById and document.getElementsByTagName. The first line gets the button element with an id of myButton, and the second line gets the first p element on the page.

How can we add an event listener to a DOM element in JavaScript?

We can add an event listener to a DOM element using the addEventListener method. Here’s an example:

// Adding an event listener

const myButton = document.getElementById(‘myButton’);

myButton.addEventListener(‘click’, () => {

  console.log(‘Button clicked!’);

});

In this example, we’re adding a click event listener to the button with an id of myButton. When the button is clicked, the arrow function is called, which logs a message to the console.

How can we change the text content of a DOM element in JavaScript?

We can change the text content of a DOM element using the textContent property. Here’s an example:

<!DOCTYPE html>

<html>

  <head>

    <title>My Page</title>

  </head>

  <body>

    <p id=”myParagraph”>Hello, world!</p>

    <script src=”script.js”></script>

  </body>

</html>

// Changing the text content

const myParagraph = document.getElementById(‘myParagraph’);

myParagraph.textContent = ‘Goodbye, world!’;

In this example, we’re changing the text content of the p element with an id of myParagraph from “Hello, world!” to “Goodbye, world!” using the textContent property.

How can we change the CSS styles of a DOM element in JavaScript?

We can change the CSS styles of a DOM element using the style property. Here’s an example:

<!DOCTYPE html>

<html>

  <head>

    <title>My Page</title>

    <style>

      #myDiv {

        background-color: red;

        color: white;

      }

    </style>

  </head>

  <body>

    <div id=”myDiv”>Hello, world!</div>

    <script src=”script.js”></script>

  </body>

</html>

// Changing the CSS styles

const myDiv = document.getElementById(‘myDiv’);

myDiv.style.backgroundColor = ‘green’;

myDiv.style.color = ‘black’;

In this example, we’re changing the background color of the div element with an id of myDiv from red to green, and the text color from white to black using the style property.

How can we create a new DOM element in JavaScript and add it to the page?

We can create a new DOM element using the createElement method, and we can add it to the page using the appendChild or insertBefore method. Here’s an example:

<!DOCTYPE html>

<html>

  <head>

    <title>My Page</title>

  </head>

  <body>

    <div id=”myDiv”>Hello, world!</div>

    <script src=”script.js”></script>

  </body>

</html>

// Creating and adding a new element

const newParagraph = document.createElement(‘p’);

newParagraph.textContent = ‘This is a new paragraph.’;

const myDiv = document.getElementById(‘myDiv’);

myDiv.appendChild(newParagraph);

In this example, we’re creating a new p element with the text content “This is a new paragraph.”, and then adding it to the div element with an id of myDiv using the appendChild method.

How can we remove a DOM element from the page in JavaScript?

We can remove a DOM element from the page using the remove method. Here’s an example:

<!DOCTYPE html>

<html>

  <head>

    <title>My Page</title>

  </head>

  <body>

    <div id=”myDiv”>Hello, world!</div>

    <script src=”script.js”></script>

  </body>

</html>

// Removing an element

const myDiv = document.getElementById(‘myDiv’);

myDiv.remove();

In this example, we’re removing the div element with an id of myDiv from the page using the remove method.

How can we get the value of a form input in JavaScript?

We can get the value of a form input using the value property. Here’s an example:

<!DOCTYPE html>

<html>

  <head>

    <title>My Page</title>

  </head>

  <body>

    <form>

      <label for=”myInput”>Enter some text:</label>

      <input type=”text” id=”myInput” name=”myInput”>

      <button type=”submit”>Submit</button>

    </form>

    <script src=”script.js”></script>

  </body>

</html>

// Getting the value of a form input

const myInput = document.getElementById(‘myInput’);

const inputValue = myInput.value;

console.log(inputValue);

In this example, we’re getting the value of the input element with an id of myInput using the value property, and logging it to the console.

How can we set the value of a form input in JavaScript?

We can set the value of a form input using the value property. Here’s an example:

<!DOCTYPE html>

<html>

  <head>

    <title>My Page</title>

  </head>

  <body>

    <form>

      <label for=”myInput”>Enter some text:</label>

      <input type=”text” id=”myInput” name=”myInput”>

      <button type=”submit”>Submit</button>

    </form>

    <script src=”script.js”></script>

  </body>

</html>

// Setting the value of a form input

const myInput = document.getElementById(‘myInput’);

myInput.value = ‘Some text’;

In this example, we’re setting the value of the input element with an id of myInput to “Some text” using the value property.

How can we check if a DOM element has a specific class in JavaScript?

We can check if a DOM element has a specific class by using the classList property and the contains method. Here’s an example:

<!DOCTYPE html>

<html>

  <head>

    <title>My Page</title>

    <style>

      .myClass {

        color: red;

      }

    </style>

  </head>

  <body>

    <div id=”myDiv” class=”myClass”>Hello, world!</div>

    <script src=”script.js”></script>

  </body>

</html>

// Checking if an element has a specific class

const myDiv = document.getElementById(‘myDiv’);

if (myDiv.classList.contains(‘myClass’)) {

  console.log(‘The element has the class “myClass”.’);

} else {

  console.log(‘The element does not have the class “myClass”.’);

}

In this example, we’re checking if the div element with an id of myDiv has the class myClass using the classList property and the contains method.

How can we add a class to a DOM element in JavaScript?

We can add a class to a DOM element using the classList property and the add method. Here’s an example:

<!DOCTYPE html>

<html>

  <head>

    <title>My Page</title>

    <style>

      .myClass {

        color: red;

      }

    </style>

  </head>

  <body>

    <div id=”myDiv”>Hello, world!</div>

    <script src=”script.js”></script>

  </body>

</html>

// Adding a class to an element

const myDiv = document.getElementById(‘myDiv’);

myDiv.classList.add(‘myClass’);

In this example, we’re adding the class myClass to the div element with an id of myDiv using the classList property and the add method. This will change the text color of the element to red, as defined in the style tag.