HTML DOM Mark Object: Accessing Marked Text Elements

HTML DOM Mark Object: Accessing Marked Text Elements

The HTML DOM Mark object represents an HTML <mark> element. The <mark> element is used to highlight or mark text within a document, often to show where the text is relevant or important in a particular context. Through the DOM Mark object, JavaScript can access, modify, and interact with these highlighted sections dynamically, making web pages more interactive and responsive. This article provides a comprehensive guide to using the HTML DOM Mark object.

What is the HTML <mark> Element?

The <mark> element is a semantic HTML tag designed for highlighting portions of text. It’s a crucial tool for drawing user attention to specific parts of content, such as when showing search results or emphasizing important sections of text. The element is commonly rendered with a yellow background, though this can be changed with CSS.

Purpose of the Mark Object

The Mark object allows JavaScript to:

• Access and modify the content of highlighted text.
• Style the highlighted text dynamically.
• Add or remove <mark> elements based on user interaction or application logic.
• Manage highlighted text areas in a dynamic way.

Accessing the <mark> Element

To work with a <mark> element, you first need to access it through the DOM using JavaScript. The most common way is to use methods like getElementById, getElementsByTagName, or querySelector.

Here’s an example demonstrating how to access a <mark> element:

<p>This is a paragraph with <mark id="importantText">important</mark> text.</p>

<script>
  const markElement = document.getElementById("importantText");
  if (markElement) {
    console.log("Marked text:", markElement.textContent); // Output: Marked text: important
  }
</script>

In this example, document.getElementById("importantText") retrieves the <mark> element with the id “importantText”. The textContent property is then used to access the text content.

Key Properties and Methods

The Mark object provides a range of properties and methods for working with marked text. Some key ones are:

Property/Method	Type	Description
`id`	String	Gets or sets the ID of the <mark> element.
`textContent`	String	Gets or sets the text content of the <mark> element.
`innerHTML`	String	Gets or sets the HTML content within the <mark> element.
`className`	String	Gets or sets the class attribute of the <mark> element.
`style`	Object	Gets or sets the style attributes of the <mark> element.
`getAttribute(attributeName)`	Function	Returns the value of the specified attribute of the <mark> element.
`setAttribute(attributeName, value)`	Function	Sets the specified attribute of the <mark> element.
`removeAttribute(attributeName)`	Function	Removes the specified attribute of the <mark> element.

Basic Examples

Accessing and Modifying Text Content

This example demonstrates how to access and modify the content of a <mark> element.

<p>This is a sentence with <mark id="markExample">highlighted text</mark>.</p>
<button id="changeTextBtn">Change Text</button>

<script>
  const markEx = document.getElementById("markExample");
  const changeTextButton = document.getElementById("changeTextBtn");

  changeTextButton.addEventListener("click", () => {
    if (markEx) {
      markEx.textContent = "modified text";
    }
  });
</script>

Here, when the button is clicked, the textContent of the <mark> element is changed to “modified text”.

Styling a <mark> Element

This example shows how to dynamically style a <mark> element.

<p>This is a <mark id="styleMark">highlighted</mark> word.</p>
<button id="changeStyleBtn">Change Style</button>

<script>
  const styleMark = document.getElementById("styleMark");
    const styleButton = document.getElementById("changeStyleBtn");
    styleButton.addEventListener("click", () => {
    if (styleMark) {
        styleMark.style.backgroundColor = "lightblue";
        styleMark.style.color = "darkred";
        styleMark.style.fontWeight = "bold";
        styleMark.style.padding = "2px";
        styleMark.style.borderRadius = "3px";
    }
  });
</script>

In this example, clicking the button modifies the background color, text color, font weight, and adds padding and border radius to the <mark> element using its style property.

Adding a <mark> Element Dynamically

This example shows how to add a <mark> element to a paragraph dynamically.

<p id="paragraphText">This is a paragraph without highlighted text.</p>
<button id="addMarkBtn">Add Highlight</button>

