Content changes in Html Dom

# Web Site Writing Basics

# javascript

# Dom_ javascript

Changes to HTML content using HTML DOM

Content changes in HTML using the HTML DOM (Document Object Model) are primarily done through JavaScript by accessing the desired element and modifying its properties. Here are the most commonly used methods:

1. Text Contents

Use the .textContent or .innerText feature to change text within an HTML element:

.textContent: Set or return the text content of all descendants and elements, ignoring HTML formatting (e.g. < br > tags).

.innerText: Sets or returns the "visible" text content of an element. It takes into account CSS formatting (i.e. excludes text hidden by display: none;)

Example:

HTML

< p id = "myParagraph" > Original text < / p >

< script >

/ / Select the < p > element with id.

const pElement = document.getElementById ("myParagraph");

/ / Change text content

pElement.textContent = "New text that has been changed by DOM";

/ / or pElement.innerText = "New text changed by DOM";

< / script >

2. Changing HTML content (HTML Content)

Use the .innerHTML feature to change all HTML content within the element. This can include other HTML tags:

Example:

HTML

< div id = "myDiv" >

< p > Original content < / p >

< / div >

< script >

/ / Select the < div > element with id.

Const DivElement = document.getElementById ("myDiv");

/ / Change content to new HTML (include < strong > and < em > tags)

DivElement.innerHTML = "< h2 > New topic < / h2 > < p > < strong > text was < em > highlighted < / em > < / strong > < / p >";

< / script >

Caution: Using .innerHTML with data coming from untrusted users can cause XSS (Cross-Site Scripting) vulnerabilities. .textContent should be used only when changing text, for security purposes.

3. Changing the properties (Attributes) of the elements

Use the .setAttribute () method or direct property access to change the value of the: attribute.

Example:

HTML

< img id = "myImage" src = "old _ image .jpg" alt = "original image" >

< script >

const imgElement = document.getElementById ("myImage");

/ / 1.Change the 'src' attribute directly

imgElement.src = "new _ image.png";

/ / 2.Change the 'alt' attribute using setAttribute

imgElement.setAttribute ("alt," "new image");

/ / 3. Change the 'class' attribute

imgElement.classname = "active-state";

< / script >

Summary of content change procedures:

Search (Find): Use DOM methods such as document.getElementById (), document.querySelector (), document.getElementsByClassName () to select the target element.

Change (Change): Use features such as .textContent, .innerHTML, .src, .setAttribute () to edit the content or properties of selected elements.