JavaScript Cheat Sheet 10.58: JavaScript HTML DOM

Basics of JavaScript HTML DOM

JavaScript HTML DOM (Document Object Model) is a powerful tool for web developers to interact with HTML elements dynamically. In this tutorial, we’ll cover the basics of JavaScript DOM manipulation. We’ll learn how to access HTML elements, modify their content, style them, and handle events using JavaScript.

1. Accessing HTML Elements

JavaScript allows us to access HTML elements using various methods provided by the DOM API.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Accessing HTML Elements</title>
</head>
<body>

<h1 id="heading">Hello World!</h1>

<script>
  // Accessing element by ID
  var headingElement = document.getElementById("heading");
  console.log(headingElement.innerHTML); // Output: Hello World!
</script>

</body>
</html>

Explanation

We have an <h1> element with the ID “heading”.
In the <script> tag, we use document.getElementById("heading") to select the element with the specified ID.
We then access the innerHTML property of the selected element to retrieve its content.

2. Modifying HTML Elements

JavaScript enables us to modify HTML elements dynamically by changing their content, attributes, or structure.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Modifying HTML Elements</title>
</head>
<body>

<p id="demo">This is a paragraph.</p>

<script>
  // Modifying element content
  var paragraph = document.getElementById("demo");
  paragraph.innerHTML = "This paragraph is modified."; // Change text content

  // Modifying element attributes
  paragraph.setAttribute("style", "color: red; font-size: 20px;"); // Change style
</script>

</body>
</html>

Explanation:

We have a <p> element with the ID “demo”.
In the <script> tag, we select the element using document.getElementById("demo").
We then modify its content using the innerHTML property and its style using the setAttribute() method.

3 Styling HTML Elements

JavaScript allows us to dynamically apply CSS styles to HTML elements.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Styling HTML Elements</title>
</head>
<body>

<button id="myButton">Click me</button>

<script>
  var button = document.getElementById("myButton");

  // Apply CSS styles
  button.style.backgroundColor = "blue";
  button.style.color = "white";
  button.style.padding = "10px 20px";
</script>

</body>
</html>

Explanation:

We have a <button> element with the ID “myButton”.
In the <script> tag, we select the element using document.getElementById("myButton").
We then modify its style properties directly using the style object.

4. Handling Events:
JavaScript allows us to handle various events such as clicks, mouse movements, and keyboard inputs.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Handling Events</title>
</head>
<body>

<button id="myButton">Click me</button>
<p id="message"></p>

<script>
  var button = document.getElementById("myButton");
  var message = document.getElementById("message");

  // Event handler function
  function showMessage() {
    message.innerHTML = "Button clicked!";
  }

  // Event listener
  button.addEventListener("click", showMessage);
</script>

</body>
</html>

Explanation:

We have a <button> element with the ID “myButton” and a <p> element with the ID “message”.
In the <script> tag, we define a function showMessage() to display a message.
We use addEventListener() to attach an event listener to the button element, listening for the “click” event.
When the button is clicked, the showMessage() function is executed, updating the content of the message paragraph.

Conclusion

In this tutorial, we’ve covered the basics of JavaScript HTML DOM manipulation. You’ve learned how to access HTML elements, modify their content and styles, and handle events dynamically using JavaScript. Practice these concepts to become proficient in web development with JavaScript.