HTML DOM em Object: Accessing Emphasized Text Elements

The HTML DOM em object represents an <em> element in HTML, which is used to emphasize text. Using JavaScript, you can access and manipulate these emphasized elements to dynamically alter their content, styles, and behavior. This guide will cover how to effectively use the em object in your web development projects.

What is the HTML em Element?

The <em> element in HTML is used to denote emphasized text. By default, most browsers display this text in italics, but the appearance can be customized with CSS. The em element semantically indicates that the enclosed text has an emphasis, which can be used by screen readers and other assistive technologies.

Purpose of the em Object

The HTML DOM em object allows you to:

• Access <em> elements in the HTML document.
• Modify the content of emphasized text.
• Change the style of emphasized text using JavaScript.
• Dynamically respond to user interactions and update emphasized text as needed.
• Add, remove, or alter attributes of the <em> elements.

Accessing em Elements

To start using the em object, you first need to access the <em> elements in your HTML document. You can do this using methods like getElementById, getElementsByTagName, getElementsByClassName, or querySelector and querySelectorAll.

Example 1: Accessing by Tag Name

This is the most common way to select elements using the tag name. This is useful when you want to access all elements of the same kind.

<p>This is a <em>paragraph</em> with <em>emphasized</em> text.</p>
<p>Another <em>paragraph</em> here.</p>

<script>


  const emElements_tag = document.getElementsByTagName("em");
  console.log("Number of em elements:", emElements_tag.length);
  for (let i = 0; i < emElements_tag.length; i++) {
    console.log(
      "Em element content at index " + i + ": ",
      emElements_tag[i].textContent
    );
    emElements_tag[i].style.color = "blue"; //change style of each em
  }


</script>

Output:

Number of em elements: 3
Em element content at index 0:  paragraph
Em element content at index 1:  emphasized
Em element content at index 2:  paragraph

The emphasized text will also change to blue color.

Example 2: Accessing by Class Name

Here’s an example of using a class name to access an <em> tag. This approach is useful for grouping similar types of em elements.

<p>
  This is a <em class="special-em">paragraph</em> with
  <em class="special-em">emphasized</em> text.
</p>
<p>Another <em>paragraph</em> here.</p>

<script>


  const emElements_class = document.getElementsByClassName("special-em");
  console.log("Number of special em elements:", emElements_class.length);
  for (let i = 0; i < emElements_class.length; i++) {
    console.log(
      "Special em element content at index " + i + ": ",
      emElements_class[i].textContent
    );
    emElements_class[i].style.fontStyle = "normal"; //change style of each em
    emElements_class[i].style.fontWeight = "bold";
  }


</script>

Output:

Number of special em elements: 2
Special em element content at index 0:  paragraph
Special em element content at index 1:  emphasized

The emphasized text with the class special-em will also change to normal font style and become bold.

Example 3: Accessing by ID

If you have a specific <em> element with a unique ID, you can access it directly using getElementById. This is the quickest and the recommended approach if there is only one element.

<p>This is a <em id="myEm">paragraph</em> with emphasized text.</p>

<script>


  const emElement_id = document.getElementById("myEm");
  console.log("Em element content:", emElement_id.textContent);
  emElement_id.style.backgroundColor = "yellow";


</script>

Output:

Em element content: paragraph

The background color of the emphasized text with ID myEm will also change to yellow.

Example 4: Using querySelector

The querySelector method lets you use CSS-style selectors to find elements. This gives you a more flexible way to access <em> elements.

<p>
  This is a <em class="highlight">paragraph</em> with
  <em id="uniqueEm">emphasized</em> text.
</p>

<script>


  const emElement_query = document.querySelector("em#uniqueEm");
  if (emElement_query) {
    console.log("Em element content (querySelector):", emElement_query.textContent);
    emElement_query.style.textDecoration = "underline";
  }
  const emElement_query2 = document.querySelector("em.highlight");
  if (emElement_query2) {
    console.log("Em element content (querySelector):", emElement_query2.textContent);
       emElement_query2.style.textTransform = "uppercase";
  }


</script>

Output:

Em element content (querySelector): emphasized
Em element content (querySelector): paragraph

The emphasized text with ID uniqueEm will also be underlined and the one with class highlight will be transformed to uppercase.

Manipulating em Elements

Once you have accessed an <em> element, you can use its properties and methods to manipulate it.

Example 5: Changing Content

You can change the text content of an <em> element using the textContent or innerHTML property.

<p>This is a <em>paragraph</em> with emphasized text.</p>

<script>


  const emElement_content = document.querySelector("em");
  emElement_content.textContent = "updated text";


</script>

The text ‘paragraph’ will change to ‘updated text’

Example 6: Changing Styles

Use the style property to modify the CSS styles of <em> elements directly from JavaScript.

<p>This is a <em>paragraph</em> with emphasized text.</p>

<script>


  const emElement_style = document.querySelector("em");
  emElement_style.style.color = "red";
  emElement_style.style.fontSize = "1.2em";
  emElement_style.style.fontWeight = "bold";


</script>

The style of the emphasized text will also change to red color, 1.2 em font size and font weight to bold.

Example 7: Adding and Removing Attributes

You can add and remove attributes from <em> elements using the setAttribute and removeAttribute methods.

<p>This is a <em>paragraph</em> with emphasized text.</p>

<script>


  const emElement_attribute = document.querySelector("em");
  emElement_attribute.setAttribute("title", "This is emphasized text");
  emElement_attribute.setAttribute("data-custom", "custom value");
  console.log(
    "Title attribute:",
    emElement_attribute.getAttribute("title")
  );
   console.log(
    "Custom data attribute:",
    emElement_attribute.getAttribute("data-custom")
  );
  emElement_attribute.removeAttribute("title");
    console.log(
    "Title attribute after removing:",
    emElement_attribute.getAttribute("title")
  );


</script>

Output:

Title attribute: This is emphasized text
Custom data attribute: custom value
Title attribute after removing: null

The ‘title’ attribute will be added to the emphasized text with the value ‘This is emphasized text’. The ‘data-custom’ attribute with the value ‘custom value’ will also be added. The console will also show the title and the custom data attribute values and the title attribute as ‘null’ after removing it.

Real World Applications

Here are some real-world use cases for the em object:

• Dynamic Highlighting: Emphasize specific words or phrases based on user interaction or search criteria.
• Accessibility: Dynamically adjust the emphasis of text based on user preferences or context.
• Interactive Tutorials: Emphasize important steps or instructions in an interactive tutorial.
• User Feedback: Highlight user-entered text that matches specific patterns or keywords.
• Text Styling: Change text emphasis dynamically in response to user choices in font settings or dark mode/light mode.

Browser Compatibility

The HTML DOM em object is supported by all modern web browsers, ensuring consistency across different platforms.

Conclusion

The HTML DOM em object provides a powerful way to access and manipulate emphasized text elements in your HTML documents. By using JavaScript, you can dynamically update the content, style, and attributes of <em> elements, creating more interactive and engaging user experiences. This comprehensive guide should equip you with the knowledge necessary to use the em object effectively in your web development projects.