在javascript IDE中而不在浏览器控制台中测试DOM方法

Question

我想知道为什么在使用任何支持JavaScript语言的IDE时，如果尝试使用document.querySelectorAll()或任何DOM选择器方法获取HTML页面的元素，它将返回运行时错误ReferenceError: document is not defined ？

这是为什么仅在浏览器javascript中在控制台中定义document的原因？

我的问题是我只需要在我的IDE上运行javascript应用程序，而无需在浏览器控制台上对其进行测试。

如果有任何建议的解决方案，请提及。

Answer 1

您在“在我的IDE上”运行是什么意思？

我认为您是在谈论在服务器端进行渲染。

无论哪种方式，如果没有做任何模拟的操作，文档仅存在于浏览器中。 但是有一些模拟文档的解决方案，例如jsdom ：

https://github.com/tmpvar/jsdom

例如，在没有浏览器的情况下在服务器端运行单元测试来测试需要DOM并具有一定逻辑的UI组件非常有用。

Answer 2

最终的解决方案在jony89的答案中建议使用Nodejs ， jQuery和jsdom库在我的情况下Nodejs 。

在较新的jsdom v10 API中，我应该将HTML页面解析为JSDOM构造函数，以获得预期的结果。

但是将整个HTML页面传递给JSDOM构造函数是困难且不便的，因此我使用了另一种更简单的方法来解决此问题：较旧的jsdom API和jsdom.env()方法：

https://github.com/tmpvar/jsdom/blob/master/lib/old-api.md

我在上面传递要使用DOM方法的页面URL，然后在我的nodejs IDE上打印输出：

var jsdom = require("jsdom/lib/old-api.js");

jsdom.env(
    "http://www.ammanu.edu.jo/English/Research/Research.aspx",
    ["http://code.jquery.com/jquery.js"],
    function (err, window) {
        var $ =  window.$;
        var a = $("section a");
        for(var i = 0; i < a.length; i++){
           console.log(a[i].getAttribute("href"));
        }
    }
);