const element = document.getElementById('myDiv'); // Element for all examples

// Select Elements (RETURNS ELEMENT/NODELIST)
document.getElementById('myId');             // Single element by ID
document.getElementsByClassName('myClass');  // HTMLCollection by class
document.getElementsByTagName('div');       // HTMLCollection by tag
document.querySelector('.myClass');         // First element by CSS selector
document.querySelectorAll('.myClass');      // NodeList by CSS selector

// Create Elements (RETURNS ELEMENT)
document.createElement('div');              // 

document.createTextNode('Hello');          // Text node
document.createDocumentFragment();         // Document fragment
element.cloneNode(true);                   // Deep clone with children
element.cloneNode(false);                  // Shallow clone without children

// Add/Remove Elements (MUTATES DOM)
parent.appendChild(child);                 // Add child to end - MUTATES
parent.insertBefore(newChild, refChild);   // Insert before reference - MUTATES
parent.removeChild(child);                 // Remove child - MUTATES
element.remove();                          // Remove self - MUTATES
parent.replaceChild(newChild, oldChild);   // Replace child - MUTATES

// Modern Add/Remove (MUTATES DOM)
element.append(child1, child2, 'text');    // Add multiple children/text - MUTATES
element.prepend(child1, child2);           // Add to beginning - MUTATES
element.before(newElement);                // Insert before element - MUTATES
element.after(newElement);                 // Insert after element - MUTATES
element.replaceWith(newElement);           // Replace element - MUTATES

// Content (GETS/SETS)
element.innerHTML;                         // "
Hello
"
element.innerHTML = 'New';    // Set HTML content - MUTATES
element.textContent;                       // "Hello World"
element.textContent = 'New text';          // Set text content - MUTATES
element.innerText;                         // "Hello World" (visible text)
element.outerHTML;                         // "
Hello
"

// Attributes (GETS/SETS)
element.getAttribute('id');                // "myId"
element.setAttribute('id', 'newId');       // Set attribute - MUTATES
element.removeAttribute('class');          // Remove attribute - MUTATES
element.hasAttribute('data-value');        // true/false
element.id;                                // "myId" (direct property)
element.id = 'newId';                      // Set ID - MUTATES
element.className;                         // "class1 class2"
element.className = 'newClass';            // Set class - MUTATES

// Classes (MUTATES DOM)
element.classList.add('newClass');         // Add class - MUTATES
element.classList.remove('oldClass');      // Remove class - MUTATES
element.classList.toggle('active');        // Toggle class - MUTATES
element.classList.contains('myClass');     // true/false
element.classList.replace('old', 'new');   // Replace class - MUTATES

// Styles (GETS/SETS)
element.style.color = 'red';               // Set inline style - MUTATES
element.style.backgroundColor = 'blue';    // Set background - MUTATES
element.style.cssText = 'color: red;';     // Set multiple styles - MUTATES
getComputedStyle(element).color;           // "rgb(255, 0, 0)" (computed style)
element.style.removeProperty('color');     // Remove style property - MUTATES

// Data Attributes (GETS/SETS)
element.dataset.userId;                    // Get data-user-id
element.dataset.userId = '123';            // Set data-user-id - MUTATES
element.getAttribute('data-user-id');      // "123"
element.setAttribute('data-value', 'test'); // Set data attribute - MUTATES

// Navigation (RETURNS ELEMENT/NULL)
element.parentNode;                        // Parent element
element.parentElement;                     // Parent element (null if parent is document)
element.children;                          // HTMLCollection of child elements
element.childNodes;                        // NodeList of all child nodes
element.firstElementChild;                 // First child element
element.lastElementChild;                  // Last child element
element.nextElementSibling;                // Next sibling element
element.previousElementSibling;            // Previous sibling element

// Events (MUTATES DOM)
element.addEventListener('click', handler); // Add event listener - MUTATES
element.removeEventListener('click', handler); // Remove event listener - MUTATES
element.onclick = handler;                 // Set event handler - MUTATES
element.click();                           // Trigger click event - MUTATES
element.focus();                           // Focus element - MUTATES
element.blur();                            // Blur element - MUTATES

// Form Elements (GETS/SETS)
input.value;                               // Input value
input.value = 'new value';                 // Set input value - MUTATES
input.checked;                             // true/false (checkboxes/radios)
input.checked = true;                      // Set checked - MUTATES
input.disabled = true;                     // Disable input - MUTATES
select.selectedIndex;                      // Selected option index
form.submit();                             // Submit form - MUTATES
form.reset();                              // Reset form - MUTATES

// Position/Size (RETURNS NUMBER)
element.offsetWidth;                       // 200 (width including padding/border)
element.offsetHeight;                      // 100 (height including padding/border)
element.clientWidth;                       // 180 (width excluding border)
element.clientHeight;                      // 80 (height excluding border)
element.scrollWidth;                       // 250 (full scrollable width)
element.scrollHeight;                      // 150 (full scrollable height)
element.offsetLeft;                        // 10 (left position)
element.offsetTop;                         // 20 (top position)

// Scroll (GETS/SETS)
element.scrollTop;                         // 50 (vertical scroll position)
element.scrollLeft;                        // 0 (horizontal scroll position)
element.scrollTop = 100;                   // Set scroll position - MUTATES
element.scrollIntoView();                  // Scroll element into view - MUTATES
window.scrollTo(0, 100);                   // Scroll page - MUTATES

// Document Methods (VARIOUS RETURNS)
document.title;                            // "Page Title"
document.title = 'New Title';              // Set page title - MUTATES
document.body;                             //  element
document.head;                             //  element
document.documentElement;                  //  element
document.activeElement;                    // Currently focused element
document.hasFocus();                       // true/false (document has focus)