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