Javascript 为什么forEach使用e.target.children而不使用getElementById children？

我有一个SVG/按钮，它包含几个颜色元素。我们的想法是让这些元素在mouseEnter上一个接一个地滑入，然后从mouseLeave的另一侧滑出，然后重置，以便再次执行

使用[…e.target.children]创建数组时，后续的forEach函数正常工作。当使用getElementById并转换为array时，我得到的错误不是一个函数

前者返回实际元素的列表，而后者只返回一个列表。如何正确转换数组以使forEach函数工作

<svg id="HeroButton" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 48">
  <title>HeroButton</title>
  <polygon className="pink" points="29 23 52 0 15 0 0 0 0 48 15 48 54 48 29 23" fill="#ed3e88"/>
  <polygon className="yellow" points="97.5 40.5 114 24 96 24 96 0 52 0 29 23 54 48 82 48 82 40.5 97.5 40.5" fill="#fded52"/>
  <polygon className="turq" points="155.5 19.5 175 0 116 0 96 0 96 24 114 24 97.5 40.5 82 40.5 82 48 116 48 156.5 48 185 19.5 155.5 19.5" fill="#17adcb"/>
  <polygon className="beige" points="224.5 33 224.5 13.5 238 0 189 0 175 0 155.5 19.5 185 19.5 156.5 48 189 48 239.5 48 224.5 33" fill="#ffffc7"/>
  <polygon className="turq2" points="243 0 238 0 224.5 13.5 224.5 33 239.5 48 243 48 270 48 270 0 243 0" fill="#17adcb"/>
</svg>

口香糖， 您可以在不同的数组中获取子元素，然后可以在该数组上使用forEach

const el = document.getElementsByClassName('js-favorite-btn s-btn s-btn__unset c-pointer py8')

使用el[0]时，children.forEach给我错误信息

el[0].children.forEach is not a function

但是当使用

const arr = [el[0].children]

然后运行forEach works。

---

我希望这能对您起作用。

看看您这里的两段代码：

事件处理程序 事件监听器 因此，定义了多边形特性后，可以从组件中的任何位置访问它。此外，您不需要显式地将其传递给事件处理程序。只要随时使用这个.polygons即可

---

沙盒：

你凭什么说它没有？出错的不是一个函数——还有，是什么让你认为HandleMouseCenter会被数组调用呢？polygons.forEach不是一个函数。我只知道一种方法会给我一个错误，而另一种不会。也许我的代码还有其他问题？也许在初始渲染时，多边形为空。这就是鼠标的问题。。。因为这个论点不是一个简单的问题array@gumball凉的我很乐意帮忙，我对你正在制作的动画很感兴趣。当你有机会的时候，请考虑把我的答案标记为答案，如果你觉得它有助于解决你的这一部分。谢谢你的回答。在componentDidMount中，我展示了多边形是一个数组。我认为我将多边形数组错误地传递给updatePolyguns，但我不知道为什么。你能解释一下吗？你在componentDidMount中定义的多边形变量只在该执行范围内可用，也就是说，多边形不是在该函数之外定义的。如果需要，可以定义一个名为this.polygons的属性，并跨组件访问它。我可以给你看。如果你能看，我将不胜感激@口香糖在这里似乎不是一个问题：尽管说实话，我不确定你期望的视觉变化是什么。我明白了，这可能是一个完全不同的问题。关于你当前的问题，这似乎起到了关键作用：

el[0].children.forEach is not a function

const arr = [el[0].children]

  updatePolygons = (polygons) => {
    // const polygons = [...e.target.children];
    polygons.forEach(child => {
      child.style.transform = this.state.translate;
      child.style.opacity = this.state.opacity;
    });
  };

    <HeroButtonSVG
      onMouseEnter={this.handleMouseEnter}
      onMouseLeave={this.handleMouseLeave}
    />

import React from "react";
import ReactDOM from "react-dom";
import HeroButtonSVG from "./HeroButtonSVG";

import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      translate: "translateX(100%)",
      opacity: 1
    };
  }

  polygons = [];

  componentDidMount() {
    // const polygons = [...document.getElementById('HeroButton').children;
    this.polygons = Array.from(document.getElementById("HeroButton").children);
    this.setState(
      {
        translate: "translateX(100%)",
        opacity: 0
      },
      () => this.updatePolygons()
    );
  }
  handleMouseEnter = () => {
    this.setState(
      {
        translate: "translateX(0%)",
        opacity: 1
      },
      () => this.updatePolygons()
    );
  };
  handleMouseLeave = () => {
    this.setState(
      {
        translate: "translateX(100%)",
        opacity: 0
      },
      () => this.updatePolygons()
    );
  };
  updatePolygons = () => {
    // const polygons = [...e.target.children];
    this.polygons.forEach(child => {
      child.style.transform = this.state.translate;
      child.style.opacity = this.state.opacity;
    });

    console.log(this.polygons);
  };
  render() {
    return (
      <div className="Hero">
        <button>
          <HeroButtonSVG
            onMouseEnter={this.handleMouseEnter}
            onMouseLeave={this.handleMouseLeave}
          />
          <span>
            Check out my work
            <i className="fas fa-chevron-right" />
          </span>
        </button>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);