JavaScript - HTML DOM Methods
Cristian Micicoi
🧪💻Software Quality Assurance Tester • 🛡️ “Quality is everyone’s responsibility.”
DOM stands for Document Object Model. It is an application programming interface that allows us to create, add, modify and remove elements from the document. Every page you see in a browser window can be considered as an object. A Document object represents the HTML document that is displayed in that browser window.
The way a document’s content is accessed and modified is called the DOM (Document Object Model). HTML DOM methods are actions you can perform on HTML Elements. HTML DOM properties are values of HTML Elements that you can set or change.
DOM defines the logical structure of a document and the way a document can be accessed and manipulated. Knowing these DOM manipulation methods can take your JavaScript skills to the next level.
The HTML DOM can be accessed with JavaScript (and with other programming languages). In the DOM, all HTML elements are defined as objects. The programming interface is the properties and methods of each object.
A property is a value that you can get or set (like changing the content of an HTML element). A method is an action you can do (like add or deleting an HTML element).
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello!";
</script>
</body>
</html>
//Output will show a paragraph with the text: Hello!
In this example, getElementById is a method, while innerHTML is a property.
The most common way to access an HTML element is to use the id of the element. In the example above, the getElementById method used id="demo" to find the element.
The easiest way to get the content of an element is by using the innerHTML property. The innerHTML property is useful for getting or replacing the content of HTML elements. The innerHTML property can be used to get or change any HTML element, including <html> and <body>.