getElementById 返回静态单元素引用，不随DOM变化更新；getElementsByTagName 返回动态HTMLCollection，实时响应DOM增删。
getElementById 返回单个元素，且始终指向文档中 当前 ID 唯一匹配的节点；getElementsByTagName 返回 HTMLCollection（动态集合），会随 DOM 变化实时更新。
getElementById 的静态“快照”特性
调用 getElementById 时，浏览器立即查找并返回一个对目标元素的直接引用。这个引用不会因后续增删同 ID 元素而自动失效或切换——即使你删除了该元素，变量仍持有原节点（已从 DOM 中移除）；如果新增另一个同 ID 元素，它也不会自动指向新节点。
- ID 在规范中应唯一，重复 ID 属于 HTML 错误，浏览器通常只返回第一个匹配项
- 删除后访问该引用的属性（如
node.textContent）仍有效，但node.parentNode为 null - 若想获取新插入的同 ID 元素，必须重新调用
document.getElementById()
getElementsByTagName 的动态响应机制
getElementsByTagName 返回的是 HTMLCollection，这是一个“活”的集合：内部自动监听 DOM 变化，每次读取其 .length 或遍历（如 for (let el of collection)）时，都会实时反映当前 DOM 状态。
- 插入新
<div>后，document.getElementsByTagName('div').length立即增加 - 删除某个
<p>后，对应索引位置的元素会“前移”，集合长度减小 - 注意：不能用
forEach直接遍历旧版 HTMLCollection（需转成数组），但for...of和传统for循环都可安全使用
动态操作中的典型陷阱与建议
混淆两种方法的返回类型和更新行为，容易导致逻辑错误。例如：
立即学习“Java免费学习笔记（深入）”；
- 缓存
getElementsByTagName('li')结果后批量删除节点，再循环该集合——可能跳过或重复处理（因集合实时收缩） - 用
getElementById获取按钮后监听点击，随后整个父容器被 innerHTML 替换——事件监听器丢失，且原引用不再在 DOM 中 - 推荐做法：频繁增删场景下，优先用
querySelector/querySelectorAll（后者返回静态 NodeList），或每次需要时重新获取
简单验证示例
可在控制台运行：
// 创建初始节点
document.body.innerHTML = '<div id="test">A</div><p>1</p>';
const byId = document.getElementById('test');
const byTag = document.getElementsByTagName('p');
console.log(byId.textContent); // "A"
console.log(byTag.length); // 1
// 动态添加
document.body.insertAdjacentHTML('beforeend', '<p>2</p>');
console.log(byTag.length); // 立即变为 2 ← 动态更新
// 删除原 div
byId.remove();
console.log(byId.parentNode); // null ← 引用仍在，但已离树
console.log(document.getElementById('test')); // null ← 重新查，找不到
