Scribd
Upload
7 views

DOM Cheat Sheet With Examples

Dom cheat sheet

Uploaded by

Sufiyan Sayyed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

DOM Cheat Sheet With Examples

Dom cheat sheet

Uploaded by

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

DOM Cheat Sheet with Examples

Selecting Elements
- document.getElementById('id')

Example: document.getElementById('myElement');

- document.getElementsByClassName('class')

Example: document.getElementsByClassName('myClass');

- document.getElementsByTagName('tag')

Example: document.getElementsByTagName('div');

- document.querySelector('selector')

Example: document.querySelector('.myClass');

- document.querySelectorAll('selector')

Example: document.querySelectorAll('p');

Manipulating Elements
- element.innerHTML

Example: document.getElementById('myElement').innerHTML = 'Hello, World!';

- element.textContent

Example: document.getElementById('myElement').textContent = 'Hello, World!';

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

Example: document.getElementById('myElement').setAttribute('class', 'newClass');

- element.getAttribute('attr')

Example: let value = document.getElementById('myElement').getAttribute('class');

- element.style.property = 'value'

Example: document.getElementById('myElement').style.color = 'blue';

Adding and Removing Elements


- document.createElement('tag')

Example: let newElement = document.createElement('div');


- parentElement.appendChild(childElement)

Example: document.body.appendChild(newElement);

- parentElement.removeChild(childElement)

Example: document.body.removeChild(newElement);

- parentElement.replaceChild(newChild, oldChild)

Example: document.body.replaceChild(newElement, oldElement);

Event Handling
- element.addEventListener('event', function)

Example: document.getElementById('myButton').addEventListener('click', () => { alert('Button

clicked!'); });

- element.removeEventListener('event', function)

Example: document.getElementById('myButton').removeEventListener('click', myFunction);

- event.preventDefault()

Example: document.getElementById('myForm').addEventListener('submit', (event) => {

event.preventDefault(); });

- event.stopPropagation()

Example: element.addEventListener('click', (event) => { event.stopPropagation(); });

Traversing the DOM


- element.parentNode

Example: let parent = document.getElementById('myElement').parentNode;

- element.childNodes

Example: let children = document.getElementById('myElement').childNodes;

- element.firstChild

Example: let firstChild = document.getElementById('myElement').firstChild;

- element.lastChild

Example: let lastChild = document.getElementById('myElement').lastChild;


- element.nextSibling

Example: let nextSibling = document.getElementById('myElement').nextSibling;

- element.previousSibling

Example: let prevSibling = document.getElementById('myElement').previousSibling;

You might also like