跳到主要内容

DOM 操作与插入标记

如何动态加载脚本与样式？​

const script = document.createElement("script");
script.src = "foo.js";
document.body.appendChild(script);

const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "styles.css";
document.head.appendChild(link);
  • 特点: 动态插入的资源由 DOM 控制, 不阻塞初始解析, 但会影响加载时机;

实时集合为什么容易写出死循环？​

  • 原因: getElementsByTagName 等返回的 NodeList/HTMLCollection 实时反映 DOM, 循环条件随之变化;
const divs = document.getElementsByTagName("div");
for (let i = 0; i < divs.length; ++i) {
  document.body.appendChild(document.createElement("div")); // 每轮 length 都增大
}
  • 规避: 先取静态快照 ([...divs] 或 querySelectorAll), 或先记录初始长度;

插入标记有哪几种方式？​

方式行为
element.innerHTML = html读写所有后代元素的 HTML 字符串
element.outerHTML = html读写元素自身及其后代的 HTML 字符串
element.insertAdjacentHTML(position, html)在指定位置插入 HTML 字符串
element.insertAdjacentText(position, text)在指定位置插入纯文本
  • position 取值: "beforebegin"、"afterbegin"、"beforeend"、"afterend";
  • 安全性: innerHTML 会执行插入的 HTML 中的脚本, 用户输入未转义时导致 XSS;
  • 文本替代: 插入纯文本用 textContent 或 insertAdjacentText, 不解析标签;

如何管理焦点与滚动？​

  • 焦点: document.activeElement 指向当前焦点元素, document.hasFocus() 判断文档是否获得焦点, element.focus()/blur() 切换焦点;
button.focus();
document.activeElement === button; // true
  • 滚动到可见: element.scrollIntoView({ behavior: "smooth", block: "start" });