HTML DOM Strike Object: A Deep Dive into Strikethrough Elements

The HTML DOM strike object provides an interface to access and manipulate HTML <strike> elements, which are used to render text with a strikethrough effect. While the <strike> element itself is considered deprecated in favor of CSS styling, understanding its DOM object can be useful when working with older codebases or when you encounter it in dynamically generated content. This article provides a thorough guide on how to interact with strike elements using JavaScript and the DOM.

Understanding the <strike> Element

The <strike> element is an inline element that renders text with a horizontal line drawn through the middle, indicating that the text is no longer valid or relevant. Although it’s been superseded by CSS properties such as text-decoration: line-through, the DOM object still provides functionality for access and manipulation of these elements.

Accessing <strike> Elements

To work with a <strike> element using JavaScript, you first need to access it using the DOM. You can achieve this by methods like:

• document.getElementById(): Access a single element by its unique ID.
• document.getElementsByTagName(): Access all elements of a given tag name.
• document.querySelector(): Access the first element matching a CSS selector.
• document.querySelectorAll(): Access all elements matching a CSS selector.

Properties of the HTML DOM Strike Object

The strike object inherits standard HTML element properties, but doesn’t have any unique specific properties. Some notable properties include:

Property	Type	Description
`id`	String	The unique identifier of the element.
`innerHTML`	String	The HTML content of the element, including any nested tags.
`textContent`	String	The text content of the element, excluding any HTML tags.
`className`	String	The class name(s) assigned to the element.
`style`	Object	An object representing the inline styles of the element.
`parentNode`	Object	The parent node of the element.
`childNodes`	NodeList	A list of child nodes of the element.

Note: While the strike object itself doesn’t have specific attributes, it behaves like any standard HTML element in the DOM. 🤔

Practical Examples

Let’s explore a few examples demonstrating how to access and manipulate <strike> elements using JavaScript.

Example 1: Accessing by ID

This example demonstrates accessing a strikethrough element by its ID and changing its content.

<p>
  Original Price:
  <strike id="strikePrice1">$100</strike>
</p>
<button id="changePriceBtn1">Change Price</button>

<script>
  document.getElementById("changePriceBtn1").addEventListener("click", () => {
    const strikeElement1 = document.getElementById("strikePrice1");
    strikeElement1.textContent = "$80";
  });
</script>

In this example, clicking the “Change Price” button will update the text content inside the <strike> element with the ID strikePrice1.

Example 2: Accessing by Tag Name

This example accesses all <strike> elements on the page and updates their text color.

<p>
  Item 1: <strike>Out of Stock</strike>
</p>
<p>
  Item 2: <strike>Discontinued</strike>
</p>
<button id="changeColorBtn1">Change Color</button>

<script>
  document.getElementById("changeColorBtn1").addEventListener("click", () => {
    const strikeElements2 = document.getElementsByTagName("strike");
    for (let i = 0; i < strikeElements2.length; i++) {
      strikeElements2[i].style.color = "red";
    }
  });
</script>

Clicking the button will change the text color of all <strike> elements to red. 🎨

Example 3: Accessing with querySelector

This example uses querySelector to select a specific strikethrough element and add a class to it.

<p>
  Task: <strike class="old-task" id="task1">Complete Report</strike>
</p>
<button id="addClassBtn1">Add Class</button>

<script>
  document.getElementById("addClassBtn1").addEventListener("click", () => {
    const strikeElement3 = document.querySelector("#task1");
    strikeElement3.classList.add("completed-task");
  });
</script>
<style>
    .completed-task {
      text-decoration: line-through;
      color: green;
    }
</style>

Clicking the button will add the completed-task class to the selected <strike> element, effectively changing its color to green. ✅

Example 4: Using innerHTML for Complex Content

This example demonstrates using innerHTML to change the strikethrough content, including additional HTML.

<p>
  Old Note: <strike id="oldNote1">This is an <b>old</b> note.</strike>
</p>
<button id="changeNoteBtn1">Change Note</button>

<script>
  document.getElementById("changeNoteBtn1").addEventListener("click", () => {
    const strikeElement4 = document.getElementById("oldNote1");
    strikeElement4.innerHTML = "This note is <span style='color:blue'>updated</span>";
  });
</script>

Clicking the button will replace the original content with new HTML content, showing how innerHTML can handle more complex updates.

Example 5: Styling via style Property

This example shows how to modify inline styles of the strikethrough text using the style property.

<p>
  Original Text: <strike id="textStrike1">Sample Text</strike>
</p>
<button id="styleChangeBtn1">Change Style</button>
<script>
 document.getElementById('styleChangeBtn1').addEventListener('click', () => {
  const strikeElement5 = document.getElementById('textStrike1');
   strikeElement5.style.textDecorationColor = "red";
   strikeElement5.style.fontWeight="bold";
 });
</script>

Clicking the button changes the strikethrough color and makes the text bold using the style property.

Why the strike Element is Deprecated

The <strike> element is deprecated because it’s considered a presentational element. Modern web development practices encourage separating content structure (HTML) from visual styling (CSS). The CSS property text-decoration: line-through provides a much more flexible and maintainable way to achieve the strikethrough effect. ⚠️

Example of Using CSS for Strikethrough

Here’s how you would typically apply a strikethrough effect using CSS:

<p>
  <span class="strikethrough">This is strikethrough text.</span>
</p>

<style>
  .strikethrough {
    text-decoration: line-through;
  }
</style>

This approach is more efficient and allows for better control over styling.

Browser Compatibility

The <strike> element and its corresponding DOM object are supported by all major web browsers. However, using the <strike> element is not recommended for new projects due to its deprecated status. You should prefer CSS styling for strikethrough effects.

Conclusion

The HTML DOM strike object allows access and manipulation of strikethrough text elements. While the <strike> element itself is deprecated in favor of CSS styling, understanding its DOM object is beneficial for maintaining older projects or when dealing with dynamically generated content. Remember to always strive for separation of concerns by using CSS for visual styling rather than relying on deprecated HTML elements.