js原生querySelector和getElement等方法

fury_123

已于 2023-06-29 11:58:11 修改

阅读量248

点赞数

文章标签： javascript 数学建模开发语言

于 2023-05-31 16:15:36 首次发布

本文链接：https://blog.csdn.net/kuang_nu/article/details/130971403

版权

问：

setTimeout(() => {
        const img = document.createElement('img');
        const winningBall = document.getElementsByClassName('.winningBall')
        img.src = '../img/空球-03.png'
        winningBall.appendChild(img)
    }, 5000);这个代码有什么错误

回答：

这段代码有两个问题：

1. `getElementsByClassName` 方法不需要在类名前加上点号 (`.`)，所以应该使用 `winningBall = document.getElementsByClassName('winningBall')`，而不是 `document.getElementsByClassName('.winningBall')`。
2. `getElementsByClassName` 方法返回的是一个节点列表（NodeList），而不是单个元素。我们需要指定要操作的元素为节点列表中的某一个元素。可以通过以下方法之一来实现：

- 使用索引值 `[0]` 获取第一个元素。例如：`winningBall[0].appendChild(img)`
- 循环遍历节点列表中的元素，分别操作每个元素。

综上所述，正确的代码应该如下所示：

```javascript
setTimeout(() => {
  const img = document.createElement('img');
  const winningBall = document.getElementsByClassName('winningBall')[0]; // 获取第一个元素
  img.src = '../img/空球-03.png';
  winningBall.appendChild(img);
}, 5000);
```

当然，如果您的 HTML 文档中存在多个类名为 `winningBall` 的元素时，应根据实际情况确定要操作的元素是哪一个，可以使用类似 `[1]` 的方式获取相应的元素。

getElementsByClassName不需要加.

querySelector需要加.

正确写法：

const winningBall = document.querySelector('.winningBall')