Manipulating Element Content
| Property/Method | Description | Example |
|---|---|---|
| element.innerHTML | Gets or sets the HTML content inside the element. | elem.innerHTML = '<p>New content</p>'; |
| element.textContent | Gets or sets the text content of the element (ignores HTML tags). | elem.textContent = 'Plain text'; |
| element.value | Gets or sets the value of form elements like input or textarea. | input.value = 'User input'; |
Manipulating Attributes and Styles
| Method/Property | Description | Example |
|---|---|---|
| element.getAttribute(attr) | Gets the value of an attribute. | let src = img.getAttribute('src'); |
| element.setAttribute(attr, value) | Sets the value of an attribute. | img.setAttribute('src', 'image.jpg'); |
| element.removeAttribute(attr) | Removes an attribute. | elem.removeAttribute('class'); |
| element.style.property | Sets inline styles (camelCase for properties). | elem.style.backgroundColor = 'red'; |
| element.classList.add(class) | Adds one or more classes. | elem.classList.add('active'); |
| element.classList.remove(class) | Removes one or more classes. | elem.classList.remove('active'); |
| element.classList.toggle(class) | Toggles a class on/off. | elem.classList.toggle('active'); |
| element.classList.contains(class) | Checks if a class exists. | if (elem.classList.contains('active')) { ... } |
Creating and Inserting Elements
| Method | Description | Example |
|---|---|---|
| document.createElement(tag) | Creates a new element. | let div = document.createElement('div'); |
| document.createTextNode(text) | Creates a text node. | let text = document.createTextNode('Hello'); |
| parent.appendChild(child) | Appends a child to the end of the parent. | parent.appendChild(div); |
| parent.insertBefore(newNode, refNode) | Inserts newNode before refNode. | parent.insertBefore(newDiv, existingDiv); |
| element.insertAdjacentHTML(position, html) | Inserts HTML at a specified position ('beforebegin', 'afterbegin', 'beforeend', 'afterend'). | elem.insertAdjacentHTML('beforeend', '<p>New</p>'); |
| element.cloneNode(deep) | Clones an element (deep=true clones children). | let clone = elem.cloneNode(true); |
Removing Elements
| Method | Description | Example |
|---|---|---|
| parent.removeChild(child) | Removes a child from the parent. | parent.removeChild(elem); |
| element.remove() | Removes the element itself (modern browsers). | elem.remove(); |
Traversing the DOM
| Property | Description | Example |
|---|---|---|
| element.parentNode | Returns the parent node. | let parent = elem.parentNode; |
| element.children | Returns a live HTMLCollection of child elements. | let kids = elem.children; |
| element.firstChild / lastChild | Returns the first/last child node (includes text nodes). | let first = elem.firstChild; |
| element.firstElementChild / lastElementChild | Returns the first/last child element (ignores text nodes). | let firstElem = elem.firstElementChild; |
| element.nextSibling / previousSibling | Returns the next/previous sibling node. | let next = elem.nextSibling; |
| element.nextElementSibling / previousElementSibling | Returns the next/previous sibling element. | let nextElem = elem.nextElementSibling; |
Events
| Method/Property | Description | Example |
|---|---|---|
| element.addEventListener(event, handler) | Attaches an event listener. | elem.addEventListener('click', function() { alert('Clicked'); }); |
| element.removeEventListener(event, handler) | Removes an event listener. | elem.removeEventListener('click', myHandler); |
| Common Events | click, dblclick, mouseover, mouseout, keydown, keyup, submit, change, load, etc. | window.addEventListener('load', init); |
| event.preventDefault() | Prevents the default action. | e.preventDefault(); |
| event.stopPropagation() | Stops event bubbling. | e.stopPropagation(); |
Document and Window
| Property/Method | Description | Example |
|---|---|---|
| document.readyState | Returns the loading state ('loading', 'interactive', 'complete'). | if (document.readyState === 'complete') { ... } |
| document.cookie | Gets/sets cookies. | document.cookie = 'name=value'; |
| window.location | Gets/sets the current URL. | window.location.href = 'https://example.com'; |
| window.innerWidth / innerHeight | Gets the viewport dimensions. | let width = window.innerWidth; |
| window.setTimeout(func, ms) | Executes a function after a delay. | setTimeout(() => { console.log('Delayed'); }, 1000); |
| window.setInterval(func, ms) | Executes a function repeatedly. | setInterval(() => { console.log('Interval'); }, 1000); |
