Scribd
Upload
17 views

JavaScript DOM Basics

Uploaded by

westmorgan698
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views

JavaScript DOM Basics

Uploaded by

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

JavaScript DOM Basics

1. Selecting Elements
javascript
Copy
// Single element selectors
document.getElementById('myId') // by ID
document.querySelector('.myClass') // first matching CSS selector
document.querySelector('#myId') // first matching ID

// Multiple element selectors


document.getElementsByClassName('myClass') // by class name
document.getElementsByTagName('div') // by tag name
document.querySelectorAll('.myClass') // all matching CSS selector

2. Manipulating Elements
javascript
Copy
// Changing content
element.textContent = 'New text' // Text only
element.innerHTML = '<span>HTML content</span>' // HTML content
element.value = 'New value' // Form input value

// Modifying attributes
element.setAttribute('class', 'newClass') // Set attribute
element.getAttribute('class') // Get attribute
element.removeAttribute('class') // Remove attribute

3. Styling Elements
javascript
Copy
// Direct style manipulation
element.style.backgroundColor = 'red'
element.style.fontSize = '16px'

// CSS classes
element.classList.add('newClass')
element.classList.remove('oldClass')
element.classList.toggle('active')
element.classList.contains('active') // Check if class exists

4. Creating & Removing Elements


javascript
Copy
// Creating
const div = document.createElement('div')
div.textContent = 'New Element'

// Adding to DOM
parentElement.appendChild(div) // Add as last child
parentElement.insertBefore(div, referenceNode) // Add before specific element

// Removing
element.remove() // Remove element
parentElement.removeChild(childElement) // Remove child element

5. Event Handling
javascript
Copy
// Adding event listeners
element.addEventListener('click', function(e) {
console.log('Clicked!');
});

// Common events
'click' // Mouse click
'submit' // Form submission
'change' // Input value change
'keyup' // Key released
'mouseover' // Mouse hover
'load' // Page/resource loaded

6. DOM Traversal
javascript
Copy
// Parent
element.parentElement
element.parentNode

// Children
element.children // HTML Collection of child elements
element.childNodes // NodeList of child nodes
element.firstElementChild
element.lastElementChild

// Siblings
element.nextElementSibling
element.previousElementSibling

You might also like