如何为网站编写用户脚本[初学者]

Question

为了保持简洁，我想编写一个用户手册，用于读取网站上的数据并以更加用户友好的方式显示。

我接下来没有编写用户脚本的经验，我在firefox上安装了Firebug来帮助我找到元素。

我已从网站保存了一个页面，但我想学习如何从这里开始，我可以使用哪些软件实时测试我的代码。我有记事本++，我可以安装eclipse。

我能找到的地方：

1. XPATH：/html/body/main/section[2]/div[1]/div[2]/div/div[4]/div[2]/div[1]
2. InnerHTML：＆＃34; $ 0.30＆＃34;
3. HTML节点+内容：<div class="value">$ 0.30</div>
4. CSS路径：html body main section.box div.box-shiny-alt div.full div.winsorloses div.oitm div.item div.value

我有4个这样的值类元素，我想要一起添加，然后显示总和。我应该从哪里开始？

Answer 1

听起来你是在正确的轨道上，但对于初学者来说，庞大的DOM API可能相当令人生畏，所以让我看看我是否可以帮助你。正如其他人所建议的那样，熟悉JavaScript语言本身应该是你迈出的第一步。

我相信你问题中最重要的一行就在这里：

  

我可以使用哪种软件实时测试我的代码

如今，Firefox的内置Web控制台非常强大，而且正是您所需要的。使用Ctrl + Shift + K打开它。现在只关注JavaScript控制台和元素检查器标签 - 它们将向您显示您的代码和HTML的确切内容。

看一下JS控制台的这个截图，我将指出一些有用的功能：

底部的文本栏是您可以输入代码并在上面的日志中查看结果的位置。请注意，当我输入document.body时，控制台会显示{＆＃39; get＆＃39;开头的document.querySelector("div")对象的所有属性列表。

在日志中，您可以看到我之前输入的<div>，并打印了生成的对象：页面上的第一个return $http.post('/app/pdf/export',data,{responseType:'arraybuffer'}) 元素。如果在控制台中单击该行，则右侧的面板将打开，显示该对象的所有属性及其值。如果单击日志中的白色方块，它将指出文档树中该元素存在的确切位置。

所以，在控制台玩游戏;实验;如果您想知道它们的含义，请在https://devdocs.io或Google中搜索属性名称。这应该可以帮助您了解DOM API的方法。如果您对JavaScript有一些更具体的问题而无法找到答案，我建议您在JavaScript论坛或IRC频道上寻求帮助新手 - 也许https://www.reddit.com/r/learnjavascript或{{3} }。或者只是在这里发表评论，我会看到它。祝你好运！