DOM Cheat Sheet with Examples
Selecting Elements
- [Link]('id')
Example: [Link]('myElement');
- [Link]('class')
Example: [Link]('myClass');
- [Link]('tag')
Example: [Link]('div');
- [Link]('selector')
Example: [Link]('.myClass');
- [Link]('selector')
Example: [Link]('p');
Manipulating Elements
- [Link]
Example: [Link]('myElement').innerHTML = 'Hello, World!';
- [Link]
Example: [Link]('myElement').textContent = 'Hello, World!';
- [Link]('attr', 'value')
Example: [Link]('myElement').setAttribute('class', 'newClass');
- [Link]('attr')
Example: let value = [Link]('myElement').getAttribute('class');
- [Link] = 'value'
Example: [Link]('myElement').[Link] = 'blue';
Adding and Removing Elements
- [Link]('tag')
Example: let newElement = [Link]('div');
- [Link](childElement)
Example: [Link](newElement);
- [Link](childElement)
Example: [Link](newElement);
- [Link](newChild, oldChild)
Example: [Link](newElement, oldElement);
Event Handling
- [Link]('event', function)
Example: [Link]('myButton').addEventListener('click', () => { alert('Button
clicked!'); });
- [Link]('event', function)
Example: [Link]('myButton').removeEventListener('click', myFunction);
- [Link]()
Example: [Link]('myForm').addEventListener('submit', (event) => {
[Link](); });
- [Link]()
Example: [Link]('click', (event) => { [Link](); });
Traversing the DOM
- [Link]
Example: let parent = [Link]('myElement').parentNode;
- [Link]
Example: let children = [Link]('myElement').childNodes;
- [Link]
Example: let firstChild = [Link]('myElement').firstChild;
- [Link]
Example: let lastChild = [Link]('myElement').lastChild;
- [Link]
Example: let nextSibling = [Link]('myElement').nextSibling;
- [Link]
Example: let prevSibling = [Link]('myElement').previousSibling;
