May 06, 2021 JavaScript
2. HTML DOM (Document Object Model)
6. Find HTML elements by label name
HTML DOM provides access to all elements of a JavaScript HTML document.
When a web page is loaded, the browser creates a document Object Model for the page.
HTML DOM defines a set of standard objects for HTML, as well as standard methods for accessing and processing HTML documents. With DOM, you can access all HTML elements, along with the text and properties they contain.
HTML DOM is independent of the platform and programming language. It can be used by any programming language such as Java, JavaScript, and VBScript.
The HTML DOM model is constructed as a tree of objects:
With a programmable object model, JavaScript gained enough power to create dynamic HTML.
Typically, with JavaScript, you need to manipulate HTML elements.
In order to do this, you must first find the element. There are three ways to do this:
The easiest way to find HTML elements in DOM is by using the element's id.
In this example, look for the id"intro" element:
If the element is found, the method returns the element as an object (in x).
If the element is not found, x will contain null.
In this example, look for the element of id"main" and then look for all the elements of id"main":
This example looks for elements of class-"intro" through the getElementsByClassName function:
Later in this tutorial, you'll learn:
JavaScript and HTML DOM reference manuals