时间戳

首页 > 解决方案 > 获取对javascript中元素的引用

javascript - 获取对javascript中元素的引用

问题描述

我正在做一些自学的 html/js。我正在尝试制作一个简单的图片上传器，我正在遵循的教程提供以下 html，

<section id="image" class="button">
    <button>Add image</button>
    <input type="file" accept="image/*">
  </section>

在我的CSS中

section.button input[type="file"] {
    display: none;
  }

隐藏选择文件按钮。它要求设置 javascript，以便在单击添加图像按钮时调用隐藏按钮的 .click 方法。

它说这可以通过获取对隐藏元素的引用来完成。我在提供的视频中找不到任何解释如何执行此操作的内容。我在 youtube 上看过视频，但它们似乎都给隐藏的输入一个 id，例如，

<input type="file" id = "file" accept="image/*">

提供的 html 文件中是否有错误，或者是否可以获得对隐藏元素的引用而不给它一个 ID？

谢谢

标签： javascript

解决方案

你的 CSS 选择器字符串

section.button input[type="file"]

已经选择了您需要的输入 - 您需要做的就是将该选择器字符串传递给querySelector，然后您将返回对它的引用<input>：

const input = document.querySelector('section.button input[type="file"]');
input.click();

该选择器字符串的含义是：选择一个其值为input的属性，该属性是其类为的 a 的后代。（仅举个例子，如果您想选择而不是，您可以遵循完全相同的模式 - 只需使用代替: ）typefilesectionbutton<button><input>buttoninputsection.button button

推荐阅读