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

Question

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

足够简单。我首先访问 Javascript 文件中的选项卡:

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

当我使用 Firefox 的开发者控制台时，我看到选项卡是一个对象:

此外，看起来我需要更改 0 的 innerText 属性，无论它是什么，因为它对应于我的选项卡的标题( 1 的 insideText 对应于 scrubTab2 内的文本)。但是，我不熟悉此处返回的实际对象类型:

简单地说，我到底如何访问和操作它的属性？我实际上正在访问一个数组吗？当我输入时

var scrub2 = tabScrub2["1"];
console.log(scrub2);

我得到一个 HTML 元素。我在 CSS 和 jQuery 中看到了 a 元素，但不太熟悉如何以编程方式操作其属性？我如何通过 Javascript 访问和操作它的 innerText 属性？例如，我如何隐藏 scrubTab2，或将其标题更改为其他内容？

Answer 1

您看到的第一个对象是 jQuery 对真实 DOM 元素的包装。它不是一个实际的数组，但它确实包含在零索引属性(例如“0”和“1”)下与您的查询匹配的所有元素，这允许您通过类似数组的 API 访问它们(例如 tabScrub[1])。

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

就操作 DOM 节点的属性而言，DOM 的 API 是出了名的不一致且古怪(因此首先需要 jQuery 之类的东西)。但是，对于您的用例，您可以直接将字符串分配给innerText属性(例如tagScrub2[1].innerText =“Tab title”)。 MDN如果您正在寻找有关 DOM 其他部分的引用资料，这是一个很好的资源。

旁注:如果您正在查找特定元素，您应该使用仅与该元素匹配的查询。如果您获取额外的元素，然后通过 0 以外的键访问所需的元素，这通常是一个不好的迹象。如果您这样做，那么您的代码取决于您的节点之前存在的 DOM 中的其他(可能不相关的)节点，并且如果/当您更改这些节点时，您的原始代码将会中断。