Scribd
Upload
2 views

dom_cheat_sheet

The document is a cheat sheet for CSS selectors and the Document Object Model (DOM), detailing how to access, manipulate, create, and remove elements in HTML and XML documents. It includes methods for event handling and DOM traversal, as well as useful properties for nodes and elements. Key methods such as document.getElementById, element.textContent, and element.addEventListener are highlighted for quick reference.

Uploaded by

christianmuwa42
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

dom_cheat_sheet

The document is a cheat sheet for CSS selectors and the Document Object Model (DOM), detailing how to access, manipulate, create, and remove elements in HTML and XML documents. It includes methods for event handling and DOM traversal, as well as useful properties for nodes and elements. Key methods such as document.getElementById, element.textContent, and element.addEventListener are highlighted for quick reference.

Uploaded by

christianmuwa42
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS Selectors Cheat Sheet

What is the DOM?

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents

the page structure as a tree of objects.

Accessing Elements

- document.getElementById('id')

- document.getElementsByClassName('class')

- document.getElementsByTagName('tag')

- document.querySelector('selector')

- document.querySelectorAll('selector')

Manipulating Elements

- element.textContent = 'Text'

- element.innerHTML = '<b>Bold</b>'

- element.setAttribute('attr', 'value')

- element.removeAttribute('attr')

- element.classList.add('class')

- element.classList.remove('class')

- element.style.property = 'value'

Creating and Removing Elements

- document.createElement('tag')

- parent.appendChild(child)

- parent.insertBefore(newNode, referenceNode)

- element.remove()

Event Handling
CSS Selectors Cheat Sheet

- element.addEventListener('event', function)

- element.removeEventListener('event', function)

Common events: click, mouseover, keyup, submit, etc.

DOM Traversal

- parentNode

- childNodes / children

- firstChild / lastChild

- nextSibling / previousSibling

- nextElementSibling / previousElementSibling

Useful Properties

- node.nodeName

- node.nodeType

- node.nodeValue

- element.tagName

- element.id

- element.className

You might also like