Loading lesson path
Concept visual
Start from A
(Application Programming Interface) is a set of
Properties that allow JavaScript to change the content, structure, and style of any HTML elements. An
Action that you can do on an HTML element. An
Value that you can access on an HTML element.
<html> <body> <p id="demo"></p> <script>
// Access a paragraph Element const myPara = document.getElementById("demo");
// Change the content of the Element myPara.innerHTML = "Hello World!";</script> </body> </html>
HTML document. getElementById() is a document method.
Formula
myPara = getElementById("demo")retrieves the "demo" element. innerHTML is an element property. myPara.innerHTML = "Hello World!" changes the property.
The DOM API provides us with the ability to:
Add, remove, or modify elements
Add event listeners to react to user input
is a standard for how to get, change, add, or delete HTML DOM elements. JavaScript is the language used in browsers to access the DOM through the API.
Developers use global objects like document and window as entry points to any API.If you want to access any element in an HTML page, you always start with accessing the document object. The document object represents your web page. To manipulate HTML with JavaScript, you first need to select an element. Below are some examples of how you can use the document object to access HTML:
Description document.getElementById( id ) Find an element by element id document.getElementsByTagName( name ) Find elements by tag name document.getElementsByClassName( name ) Find elements by class name document.querySelector( selector ) Find the first element that matches a CSS selector document.querySelectorAll( selector ) Find all elements that match a CSS selector The document object is the owner of all other objects in your web page.
Description element.innerHTML The HTML content of an element element.textContent
Description element. attribute Change the attribute value of an HTML element element.style. property
Description element.setAttribute()