document :
The HTML web page that gets loaded on the browser is represented using the 'document' object of BOM model.
This object considers the web page as a tree which is referred to as Document Object Model ( DOM ). Each node of this tree represents HTML elements in the page as 'element' object and its attributes as properties of the 'element' object.
W3C provides DOM API consisting of properties and methods that help in traversal and manipulation of HTML page.
Shown below is the HTML web page and it's corresponding DOM structure that can be accessed using DOM API methods and properties:
Let us now explore some methods and properties that allow us to traverse the DOM tree and manipulate content or style for the specified node representing the HTML element.
To access an element in HTML page we can use following methods on 'document' object from DOM API:
| Method | Description | Example |
|---|---|---|
| getElementById(x) | Finds element with id ‘x’ and returns an object of type element | Paragraph 1 Paragraph 2 //Selects paragraph having id ‘p1’ |
| getElementsByTagName(x) | Find element(s) whose tagname is ‘x’ and returns NodeList, which is list of element objects | Paragraph 1 Paragraph 2 |
| getElementsByClassName(x) | Find element(s) whose class attribute‘s values is ‘x’ and returns NodeList, which is list of element objects | Paragraph 1 Paragraph 2 //Selects paragraph having class = "myClass" |
| querySelectorAll() | Find element(s) by CSS selectors and returns NodeList, which is list of element objects. | Paragraph 1 |
In addition to a few methods we just learned, we can also use below-mentioned properties of 'document' object, to access HTML element.
To manipulate the content of HTML page we can use the following properties of 'element' object, given by DOM API:
To manipulate the style of an HTML element we can use the following property of 'element' object given by DOM API:
