DOM操作练习：修改Pickles示例文本失败求助

问题背景 #

练习任务：选中页面中显示“Delicious”的<span>元素，用JavaScript将其文本改为“Disgusting”。

页面HTML代码如下：

<!DOCTYPE html>

<head>
    <title>Pickles</title>
    <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
    <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <!--PLEASE LEAVE THIS LINE ALONE! MAKE YOUR CHANGES USING JAVASCRIPT!!-->
    <h1>Pickles Are <span>Delicious</span></h1>
</body>

</html>

你的代码问题 #

你写的代码：

const pickleTaste = document.getElementsByTagName('span').textContent = 'Disgusting';
console.log(pickleTaste);

问题出在document.getElementsByTagName('span')返回的是HTMLCollection（类数组对象），不是单个DOM元素。集合本身没有textContent属性，所以直接赋值不会生效。

修正后的代码 #

方法1：从HTMLCollection中取第一个元素 #

// 取集合中的第一个span元素
const pickleTasteElement = document.getElementsByTagName('span')[0];
pickleTasteElement.textContent = 'Disgusting';
console.log(pickleTasteElement.textContent);

方法2：用querySelector更简洁 #

querySelector直接返回匹配到的第一个元素，写法更直观：

const pickleTasteElement = document.querySelector('span');
pickleTasteElement.textContent = 'Disgusting';
console.log(pickleTasteElement.textContent);

说明 #

• 不管用textContent、innerText还是innerHTML，核心都是要先拿到单个DOM元素，而不是元素集合。
• 因为页面中只有一个<span>，所以两种方法都能精准选中目标元素，修改后文本会成功变为“Disgusting”。

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