Question

我认为我对DOM遍历有基本的了解，但我怀疑我是否正在高效地进行。

例如：

<textarea name="description"></textarea>
<p class="notes"><small>100 characters or less <span class="remainder"></span></small></p>

我在textarea上有一个keyup事件监听器。当用户在textarea中键入时，我希望.remainder span显示类似“（剩余50个字符）”的内容。

我目前正在访问.remainder这样的范围：

var remainder = $('textarea').next('p').children('small').children('.remainder');

我认为有一种更简单的方法可以做到这一点 - 也许通过选择器？我希望能找到某种工具，比如WebKit的开发者工具，在视觉上向我展示一个元素与另一个元素的关系。

有人能告诉我这样的事情是否存在？您对DOM遍历的任何建议也会非常感激。

谢谢！

Answer 1

您可以尝试使用Firebug for Firefox。这个插件让你可以访问DOM，你可以直接在控制台中执行代码并立即看到效果。

例如，安装Firebug后，打开它并选择控制台选项卡。然后在右侧窗口中键入您的Javascript代码，包括您的jQuery选择器等，然后单击运行。

Answer 2

我建议你多学习一下CSS选择器。从其他注释中可以看出，还有其他方法可以更快地获取该元素。根据经验，CSS选择器比JS函数调用更快，因此除非必要，否则尽量减少调用。

至于你提到的工具，Firebug规则，正如其他人提到的那样。您有一个内置控制台，您可以从当前网页调用功能，因此无需在每次测试后按刷新。它还以一种漂亮，全面的方式显示您需要的所有数据。此外，在构建CSS查询时，您可以使用HTML选项卡来研究文档结构并确定要使用的选择器。

Chrome还有一个开发人员控制台，其中包含相同的角色，它也存在firebug Lite，而且这个浏览器不需要特定的浏览器（它只用JS编写）。

Answer 3

更简单的方法是使用.find()代替.children()。

$('textarea').next('p').find('.remainder')

Answer 4

如果只有一个元素有remainder类，你可以这样做：

var remainder = $(".remainder")

...选择它。如果还有更多，那么您将不得不缩小搜索范围。而Firebug也是我推荐的。

Answer 5

Firebug for Firefox是一个非常方便的工具。另外，我建议您使用Chrome中的开发人员工具。您可以在页面中查看资源，编写脚本并动态测试它们。