Question

我有两个文件todosController.js和index.html。我试图访问一个元素，并在JavaScript控制台中查看它的输出。这是代码：

<!--index.html:--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodosList</title>
</head>
<body>
   <h1>Todos List</h1>
   <button id="displayTodosButton">Display Todos</button>
   <!--index.html is linked to javascript file todosController.js-->
   <script src="todosController.js"></script>
</body>
</html>

这是JavaScript代码：

  //todosController.js

var jsdom = require("node-jsdom");
var fs = require("fs");
var jquery = fs.readFileSync("./jquery.js", "utf-8");

jsdom.env({
url: "http://news.ycombinator.com/",
src: [jquery],
done: function (errors, window) {
    var $ = window.$;
    console.log("HN Links");
    $("td.title:not(:last) a").each(function () {
        console.log(" -", $(this).text());
    });
}
});
let markup = fs.readFileSync('foo.html');
let doc = jsdom(markup, {});

function showData() {
    elem = doc.getElementById('TodosText').value;
}

showData();

我正在使用Webstorm作为IDE。我试图在下面的一些答案中安装npm jsdom，但问题仍然是相同的。

这是错误：

module.js:538
    throw err;
    ^

Error: Cannot find module 'node-jsdom'
   at Function.Module._resolveFilename (module.js:536:15)
   at Function.Module._load (module.js:466:25)
   at Module.require (module.js:579:17)
   at require (internal/module.js:11:18)
   at Object.<anonymous> 
   (/Users/muhammadtayyabsaeed/WebstormProjects/Todo 
   List/js/todosController.js:89:13)
   at Module._compile (module.js:635:30)
   at Object.Module._extensions..js (module.js:646:10)
   at  Module.load (module.js:554:32)
   at tryModuleLoad (module.js:497:12)
   at Function.Module._load (module.js:489:3)

感谢您的回复。

Answer 1

请尝试在WebStorm中创建以下项目：

<强>的package.json ：

{
  "name": "node_dom",
  "version": "0.0.1",
  "dependencies": {
    "jsdom": "^11.3.0"
  }
}

<强> todosController.js

const jsdom = require("jsdom/lib/old-api.js");
const jsdom_hard = require("jsdom/lib/old-api.js").jsdom;
const fs = require('fs');

jsdom.env(
  "http://news.ycombinator.com/",
  ["http://code.jquery.com/jquery.js"],
  function(err, window) {
    const $ = window.$;
    console.log("HN Links");
    $("td.title:not(:last) a").each(function() {
      console.log(" -", $(this).text());
    });
  }
);

let markup = fs.readFileSync('foo.html');
let doc = jsdom_hard(markup, {});


function showData() {
  elem = doc.getElementById('TodosText').innerHTML;
  console.log("Element value: " + elem)
}

showData();

<强> foo.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TodosList</title>
</head>
<body>
<div id="TodosText">Hello!!</div>
</body>
</html>

右键点击 package.json ，然后选择Run "npm install"
安装依赖项后，右键单击 todosController.js ，选择Run

这应该做的事情

Answer 2

我把代码扭曲了一点，所以在这里

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>TodosList</title>
</head>

<body>
  <h1>Todos List</h1>
  <input type="text" id="TodosText">
  <input type="button" id="displayTodosButton" value="Display Todos" onClick="showData();">

  <script>
    function showData() {
      elem = document.getElementById('TodosText').value;
      console.log(elem);
    }
  </script>

</body>

</html>

＆＃13;

在这个示例中，我将脚本放在html文件中，但可以随意使用。还添加了一个文本字段，并将按钮更改为一个简单的html，并在其上调用showData。

希望它有所帮助！

Answer 3

在JS的开头添加此代码并运行JS文件而不是运行HTML（将foo.html替换为JS文件到HTML文件的路径）：

var fs = require('fs');
var jsdom = require("jsdom").jsdom; 
var markup = fs.readFileSync('foo.html');
var doc = jsdom(markup, {});

然后尝试访问document作为doc，看看是否有效。

问题是，document仅在浏览器环境中定义，而不是在WebStorm控制台中定义，这就是您的代码在Chrome中工作的原因（我不是WebStorm的专家，但我相信它运行JS代码在nodeJS环境中，未定义document。

看看this线程（这也是我从上面抓住上面例子的地方）。

错误：找不到模块＆node-jsdom

3 个答案: