What are common DOM methods?

Here are some common DOM methods used in web development:

1. document.getElementById(id): Retrieves an element by its unique ID.

   const element = document.getElementById('myElement');

2. document.getElementsByClassName(className): Returns a live HTMLCollection of elements with the specified class name.

   const elements = document.getElementsByClassName('myClass');

3. document.getElementsByTagName(tagName): Returns a live HTMLCollection of elements with the specified tag name.

   const elements = document.getElementsByTagName('div');

4. document.querySelector(selector): Returns the first element that matches the specified CSS selector.

   const element = document.querySelector('.myClass');

5. document.querySelectorAll(selector): Returns a static NodeList of all elements that match the specified CSS selector.

   const elements = document.querySelectorAll('div.myClass');

6. element.appendChild(child): Adds a new child node to the specified parent node.

   const newElement = document.createElement('p');
   document.body.appendChild(newElement);

7. element.removeChild(child): Removes a specified child node from the parent node.

   const child = document.getElementById('childElement');
   document.body.removeChild(child);

8. element.setAttribute(attributeName, value): Sets the value of an attribute on the specified element.

   element.setAttribute('class', 'newClass');

9. element.style.property = value: Modifies the inline style of an element.

   element.style.color = 'red';

These methods are fundamental for manipulating the DOM and creating dynamic web applications.