DOM Manipulation

JS DOM Manipulation

DOM manipulation is how JavaScript modifies webpage content by:

1. Selecting elements

   document.getElementById('myElement')
   document.querySelector('.myClass')

2. Modifying content

   element.textContent = 'New text'
   element.innerHTML = '<span>HTML content</span>'

3. Changing attributes

   element.setAttribute('src', 'newimage.jpg')
   element.id = 'newId'

4. Modifying styles

   element.style.color = 'red'
   element.classList.add('highlight')

5. Creating/removing elements

   const newDiv = document.createElement('div')
   parentElement.appendChild(newDiv)
   element.remove()

6. Event handling

   element.addEventListener('click', handleClick)

References

Documentiliakan