练习JavaScript函数传参时调用querySelector出现null报错如何解决

报错根因 #

你遇到的document.querySelector(...) is null报错，核心是参数类型不匹配：

• 你定义的classAdder、styleAdder第一个参数预期是CSS选择器字符串（比如".box"、"article"），但你调用时传入的firstArt是createArticle返回的DOM元素对象，不是合法的选择器字符串，querySelector无法解析这个对象找到对应元素，自然返回null，调用setAttribute就抛出了类型错误。

其他存在的问题 #

除了报错的直接原因，你的代码还有3处逻辑错误：

• createArticle中误用createTextNode：这个API只会创建纯文本节点，你传入的<h1>、<p>标签会被当成普通文本渲染，不会解析成HTML元素。
• byTagElementAdder逻辑错误：getElementsByTagName返回的是DOM元素集合，不是单个元素，不能直接赋值innerHTML；且你要插入的是DOM对象，直接给innerHTML赋值会把DOM对象转成[object HTMLxxxElement]字符串，不会插入实际元素。
• 滥用CSS.escape：这个API是用来转义选择器中的特殊字符的，不需要给标签名、类名、DOM元素做转义，乱用反而会导致选择器匹配失败。

修正后的代码 #

// 创建article元素
function createArticle(h1Text, pText) {
  const art = document.createElement("article");
  // 分别创建h1和p元素，插入内容
  const h1 = document.createElement("h1");
  h1.textContent = h1Text;
  const p = document.createElement("p");
  p.textContent = pText;
  art.append(h1, p);
  return art;
}

// 给指定标签的第一个元素插入子元素
const byTagElementAdder = (whereadd, whatadd) => {
  // 取匹配标签的第一个元素，调用append插入DOM对象
  document.getElementsByTagName(whereadd)[0].append(whatadd);
};

// 给元素加类：兼容传DOM元素或者选择器字符串
const classAdder = function (element, classname) {
  const target = typeof element === 'string' ? document.querySelector(element) : element;
  target.classList.add(classname); // 用classList.add更安全，不会覆盖原有类
};

// 给元素加样式：兼容传DOM元素或者选择器字符串
const styleAdder = (element, style) => {
  const target = typeof element === 'string' ? document.querySelector(element) : element;
  target.style.cssText = style; // 用cssText设置内联样式更规范
};

// 业务逻辑
const firstArt = createArticle(
  "The H title",
  "The paragraph lorem ipsum bla bla"
);

byTagElementAdder("body", firstArt);

classAdder(firstArt, "art");
styleAdder(firstArt, "width: 100%; margin: 0 auto; padding: 2rem 0 ;");

内容的提问来源于stack exchange，提问作者Anastasiades