<script>
    const paragraphElem = document.getElementById("paragraphText");
    const addMarkButton = document.getElementById("addMarkBtn");

  addMarkButton.addEventListener("click", () => {
    if (paragraphElem) {
        const markElement = document.createElement("mark");
      markElement.textContent = "added highlight";
      paragraphElem.innerHTML = paragraphElem.innerHTML + " " + markElement.outerHTML;
    }
  });
</script>

This code appends a newly created <mark> element with the text “added highlight” to the end of the paragraph when the button is clicked.

Using innerHTML

This example demonstrates using innerHTML to add more complex content to the <mark> element.

<p>This is <mark id="htmlMark"></mark> text.</p>
<button id="addHtmlBtn">Add HTML</button>

<script>
    const htmlMark = document.getElementById("htmlMark");
    const htmlButton = document.getElementById("addHtmlBtn");

    htmlButton.addEventListener("click", () => {
      if (htmlMark) {
        htmlMark.innerHTML = "<em>important</em> <strong>highlight</strong>";
      }
    });
</script>

Here, clicking the button inserts HTML content including <em> and <strong> tags inside the <mark> element.

Removing the <mark> Element

This example demonstrates how to remove a <mark> element.

<p>This is <mark id="removeMark">removable</mark> marked text.</p>
<button id="removeMarkButton">Remove Mark</button>

<script>
 const removeMark = document.getElementById("removeMark");
 const removeMarkBtn = document.getElementById("removeMarkButton");
  removeMarkBtn.addEventListener("click", () => {
    if (removeMark) {
        removeMark.remove();
    }
  });
</script>

When the button is clicked, the <mark> element is removed from the DOM.

Advanced Usage

Dynamic Highlighting Based on Search

One common use case is to dynamically highlight text based on search results.

<p id="searchPara">This is some sample text where we might search for certain words.</p>
<input type="text" id="searchInput" placeholder="Search...">
<button id="searchButton">Search</button>

<script>
 const searchPara = document.getElementById("searchPara");
 const searchInput = document.getElementById("searchInput");
 const searchBtn = document.getElementById("searchButton");

 searchBtn.addEventListener("click", () => {
  const searchText = searchInput.value.trim();
    if (searchText && searchPara) {
      const originalText = searchPara.textContent;
      const regex = new RegExp(`(${searchText})`, 'gi');
        searchPara.innerHTML = originalText.replace(regex, '<mark>$1</mark>');
    }
 });
</script>

In this example, when the user enters a search term and clicks “Search,” any occurrences of that term within the paragraph are highlighted using <mark> elements.

Real-time Highlighting on Input

Another advanced use case is highlighting as the user types in a text field. This can be done by listening to input events.

<p id="realtimePara">Realtime highlight will be here.</p>
<input type="text" id="realtimeInput" placeholder="Type to Highlight...">

<script>
const realtimePara = document.getElementById("realtimePara");
const realtimeInput = document.getElementById("realtimeInput");

realtimeInput.addEventListener("input", () => {
    const searchText = realtimeInput.value.trim();
    if (realtimePara) {
        const originalText = realtimePara.textContent;
        const regex = new RegExp(`(${searchText})`, 'gi');
        realtimePara.innerHTML = originalText.replace(regex, '<mark>$1</mark>');
    }
});
</script>

Here, as the user types, the text that matches the input is dynamically highlighted inside the paragraph.

Practical Applications

The HTML DOM Mark object finds extensive use in various applications:

• Search Result Highlighting: Highlighting search terms within content to draw attention to relevant sections.
• Text Annotation: Marking important or relevant parts of a text for study or review.
• User Onboarding: Highlighting specific parts of the UI to guide new users.
• Text Editing Tools: Implementing visual feedback to indicate changes in the text.

Browser Support

The Mark object and the underlying <mark> element have excellent browser support across all modern browsers, ensuring consistent behavior across different platforms.

Conclusion

The HTML DOM Mark object provides a powerful way to dynamically manipulate highlighted text elements on a web page. This guide has covered the fundamental concepts and practical examples that illustrate how to effectively use the Mark object. By understanding the capabilities of the <mark> element and the Mark object, developers can create more interactive, user-friendly, and visually engaging web experiences. This includes highlighting text based on user interactions or dynamic application needs, contributing to a more rich and interactive web.