Changing text, attributes, and styles of elements
In JavaScript programming, after selecting a webpage element from the DOM framework, web developers can modify the DOM element’s text content, font typography, font colour, and other webpage attributes and styles. Where these features help web developers to develop dynamic and interactive webpage websites.
So, let’s know the DOM element content modification attributes and other features in JavaScript programming.
Changing the text content in JavaScript DOM.
To modify the default text content of a webpage element developed in JavaScript, web developers can apply the following text attributes properties.
text content attributes properties.
- textContent – Text content attributes help to modify or retrieve the text content of a DOM element in the current webpage, it also includes the text inside the child elements. These attributes do not parse the HTML tags inside the DOM element.
- innerHTML – InnerHTML helps to modify or retrieve HTML content tags included inside a DOM element.
Example of DOM element textContent.
Text content attributes are specially used by web developers in a webpage when they want to modify only the text attributes or properties inside a DOM element without affecting the default attributes or structure of the HTML webpage.
<p id=”text”>Welcome to javascript</p>
<button id=”modifyText”>modify Text</button>
// it uses to Select the dom element
const text = document.getElementById(‘text’);
// it uses to Change the text content properties
text.textContent = “Let explore the JavaScript!”; // it used to Updates the text inside the <p> html tag
// here Event listener uses to modify the text properties when button is click
document.getElementById(‘modifyText’).addEventListener(‘click’, () => {
text.textContent = “Finally text modify dynamically!”;
});
Example of innerHTML in JavaScript.
When JavaScript web developer needs to modify HTML web content, add additional HTML webpage tags. Like, <strong> tag, <em> tag, etc. For example, add new tags to existing webpage, use innerHTML.
<p id=”text”>Welcome to <strong>the javascript</strong>!</p>
<button id=”modifyHTML”>Modify HTML</button>
//here we use it to select the element
const text = document.getElementById(‘text’);
// here it used to Changing the HTML content attributes
text.innerHTML = “Let learn the, <em>JavaScript programming</em>!”; // here we use Updates method in the HTML inside the <p> html tag
// here we use Event listener method to change the HTML content when the button is clicked
document.getElementById(‘modifyHTML’).addEventListener(‘click’, () => {
text.innerHTML = “Finally this is a dynamic modification in HTML”;
}
Changing Attributes of DOM Elements in JavaScript.
Web developers can modify the default attributes and properties of a webpage element using JavaScript programming. Common DOM attributes modification properties may include src, href, class, id, and many other HTML properties.
Changing Attributes of DOM Elements properties.
- setAttribute() – This attribute modifies the properties of a DOM element in a webpage.
- getAttribute() – This attribute gets the value of a DOM element property in a webpage.
- removeAttribute() – This attribute removes a property from a DOM element in a webpage.
setAttribute() example in JavaScript webpage.
<a id=”link” href=”https://vcanhelpsu.com”>Explore Vcanhelpsu</a>
<button id=”modifyLink”>modify Link</button>
// here we use select the dom element
const link = document.getElementById(‘link’);
// here we Change the `href` html tag attribute
link.setAttribute(‘href’, ‘https://google.com’);
// here we use Event listener to change hyperlink when link button is click
document.getElementById(‘modifyLink’).addEventListener(‘click’, () => {
link.setAttribute(‘href’, ‘https://modifywebsite.com’);
});
getAttribute() example in JavaScript webpage.
JavaScript web developers can get the attributes value of a webpage as follows.
// here we use to Get the value of the `href` html tag attribute
const link = document.getElementById(‘link’);
console.log(link.getAttribute(‘href’)); // Result is – https://google.com
removeAttribute() example in JavaScript webpage.
JavaScript web developers can also remove attributes from a webpage element.
// here we use to Remove the `href` attribute in web page attributes
link.removeAttribute(‘href’);
console.log(link.getAttribute(‘href’)); // Result is – null attribute is removed
Changing the styles of webpage elements in the JavaScript DOM.
JavaScript web developers can make direct modifications to the CSS styles of a webpage element by applying the CSS style property. Here the CSS style property provides permission to the web developer to access and modify inline CSS styles, but remember that the styles defined in existing external CSS files cannot be modified unless those styles are applied with inline CSS attributes.
style.propertyName – This is applied to modify individual CSS properties in the existing webpage such as text content color, font-size, etc. attributes or properties.
Example of JavaScript DOM inline style.
<p id=”ptext”>Simple paragraph text</p>
<button id=”modifyStyle”>Modify Style</button>
// we used here it to select the element
const text = document.getElementById(‘ptext’);
// here we used to Change the inline CSS style
ptext.style.color = “red”; // here we used to change text colour to red
ptext.style.fontSize = “22px”; // here we used to Change font size to 22px
// here we used event listener to change style when button is clicked
document.getElementById(‘modifyStyle’).addEventListener(‘click’, () => {
ptext.style.color = “red”;
ptext.style.fontSize = “27px”;
}
Multiple style changes in JavaScript.
JavaScript web developers can apply the Object.assign() function to modify or update a CSS style object to modify or update the CSS style object.
// here we used t Apply multiple styles at once in html dom webpage
text.style.cssText = “color: lime; font-size: 28px; font-weight: bold;”;
Changing the class in a JavaScript DOM element.
The classList property is a great way for web developers to modify or update the class of a webpage element in any JavaScript webpage. This method provides a great way to add JavaScript classes to an HTML webpage, remove an existing class element, or toggle a class element.
Changing the class features in a JavaScript.
- classList.add() – This attribute helps to add one or more classes to an HTML DOM element in a JavaScript webpage.
- classList.remove() – This attribute helps to remove one or more class attributes in a JavaScript webpage.
- classList.toggle() – This attribute helps to toggle a class in a JavaScript webpage, if classToggle is not present then first add it, if present then remove it.
- classList.contains() – This attribute checks in a JavaScript webpage whether a webpage element has a specific class element or not.
Example of JavaScript Changing the class.
<p id=”text” class=”value”>This is a sample value text </p>
<button id=”toggleClass”>Toggle Class</button>
// it used to Select the class element
const text = document.getElementById(‘text’);
// it used to Add a class
text.classList.add(‘display’);
// it used to Remove a class
text.classList.remove(‘value’);
// it used to Toggle a class on click
document.getElementById(‘toggleClass’).addEventListener(‘click’, () => {
text.classList.toggle(‘display’); // here it Toggles the ‘display’ class
});
Combining DOM changes in a JavaScript webpage.
JavaScript web developers can manipulate and combine text content, attributes, properties, and styles to create dynamic and interactive webpage elements.
Example of Combining DOM changes.
<button id=”interactiveButton”>Press Button </button>
<p id=”text”>This is a text information</p>
// here we used it to Select the interactivebutton and text elements
const button = document.getElementById(‘interactiveButton’);
const text = document.getElementById(‘text’);
// here we used event listener to change the text, style, and attributes when user cliek on button
button.addEventListener(‘click’, () => {
text.textContent = “Someone pressed the button!”; // here it Change the text content
text.style.color = “orange”; //here it Change the style color
text.setAttribute(‘data-status’, ‘click’); // here we Add a custom button click attribute
}
Summary of textContent, innerHTML class css style properties in JavaScript.
Changing text properties.
- textContent – TextContent modifies the simple text of an element in a JavaScript webpage with a new text style.
- innerHTML – JavaScript updates or modifies the HTML content information of an element in a webpage.
Modifying text attributes.
- setAttribute() – JavaScript modifies a particular value of an element in a webpage.
- getAttribute() – JavaScript retrieves a specific value in an element in a webpage.
- removeAttribute() – JavaScript removes an attribute from a webpage.
Modifying css styles.
- style.property – JavaScript directly modifies any individual CSS property in a webpage. For example, style.color, style.fontSize, etc.
- style.cssText – applies multiple CSS styles to a JavaScript webpage.
Modifying classes.
- Use this to add classes, remove classes, toggle classes in a JavaScript webpage.
- classList.add(), classList.remove(), classList.toggle(), classList.contains()
