尽管执行了所有步骤，但替换元素仍无法正常工作。转换为数组也不起作用

Question

我正在努力用 JS 替换 h2。我不断收到 Uncaught TypeError: Failed to execute 'replaceChild' on 'Node': parameter 2 is not of type 'Node'.

我试过转换它：

let prevHeading = document.getElementsByClassName('my-title');
prevHeading = Array.from(prevHeading);

没有成功。

<body>
  <div id="outer-box" style="margin: 20px;">
    <h2 class="my-title">OLD TITLE</h2>
    <div class="inner-box">
      <ul class="main-list">
        <li class="list-item">List Item 1</li>
        <li class="list-item">List Item 2</li>
        <li class="list-item">List Item 3</li>
        <li class="list-item">List Item 4</li>
        <li class="list-item">List Item 5</li>
      </ul>
    </div>
  </div>
</body>

const newHeading = document.createElement('h2');
newHeading.className = 'my-title';
newHeading.appendChild(document.createTextNode('NEW TITLE'));
const prevHeading = document.getElementsByClassName('my-title');
const outerBox = document.querySelector('#outer-box');
outerBox.replaceChild(newHeading, prevHeading);

我可以直接使用 prevHeading[0]，但我只想知道为什么它不起作用。它还适用于：

const prevHeading = document.querySelector('.my-title');

Answer 1

在我看来，你把事情复杂化了。

您可以只使用 querySelector 和 InnerHtml 来替换标题：

var title = document.querySelector(".my-title") ;
title.innerHTML = "NEW TITLE" ;

Answer 2

只要您从 HTMLCollection returned by getElementsByClassName().

访问单个节点，您的代码就会像发布的那样工作

// This works to convert the HTMLCollection to an Array
let prevHeading_example = document.getElementsByClassName('my-title');
prevHeading_example = Array.from(prevHeading_example);
console.log('prevHeading array: ', prevHeading_example);

// This whole block works so long as you access the individual node 'prevHeading[0]'
const newHeading = document.createElement('h2');
newHeading.className = 'my-title';
newHeading.appendChild(document.createTextNode('NEW TITLE'));

const prevHeading = document.getElementsByClassName('my-title');
const outerBox = document.querySelector('#outer-box');
outerBox.replaceChild(newHeading, prevHeading[0]); // <-- access node at index 0

<body>
  <div id="outer-box" style="margin: 20px;">
    <h2 class="my-title">OLD TITLE</h2>
    <div class="inner-box">
      <ul class="main-list">
        <li class="list-item">List Item 1</li>
        <li class="list-item">List Item 2</li>
        <li class="list-item">List Item 3</li>
        <li class="list-item">List Item 4</li>
        <li class="list-item">List Item 5</li>
      </ul>
    </div>
  </div>
</body>

尽管执行了所有步骤，但替换元素仍无法正常工作。转换为数组也不起作用

Replace element isn't working despite following all the steps. Coverting to Array isn't working either

html

javascript

arrays

replace

getelementsbyclassname