我最近遇到了the same code run at some engines and not in others的问题，原因是DOM method找不到元素。这就引出了另一个问题：给定相同的代码，为什么有些解释器/引擎能够找到元素，而有些则不能？
能够找到元素的解释器：
无法找到元素的解释器：
显然让解释器知道你在做什么很方便，但是自动假设你的意思有什么缺点，这样其他人就不会实现这个功能吗？
这似乎是浏览器的问题。对吗？
【问题讨论】：
标签： javascript dom browser interpreter
这些不是解释器，它们是脚本运行的上下文。
它们确实不同，因为例如从通过 HTTPS 发送的服务器运行的同一个 .html 页面与从 file:// 协议提供的同一个页面所代表的安全风险不同。
虽然在这种情况下我找不到确切的罪魁祸首，但我发现对于 Firefox，它与您的库正在创建的 WebSocket 连接有关，它确实会抛出 StackSnippets，但我找不到它究竟抛出的原因堆栈片段。 需要明确的是，问题不在于他们找不到 DOM 元素，而在于代码抛出了一个只处理了一半的 DOMException，因此脚本执行停止了。
try {
const connection = new WebSocket('wss://b95e1176.databases.neo4j.io:7687/');
console.log('passed')
}
catch(err) {
console.log('caught');
}在 jsfiddle 的 iframe 和 StackSnippets 之间的少数区别中，我首先怀疑 StackSnippets 中缺少 allow-same-origin 子句，然后是缺少 window.origin，但考虑到我试图在 jsfiddle 中重现这两种情况，它仍然在那里工作，我现在怀疑这与发送到页面的 HTTP 标头有关，但正如我所说，我不确定。
无论如何，这一切都在说确实可以预期某些代码在不同的上下文中可能会以不同的方式工作，并且还可以预期不同的浏览器会使用各种安全措施，您甚至可以预期同一浏览器的未来版本在相同的上下文中表现不同。
不幸的是，我们作为 web 开发人员除了广泛和定期的测试之外无能为力。
【讨论】：
结构
<div id="foo" data-function="bar">string1</div>
<div id="lorem" data-function="ipsum">string2</div>
<div id="dolor" data-function="es">string3</div>
每个元素都有：
id
data-function
Javascript
function myfunction(context, id, func, str) {
context[id] = undefined;
return context[func] = function() {
var config = {
a: id,
b: str,
//otherConfigs...
};
context[id] = new NeoVis.default(config);
context[id].render();
console.log(`function ${func} was called and ${id} is the id`);
};
}
for (let item of document.querySelectorAll("#foo, #lorem, #dolor")) {
myfunction(window, item.id, item.getAttribute("data-function"), item.innerText)();
}
最后三行发起了对myfunction 的调用。现在，如果您没有 ID 为 foo、lorem 和 dolor 的元素，则 querySelectorAll 返回一个空的类数组对象，并且永远不会调用 myfunction。您需要确保可以正确找到您的 div 元素并相应地更改选择器。然后，将它们的函数定义为 data-function 的值，并将它们的字符串定义为 div 的内部文本。
【讨论】：