javascript查找没有id的节点

Question

由于我正在使用的 Javascript 库的限制，我无法将 id 分配给 <div> 。不幸的是，我不知道如何将 JavaScript 工具提示库 Tipped 中的 Tooltip 对象附加到没有 id 的元素。我不知道这是否可行，但我正在尝试通过其他方式找到该对象，这有望允许我修改 id。

我正在寻找的元素是工具栏上的一个按钮，但它不是一个 HTML 按钮。这是<div>它分配了 CSS 样式和 Javascript 事件，使其看起来像一个按钮。我知道 parent 的类名，我知道祖 parent 的id <div> ，但这就是我所知道的。部分问题在于，一旦获得对 HTML 对象的引用，似乎就没有关于如何迭代操作 HTML 对象的良好引用。我见过很多这样的例子:

var x = document.getElementsById("asdf")

但没有后续代码显示如何实际执行任何操作。 x 里有什么？它有哪些方法呢？我知道innerHTML 和innerTEXT，但我不知道它们是否适用于x、x 的子级或???。 Chrome 控制台提供了一点帮助，但我基本上迷失了。

这是我的按钮的相关代码:

如您所见，导出按钮上没有 id，但父级有一个类名，祖级有一个 id。另一个问题是祖 parent 的 ID 不是静态的。它总是以“dhxtoolbar”开头，并且页面上只有一个工具栏，但我无法通过正则表达式搜索找到该工具栏。

最终，我希望能够将提示工具提示附加到“导出”按钮。我认为 Tipped 需要一个 id，但也许不需要。无论如何，我想更多地了解如何迭代 DOM，并且作为额外的奖励，弄清楚如何或是否可以更改实时页面上元素的 id。谢谢。

Answer 1

Tipped实际上接受任何 CSS 选择器作为参数。如果该类是唯一的，您可以这样定位它:

Tipped.create('.dhx_toolbar_btn', 'some tooltip text');

或者，如果该类不是唯一的，您可以尝试通过树结构来定位它。编造示例:

Tipped.create('.header .sidebar .dhx_toolbar_btn', 'some tooltip text');

我注意到您的 html 中的按钮具有空的 title 属性(或者可能是您的检查员刚刚添加了它们)。如果您可以设置按钮的 title 属性，Tipped 将自动选取它。示例:

<div class="dhx_toolbar_btn" title="test title">

然后您只需使用:

Tipped.create('.dhx_toolbar_btn');

Tipped 会自动选取标题并使用它。