Introduction
Accessing the HTML elements and their content is important to be able to manipulate the web and make interesting interactions from images to texts.
The DOM represents the document structure in HTML and allows us to use JavaScript to work with each part of the structure which are nodes (and base-level objects). With this, we can change the structure, style, and content.
The content here we are interested in is the text content, and the way to access or update them in JavaScript. In this article, we cover all the bases.
Using JavaScript textContent property
As we said, the DOM has nodes and objects that we can access using JavaScript, and for us to access the text content in an HTML document, we need the textContent property.
The textContent property represents the text content of a node and its descendants. Depending on the node we access, the return value of this instantaneous property can be string or null. In addition, it returns the content of all elements including the script and style elements.
Let’s illustrate how to access the text content of a node within an HTML document by using HTML and JS within the same document. The HTML contains a div element that houses a p element with some text and a button element that will trigger the textContent script.
In the script element, the JavaScript is present. The getElementById method is applied on the button element identifier - btn - and an onclick event is attached to it.
Attached to the event is the JavaScript expression to access the text content. The expression uses the getElementById on the div element with an identifier - demo - and applies the textContent property to retrieve the text content bound to the content binding. Afterward, we make use of the alert() method to show the value of the content binding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>JavaScript text content</h1>
<div id="demo">
<p>This text that will be displayed in an Alert Window</p>
</div>
<button id="btn">Get Text</button>
<script>
document.getElementById("btn").onclick = function () {
const content = document.getElementById("demo").textContent;
alert(content);
};
</script>
</body>
</html>
Output
On clicking the Get Text Button
If we want to change the text content, we can do so by assigning the new text to the textContent property of the said element. We will simply add the following JavaScript statements to the code above
document.getElementById("demo").textContent =
"New text content has been added";
Output
Summary
Text content makes up a lot of webpages (or HTML documents) and knowing how to access and update them is useful and with the JavaScript textContent property we can achieve such pretty easily.
References
Document Object Model (DOM) - Web APIs | MDN (mozilla.org)
Node.textContent - Web APIs | MDN (mozilla.org)
