什么是DOM？

大白话解释： 想象一下，DOM就是浏览器把你的HTML代码变成的一个”家谱图”。每个HTML标签（如<div>、<p>等）都变成这个家谱中的一个成员（节点），DOM就是让你可以通过JavaScript与这些成员对话的工具。

📌 关键点： DOM = 网页的结构化表示，用树形结构组织所有元素。通过DOM你可以用JavaScript改变网页的内容、样式和行为。

访问DOM元素的方法

1. 通过ID获取元素

每个身份证(ID)是唯一的，通过ID可以精准找到一个人：

// 获取ID为”header”的元素
let header = document.getElementById(‘header’);

示例： 你想找到网页中唯一的”登录按钮”（假设它的id=”loginBtn”），就可以用这个方法。

2. 通过类名获取元素

就像通过班级找学生，一个班级可以有多个学生：

// 获取所有class包含”item”的元素
let items = document.getElementsByClassName(‘item’);

💡 注意： 这个方法返回的是一个”活的”集合（HTMLCollection），当你添加或删除元素时，它会自动更新。

3. 通过标签名获取元素

就像根据职业找人（如所有医生）：

// 获取所有<p>标签元素
let paragraphs = document.getElementsByTagName(‘p’);

4. 通过CSS选择器获取元素

最强大的方法！就像用复杂的条件找人：

// 获取第一个匹配CSS选择器的元素
let firstItem = document.querySelector(‘.list li:first-child’);

// 获取所有匹配CSS选择器的元素
let allItems = document.querySelectorAll(‘.list li’);

⚠️ 重要： querySelectorAll 返回的是NodeList（节点列表），不是”活的”集合。当你添加新元素时，它不会自动更新。

DOM导航 – 节点关系

找到元素后，可以通过它们的关系找到其他元素：

1. 父子关系

// 获取父元素
let parent = element.parentElement;

// 获取所有子元素
let children = element.children;

// 获取第一个子元素
let firstChild = element.firstElementChild;

// 获取最后一个子元素
let lastChild = element.lastElementChild;

2. 兄弟关系

// 获取上一个兄弟元素
let prevSibling = element.previousElementSibling;

// 获取下一个兄弟元素
let nextSibling = element.nextElementSibling;

试一试DOM导航

爷爷元素
父元素
子元素1
子元素2
子元素3

操作元素内容

1. innerHTML – 获取或设置元素的HTML内容

// 获取元素内的HTML内容
let content = element.innerHTML;

// 设置元素内的HTML内容
element.innerHTML = ‘<strong>新内容</strong>’;

⚠️ 安全注意： 使用innerHTML设置用户提供的内容时可能有安全风险（XSS攻击），请确保对内容进行过滤或转义。

2. textContent – 安全设置纯文本

当你只需要设置文本内容时，textContent更安全：

// 获取元素内的纯文本（不含HTML标签）
let text = element.textContent;

// 设置元素内的纯文本（HTML标签会被转义）
element.textContent = ‘<strong>安全文本</strong>’;

3. innerText – 获取渲染后的文本

与textContent类似，但会考虑CSS样式：

// 获取元素内可见的文本
let visibleText = element.innerText;

操作元素属性

1. getAttribute() – 获取属性值

// 获取元素的href属性值
let link = document.querySelector(‘a’);
let url = link.getAttribute(‘href’);

2. setAttribute() – 设置属性值

// 设置元素的src属性
let image = document.querySelector(‘img’);
image.setAttribute(‘src’, ‘new-image.jpg’);

3. 直接访问属性

对于标准属性（id, class, href, src等），可以直接访问：

// 直接获取和设置id
let elementId = element.id;
element.id = ‘new-id’;

4. classList – 操作类名

比直接操作className更优雅的方式：

// 添加类
element.classList.add(‘active’);

// 移除类
element.classList.remove(‘old-class’);

// 切换类（有则删，无则加）
element.classList.toggle(‘highlight’);

// 检查是否包含类
if (element.classList.contains(‘hidden’)) {
  // 执行操作
}