为何无法通过figure的firstChild设置figcaption文本？

为什么firstChild拿不到figcaption？ #

firstChild会返回父元素下的第一个节点，但浏览器会把HTML里的换行、缩进这些空白字符解析成文本节点。你的代码里<figure>标签和<figcaption>之间有换行和空格，所以firstChild拿到的是空白文本节点，不是<figcaption>元素。文本节点没有innerHTML属性，自然没法设置文本。

几种可行的解决方式 #

• 用firstElementChild：专门获取父元素下的第一个元素节点，自动忽略文本节点

  let temp = document.getElementById("fig" + figNum).firstElementChild;
  temp.innerHTML = "some text";
  

• 用children集合：通过索引取第一个元素节点

  let temp = document.getElementById("fig" + figNum).children[0];
  temp.innerHTML = "some text";
  

• 用querySelector：直接在figure内部定位figcaption

  let temp = document.getElementById("fig" + figNum).querySelector("figcaption");
  temp.innerHTML = "some text";
  

验证小技巧 #

想确认firstChild到底是什么类型，加两行打印代码就能看清楚：

let fig = document.getElementById("fig" + figNum);
console.log(fig.firstChild); // 会显示是Text类型的节点
console.log(fig.firstChild.nodeType); // 文本节点的nodeType是3，元素节点是1

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