1. 选择元素

通过ID选择

// 返回单个元素
const element = document.getElementById('myId');

通过类名选择

// 返回HTMLCollection（实时集合）
const elements = document.getElementsByClassName('myClass');

通过标签名选择

// 返回HTMLCollection
const elements = document.getElementsByTagName('div');

通过选择器选择（现代推荐）

// 返回第一个匹配元素
const element = document.querySelector('.container #item');

//id 理论上全局唯一，但老项目、多人协作或自动生成代码里可能出现 重复 id。
//加上父级限定，可缩小范围、避免误选别的同名 id。
//选择器从左到右递进：先找 class 为 container 的元素，再在其内部找 id 为 item 的子元素。

// 返回所有匹配元素（NodeList，静态集合）
const elements = document.querySelectorAll('.item, .box');

通过name属性选择

// 返回NodeList
const elements = document.getElementsByName('username');

特殊选择方法

// 选择表单元素
const form = document.forms['myForm'];
const input = form.elements['username'];

// 选择文档根元素
const html = document.documentElement;
const body = document.body;
const head = document.head;

2. 创建元素

创建新元素

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

// 创建带属性的元素
const input = document.createElement('input');
input.type = 'text';
input.placeholder = '请输入内容';
input.className = 'form-input';

// 创建文本节点
const text = document.createTextNode('Hello World');

// 创建注释节点
const comment = document.createComment('这是一个注释');

克隆元素

const original = document.getElementById('template');
const clone = original.cloneNode(true); // true表示深度克隆

使用模板字符串创建（现代方式）

const htmlString = `
  <div class="card">
    <h3>标题</h3>
    <p>内容描述</p>
    <button>点击</button>
  </div>
`;

// 方法1：使用innerHTML
const container = document.createElement('div');
container.innerHTML = htmlString;
const newElement = container.firstElementChild;

// 方法2：使用insertAdjacentHTML
document.body.insertAdjacentHTML('beforeend', htmlString);

3. 插入元素

追加到父元素末尾

const parent = document.getElementById('parent');
const child = document.createElement('div');

// 方法1：appendChild
parent.appendChild(child);

// 方法2：append（现代，支持多个参数和文本）
parent.append(child, '一些文本', anotherElement);

插入到特定位置

const parent = document.getElementById('parent');
const newChild = document.createElement('div');
const referenceChild = document.getElementById('reference');

// 插入到某个子元素之前
parent.insertBefore(newChild, referenceChild);

// 如果没有referenceChild，则添加到末尾（相当于appendChild）
parent.insertBefore(newChild, null);

使用insertAdjacentHTML（强大且高效）

const element = document.getElementById('target');

// 四种插入位置：
element.insertAdjacentHTML('beforebegin', '<div>在前面插入</div>'); // 作为前一个兄弟元素
element.insertAdjacentHTML('afterbegin', '<div>在开头插入</div>');  // 作为第一个子元素
element.insertAdjacentHTML('beforeend', '<div>在末尾插入</div>');   // 作为最后一个子元素
element.insertAdjacentHTML('afterend', '<div>在后面插入</div>');    // 作为后一个兄弟元素

替换元素

const parent = document.getElementById('parent');
const oldChild = document.getElementById('old');
const newChild = document.createElement('div');

parent.replaceChild(newChild, oldChild);

// 现代方式
oldChild.replaceWith(newChild);

4. 删除元素

从父元素中移除

const parent = document.getElementById('parent');
const child = document.getElementById('child');

// 方法1：removeChild
parent.removeChild(child);

// 方法2：remove（现代，元素自己移除自己）
child.remove();

清空所有子元素

const container = document.getElementById('container');

// 方法1：设置innerHTML为空
container.innerHTML = '';

// 方法2：循环移除所有子元素
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

// 方法3：使用replaceChildren（现代，高效）
container.replaceChildren();