如何使用createTextNode()正确获取列表首个子元素并生成h1文本？

嘿，我明白你遇到的麻烦了！你之所以看到[object] [object]? Great Colour.，是因为你直接把DOM元素对象和字符串拼接在一起了——JavaScript会把DOM对象转换成它的默认字符串表示[object HTMLAnchorElement]，所以才会出现这个奇怪的输出。

问题根源 #

你获取到的<a>标签是一个DOM元素对象，不是文本内容。当你尝试把它和字符串拼接时，JS不会自动提取它里面的文字，而是直接输出对象的类型标识。

正确的解决方法 #

你需要先提取这个DOM元素的文本内容，常用的两种方法是：

• textContent：W3C标准方法，获取元素的所有文本内容（包括隐藏的），兼容性最好
• innerText：只获取可见的文本内容，适合需要考虑样式隐藏的场景

这里推荐用textContent，下面是修正后的完整代码：

HTML（保持你的原结构）

<div class="list"> 
  <ul> 
    <li><a href="#">Blue</a></li> 
    <li><a href="#">Red</a></li> 
    <li><a href="#">Green</a></li>
  </ul>
</div>

JavaScript 修正版

// 精准定位到第一个<a>元素
const firstLink = document.querySelector('.list ul li:first-child a');
// 提取它的文本内容（trim可选，用来清理前后空格）
const linkText = firstLink.textContent.trim();
// 创建包含目标文本的节点
const textNode = document.createTextNode(`${linkText}? Great Colour.`);
// 创建h1标签并添加到页面
const heading = document.createElement('h1');
heading.appendChild(textNode);
document.body.appendChild(heading);

额外提示：用元素遍历的方式获取子元素 #

如果你习惯用子元素遍历的方式（比如firstChild），要注意DOM树里可能存在空白文本节点（比如换行、空格），这时应该用firstElementChild来确保拿到的是元素节点：

const listContainer = document.querySelector('.list ul');
// 获取第一个<li>元素节点（跳过空白文本）
const firstListItem = listContainer.firstElementChild;
// 获取<li>里的第一个<a>元素节点
const firstLink = firstListItem.firstElementChild;
// 同样提取文本内容
const linkText = firstLink.textContent;

这样就能正确输出Blue? Great Colour.啦！

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