JavaScript DOM Basics
1. Selecting Elements
javascript
Copy
// Single element selectors
[Link]('myId') // by ID
[Link]('.myClass') // first matching CSS selector
[Link]('#myId') // first matching ID
// Multiple element selectors
[Link]('myClass') // by class name
[Link]('div') // by tag name
[Link]('.myClass') // all matching CSS selector
2. Manipulating Elements
javascript
Copy
// Changing content
[Link] = 'New text' // Text only
[Link] = '<span>HTML content</span>' // HTML content
[Link] = 'New value' // Form input value
// Modifying attributes
[Link]('class', 'newClass') // Set attribute
[Link]('class') // Get attribute
[Link]('class') // Remove attribute
3. Styling Elements
javascript
Copy
// Direct style manipulation
[Link] = 'red'
[Link] = '16px'
// CSS classes
[Link]('newClass')
[Link]('oldClass')
[Link]('active')
[Link]('active') // Check if class exists
4. Creating & Removing Elements
javascript
Copy
// Creating
const div = [Link]('div')
[Link] = 'New Element'
// Adding to DOM
[Link](div) // Add as last child
[Link](div, referenceNode) // Add before specific element
// Removing
[Link]() // Remove element
[Link](childElement) // Remove child element
5. Event Handling
javascript
Copy
// Adding event listeners
[Link]('click', function(e) {
[Link]('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
[Link]
[Link]
// Children
[Link] // HTML Collection of child elements
[Link] // NodeList of child nodes
[Link]
[Link]
// Siblings
[Link]
[Link]
