DOM 操作基础

// 通过 ID 选择
const element = document.getElementById('myId');

// 通过类名选择（返回多个元素）
const elements = document.getElementsByClassName('myClass');

// 通过标签名选择
const divs = document.getElementsByTagName('div');

// 使用 CSS 选择器（推荐）
const element = document.querySelector('.myClass');
const elements = document.querySelectorAll('.myClass');

// 选择单个元素
document.querySelector('#header');
document.querySelector('.active');
document.querySelector('button[type="submit"]');
document.querySelector('.container > .item:first-child');

// 选择多个元素
document.querySelectorAll('.item');
document.querySelectorAll('ul > li');
document.querySelectorAll('input[type="text"]');

const element = document.querySelector('.title');

// 获取文本内容
const text = element.textContent;

// 设置文本内容（会覆盖原有内容）
element.textContent = '新的文本内容';

// 获取 HTML 内容
const html = element.innerHTML;

// 设置 HTML 内容
element.innerHTML = '<span>带标签的内容</span>';

const link = document.querySelector('a');

// 获取属性
const href = link.getAttribute('href');

// 设置属性
link.setAttribute('href', 'https://developer.mozilla.org');

// 直接访问属性
link.href = 'https://developer.mozilla.org';
link.target = '_blank';

// 删除属性
link.removeAttribute('target');

// 检查属性是否存在
if (link.hasAttribute('target')) {
    // 属性存在
}

const element = document.querySelector('.box');

element.style.backgroundColor = '#ff0000';
element.style.fontSize = '20px';
element.style.padding = '10px';

// 获取样式
const bgColor = element.style.backgroundColor;

const element = document.querySelector('.card');

// 添加类
element.classList.add('active');
element.classList.add('featured', 'highlight');

// 删除类
element.classList.remove('active');

// 切换类
element.classList.toggle('active');

// 检查类是否存在
if (element.classList.contains('active')) {
    // 类存在
}

// 替换类
element.classList.replace('old-class', 'new-class');

// 创建元素
const div = document.createElement('div');
const p = document.createElement('p');
const img = document.createElement('img');

// 设置属性和内容
div.className = 'container';
p.textContent = '这是段落文本';
img.src = 'image.jpg';
img.alt = '图片描述';

// 添加到文档
document.body.appendChild(div);
div.appendChild(p);
div.appendChild(img);

const element = document.querySelector('.item');

// 从父元素删除
element.parentNode.removeChild(element);

// 或者直接删除
element.remove();

const parent = document.querySelector('.container');
const newElement = document.createElement('div');
newElement.textContent = '新元素';

// 在父元素末尾添加
parent.appendChild(newElement);

// 在指定元素之前插入
const referenceElement = document.querySelector('.reference');
parent.insertBefore(newElement, referenceElement);

// 在指定元素之后插入
referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);

const button = document.querySelector('#myButton');

// 添加点击事件
button.addEventListener('click', function(event) {
    console.log('按钮被点击');
    console.log(event.target); // 触发事件的元素
});

// 使用箭头函数
button.addEventListener('click', (event) => {
    console.log('按钮被点击');
});

// 一次性事件监听器
button.addEventListener('click', handler, { once: true });

function handler(event) {
    console.log('只执行一次');
}

// 鼠标事件
element.addEventListener('click', handler);
element.addEventListener('dblclick', handler);
element.addEventListener('mouseenter', handler);
element.addEventListener('mouseleave', handler);
element.addEventListener('mouseover', handler);
element.addEventListener('mouseout', handler);

// 键盘事件
element.addEventListener('keydown', handler);
element.addEventListener('keyup', handler);
element.addEventListener('keypress', handler);

// 表单事件
form.addEventListener('submit', handler);
input.addEventListener('input', handler);
input.addEventListener('change', handler);
input.addEventListener('focus', handler);
input.addEventListener('blur', handler);

// 窗口事件
window.addEventListener('load', handler);
window.addEventListener('resize', handler);
window.addEventListener('scroll', handler);

// 捕获阶段（从外到内）
element.addEventListener('click', handler, true);

// 冒泡阶段（从内到外，默认）
element.addEventListener('click', handler, false);

// 阻止事件冒泡
element.addEventListener('click', function(event) {
    event.stopPropagation();
});

// 阻止默认行为
link.addEventListener('click', function(event) {
    event.preventDefault();
});