jQuery 3.6.0与jsPlumb 5.10.4 RC兼容报错：el.getAttribute不是函数

环境：Windows 10 + 最新版Mozilla Firefox
在$(document).ready(function(){ ... });内初始化jsPlumb结构时，页面无响应，控制台出现以下警告与异常：

控制台警告 #

jQuery.Deferred exception: el.getAttribute is not a function getAttribute@file:///path/js/jsplumb.bundle.js:14643:19
manage@file:///path/js/jsplumb.bundle.js:7210:18
...

控制台异常 #

Uncaught TypeError: el.getAttribute is not a function
getAttribute file:///path/js/jsplumb.bundle.js:14643
manage file:///path/js/jsplumb.bundle.js:7210
manage file:///path/js/jsplumb.bundle.js:15589
_internal_newEndpoint file:///path/js/jsplumb.bundle.js:7368
addEndpoint file:///path/js/jsplumb.bundle.js:7551
<anonymous> file:///path/js/structuregraph.js:20
...

jsplumb.bundle.js 第14643行周边代码 #

...
}, {
  key: "setAttribute",
  value: function setAttribute(el, name, value) {
    el.setAttribute(name, value);
  }
}, {
  key: "getAttribute",
  value: function getAttribute(el, name) {
    return el.getAttribute(name);   // <----------------------- line 14643 
  }
}, {
  key: "setAttributes",
  value: function setAttributes(el, atts) {
    for (var i in atts) {
      el.setAttribute(i, atts[i]);
    }
  }
}, {
...

疑问：这个getAttribute函数存在什么问题？

问题分析与解决方案 #

核心原因 #

报错el.getAttribute is not a function的本质是：传入jsPlumb的getAttribute方法的el不是原生DOM元素，而是jQuery对象。

jsPlumb的这个getAttribute方法设计为接收原生DOM节点，调用其原生APIgetAttribute()，但jQuery对象是对原生DOM的包装，本身没有这个原生方法（jQuery提供的是.attr()方法），因此触发类型错误。

解决方法 #

你需要确保传给jsPlumb的是原生DOM元素，而非jQuery对象，有两种常用方式：

1. 从jQuery对象中提取原生DOM：使用jQuery对象的[0]索引或.get(0)方法，比如：

   // 错误写法：直接传jQuery对象
   jsPlumb.addEndpoint($("#myElement"), { /* 配置项 */ });
   // 正确写法：提取原生DOM
   jsPlumb.addEndpoint($("#myElement")[0], { /* 配置项 */ });
   // 或者
   jsPlumb.addEndpoint($("#myElement").get(0), { /* 配置项 */ });
   

2. 直接用原生JS选择器获取元素：绕过jQuery，直接获取原生DOM节点，比如：

   const el = document.getElementById("myElement");
   jsPlumb.addEndpoint(el, { /* 配置项 */ });
   

内容的提问来源于stack exchange，提问作者MrSnrub