Home HTML Accessing the DOM

Accessing the DOM

Event Listeners

The below table illustrates the various techniques for Accessing DOM Elements with their description.

Properties Descriptions
document.anchors The document.anchors property returns a collection of all anchor elements (<a>) in the current HTML document.
document.forms The document.forms property returns a collection of all form elements (<form>) in the current HTML document.
document.images The document.images property returns a collection of all image elements (<img>) in the current HTML document.
document.links The document.links property returns a collection of all links elements (<a>) with a valid href attribute in the current HTML document.
document.scripts The document.scripts property returns a collection of all anchor elements (<scripts>) in the current HTML document.

Example: The example illustrates the properties for finding HTML elements by HTML Object Collection document.anchor.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>DOM anchors collection</title>
    <style>
        .gfg {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1 class="gfg">
        w3wiki
    </h1>
    <h3>DOM anchors Collection</h3>
    <a>w3wiki</a><br>
    <a>Placement</a><br>
    <a>Courses</a>
    <br><br>
    <button onclick="afunGeeks()">
        Submit
    </button>
    <p id="pid"></p>
  
    <script>
        function afunGeeks() {
            let x = document.anchors.length;
            document.getElementById("pid").innerHTML =
                "Number of Anchors elements: " + x;
        }
    </script>
</body>
  
</html>
 






                        









																																						

																								

																										
Output:

																																						

																								

																										

																																						

																								

																										

																																						

																								

																										

																																						

																								

																										

																																						

																							

											
											

												
What is HTML DOM ?

																								

																										
HTML DOM stands for the Document Object Model is a tree-like structure that offers dynamic interaction and manipulation of the content, structure, and style of an HTML document. It is an interface for web documents. Based on user activity The HTML DOM offers to create interactive web pages where elements can be added, removed, or modified.

																																						

																								

																										


Table of Content


    

  • Significance of HTML DOM
    • 

  • HTML DOM Structure
    • 

  • Adding New Element to the DOM
    • 

  • Techniques for Finding DOM Elements
    • 

  • Event Listeners
    • 

  • Accessing the DOM
    • 




																																						

																							

										


										
										

											
Similar Reads

																						

												
													

														Significance of HTML DOM

													

														The HTML DOM defines the logical structure of the document and how a document is accessed and manipulated. The DOM is automatically created by the browser when the HTML document is parsed. It is the process of creating the DOM that involves converting the HTML document into a tree-like structure, which can be further manipulated with JavaScript. Additionally, The HTML DOM is widely used for various real-world applications like updating content dynamically, Form Validation, AJAX Requests, Event Handling, and Web Scraping....
													

												
											

																						

												
													

														HTML DOM Structure

													

														The image below shows the tree-like structure of the Document Object Model. The below table shows the properties of the document object with their description....
													

												
											

																						

												
													

														Adding New Element to the DOM

													

														We can add new element dynamically by creating a new element using createElement, and finally appending the new element to the DOM with methods like appendChild....
													

												
											

																						

												
													

														Techniques for Finding DOM Elements

													

														...
													

												
											

																						

												
													

														Event Listeners

													

														The below table illustrates the various techniques for Finding DOM Elements with their description and syntax....
													

												
											

																						

												
													

														Accessing the DOM

													

														...
													

												
											

																					


									

									

										
Tags:

																				#HTML-DOM
																				#HTML5
																				#HTML
																				#Web Technologies
										
									

									

										

																						
												
												Event Listeners
											
																					

										

																					

									

								

								

									
Contact Us

									
									
									
								

							

							
						

					

				

			

			

	

		

			

				
				Categories
				
			

			Learn the most popular programming languages in the world.