HTMLDivelement 的元素实例在制表符初始化中为假答案

【问题标题】：element instanceof HTMLDivelement is false in Tabulator initHTMLDivelement 的元素实例在制表符初始化中为假
【发布时间】：2020-09-15 12:48:13
【问题描述】：

我想在旧版 GWT 应用程序中使用 Tabulator。

我正在从原生 JS（GWT 的 ScriptInjector 中包含的一个文件）创建 Tabulator。这是我的代码：

      const table = new Tabulator($(".tabulatordiv_id")[0], {
        data:tabledata, //assign data to table
        layout:"fitColumns", //fit columns to width of table (optional)
        columns: [{title:"Name", field:"name"}]
      });

我收到错误：“制表符创建错误 - 提供的元素无效”。

我查看了 Tabulator，发现它停在这里：

Tabulator.prototype.initializeElement = function (element) {
    if (typeof HTMLElement !== "undefined" && element instanceof HTMLElement) {
        this.element = element;
        return true;
    } else if (typeof element === "string") {
        this.element = document.querySelector(element);
        if (this.element) {
            return true;
        } else {
            console.error("Tabulator Creation Error - no element found matching selector: ", element);
            return false;
        }
    } else {
        console.error("Tabulator Creation Error - Invalid element provided:", element);
        return false;
    }
};

因为 "element instanceof HTMLElement" 是 FALSE。

为了重现问题，我从旧版应用程序中提取了该页面，并使其尽可能与原始应用程序相似（引入相同的 js 库、GWT js 文件等），但失败了。我无法在旧版应用之外重现它。

但是，如果我将 Tabulator.js 中的 init 更改为稍微宽松一点：

//      if (typeof HTMLElement !== "undefined" && element instanceof HTMLElement) {
        if (typeof HTMLElement !== "undefined" && typeof element !== "string") {
        this.element = element;

然后就可以了。

我很确定我传递给 Tabulator 的是一个 HTMLElement（在浏览器中双重检查，具有 HTMLElement 应具有的所有属性）。

所以我想问一下“instanceof HTMLElement”检查的重要性如何？如果我绕过 Tabulator init 中的检查，我以后遇到麻烦的可能性有多大？

【问题讨论】：

标签： javascript html gwt tabulator

【解决方案1】：

您似乎在那里传递了一个多余的 jquery 选择器。您不妨将选择器查询字符串直接传递到 Tabulator 并让它为您找到元素：

 const table = new Tabulator($(".tabulatordiv_id")[0], {

应该是

 const table = new Tabulator(".tabulatordiv_id", {

【讨论】：

几周后，我无法重现原来的“提供的元素无效”错误。可能你是对的，现在我的代码中不再存在 JQuery 选择器问题。但是，我修改了“init”的“已修补”tabulator.js 被证明是危险的：当我不小心创建了一个未定义的 Tabulator 时，init 没有失败就完成了，后来在“rtlCheck”函数中失败了。感谢您提供有用的库！

【解决方案2】：

正确使用 Tabulator.js 可以在我们的应用程序中正常工作。我现在无法重现我原来的问题。

但是要小心我帖子中的“更宽松”的初始化。如果将“未定义”元素传递给 Tabulator，它不会失败，但当然这会导致稍后在 rtlCheck 中失败。

【讨论】：