(document) HTML DOM Manipulation

The HTML DOM (Document Object Model) is a hierarchical tree-like structure that represents the elements of an HTML document. It is an API (Application Programming Interface) provided by the browser that allows JavaScript to manipulate the content and structure of a web page.

JavaScript can access and manipulate HTML elements and attributes using the HTML DOM. The HTML DOM provides properties and methods that can be used to:

• Access, create, and remove HTML elements
• Modify the content of HTML elements
• Change the style of HTML elements
• Add and remove HTML attributes
• Respond to user events on HTML elements

To manipulate HTML elements using the HTML DOM in JavaScript, you can follow these general steps:

1. Access the HTML element using the document object and the element's ID, class, tag name, or other attributes.

   // Access an element by ID
   const element = document.getElementById('myElement');
   
   // Access an element by class name
   const elements = document.getElementsByClassName('myClass');
   
   // Access an element by tag name
   const elements = document.getElementsByTagName('p');
   

2. Modify the element's content, attributes, or style using properties and methods provided by the HTML DOM.

   // Modify an element's content
   element.innerHTML = 'New content';
   
   // Modify an element's attribute
   element.setAttribute('href', 'http://example.com');
   
   // Modify an element's style
   element.style.color = 'red';
   

3. Respond to user events on the element using event listeners.

   // Add an event listener to an element
   element.addEventListener('click', function(event) {
     // Handle the click event
   });
   

By using the HTML DOM, JavaScript can make dynamic and interactive web pages by modifying the content and behavior of HTML elements based on user interaction and other events.

document Object 

The Document object in JavaScript is the top-level object of the HTML DOM, representing the entire HTML document. Here are some of the most commonly used properties and methods of the Document object:

Properties:

• document.body: Returns the body element of the document.
• document.cookie: Returns the cookies associated with the document.
• document.documentElement: Returns the root element of the document.
• document.title: Gets or sets the title of the document.
• document.URL: Returns the URL of the document.

Methods:

• document.createElement(): Creates a new HTML element.
• document.getElementById(): Returns the element with the specified ID.
• document.getElementsByClassName(): Returns a collection of elements with the specified class name.
• document.getElementsByTagName(): Returns a collection of elements with the specified tag name.
• document.querySelector(): Returns the first element that matches the specified CSS selector.
• document.querySelectorAll(): Returns all elements that match the specified CSS selector.
• document.write(): Writes HTML expressions or JavaScript code to a document.

These are just a few examples of the many properties and methods of the Document object. For a comprehensive list, you can refer to the documentation provided by the browser vendor or the W3C (World Wide Web Consortium).

---