通过javascript更改选项卡的内部文本值

Question

我现在正在学习Javascript，并尝试更改特定标签的文字标题。它实际上是一个更大的Shiny仪表板项目的一部分，但我想在几个选项卡中添加一些自定义功能。以下是相关标签：

足够简单。我首先在我的Javascript文件中访问我的标签：

var tabScrub2 = $(document).find('[data-value="scrubTab2"]');
console.log(tabScrub2);

当我使用Firefox的开发者控制台时，我看到该标签是一个对象：

此外，看起来我需要更改innerText的{​​{1}}属性，不管这是什么，因为它对应于我的标签的标题（0 {{1} }}对应于innerText）内的文本。但是，我不熟悉这里返回的实际对象类型：

简单地说，我如何访问和操作属性？我实际上是在访问数组吗？当我输入

1

我得到一个HTML元素。我在CSS和jQuery中看到了scrubTab2元素，但是我不熟悉如何以编程方式操作其属性？如何通过Javascript访问和操作此var scrub2 = tabScrub2["1"]; console.log(scrub2); 属性？例如，我如何隐藏a，或将其标题更改为其他内容？

Answer 1

您正在看到的第一个对象是jQuery的真实DOM元素包装器。它不是一个真正的数组，但它包含所有与零索引属性下的查询匹配的元素（例如＆＃34; 0＆＃34;和＃34; 1＆＃34;），它允许你通过类似数组的API访问它们（例如tabScrub[1]）。

使用tabScrub2["1"]抓取节点的方法是正确的（请参阅this question in the jQuery FAQ）。它更有可能看到用数字键完成（即tabScrub[1]），因为它与您访问普通数组中元素的方式相匹配。

就操纵DOM节点的属性而言，DOM的API是众所周知的不一致和古怪（因此首先需要像jQuery这样的东西）。但是，对于您的用例，您可以直接将字符串分配给innerText属性（例如tagScrub2[1].innerText = "Tab title"）。如果您正在寻找DOM其他部分的参考资料，MDN是一个很好的资源。

附注：如果您要查找特定元素，则应使用仅匹配该元素的查询。如果您正在抓取额外的元素，然后在0以外的其他键上访问您想要的元素，那么这通常是一个不好的迹象。如果您正在执行此操作，那么您的代码将依赖于节点之前存在的DOM中的其他（可能不相关的）节点，以及当您更改这些节点时原始代码将会中断。

Answer 2

只需使用jQuery eq方法即可从object index获取相关的array。

例如

//Query and get first element.
var tabScrub2 = $(document).find('[data-value="scrubTab2"]:eq(0)');

//Hide
tabScrub2.hide();

//Change title
tabScrub2.attr("title", "New Title Text");

在这里更多地了解jQuery eq https://api.jquery.com/eq/

由于您使用jquery选择器tabScrub2[0]，因此返回原始DOM元素而不是另一个jQuery对象。因此，hide函数将无法在该对象中起作用，因为本机DOM元素不会为元素实现此类功能。这就是为什么你必须使用上面的jQuery伪选择器。因为hide只适用于jQuery对象。