从DOM /BuckleScript querySelector中选择元素

Question

如何使用理性从DOM中选择项。我在DOM绑定中使用bs-webapi，这里是我想要做的：

let parent = document |> Document.querySelector(".parent");
let child = Element.querySelector(".child", parent);

但是，BuckleScript抱怨是因为父类型不是正确的。它说父母是option(Dom.element)类型的，父母应该是Dom.element.t。我对理性和尝试学习都很陌生。我不明白option(Dom.element)是什么意思，也不明白如何使上面的代码块工作。任何帮助都是非常感谢的。

Answer 1

您需要打开选项变体，我们可以通过开关来实现这一点，并使用内置的None/某些变体。

您可以在这里找到一些关于选项变体的文档：https://reasonml.github.io/docs/en/newcomer-examples.html#using-the-option-type

下面是关于选项的更多文档：https://reasonml.github.io/docs/en/variant.html#option

要做到这一点，您可以将代码更改为如下内容：

let parent = document |> Document.querySelector(".parent");
let child = switch (parent) {
  | Some(p) => switch (Element.querySelector(".child", p)) {
    | Some(c) => c
    | None => raise(Failure("Unable to find child selector"))
  }
  | None => raise(Failure("Unable to find parent selector"))
};

如果您想要登录到控制台而不是失败，则需要返回一个有效的Dom.element.t，它可能如下所示：

let emptyEl = document |> Document.createElement("noscript");
let parent = document |> Document.querySelector(".parent");
let child = switch (parent) {
  | Some(p) => switch (Element.querySelector(".child", p)) {
    | Some(c) => c
    | None => {
      Js.log("Unable to find child selector");
      emptyEl;
    }
  }
  | None => {
    Js.log("Unable to find parent selector");
    emptyEl;
  }
};

然后，您需要检查您的子元素是否是noscript，以确定您是否找到了要查找的子元素。