Question

Due to a limitation of the Javascript library I’m using, I can’t assign an id to a <div>. Unfortunately, I don’t know how to attach a Tooltip object from Tipped, a Javascript tooltip library, to the element without an id. I don’t know if this is possible, but I’m trying to find the object via other means which will hopefully allow me to modify the id.

The element I’m looking for is a button on a toolbar, but it’s not an HTML button. It’s a <div> that has CSS styles and Javascript events assigned to make it look and feel like a button. I know the class name of the parent and I know the id of the grandparent <div>, but that’s as much as I know. Part of the issue is that there doesn’t seem to be a good reference for how to iteratively operate on HTML objects once you get a reference to them. I’ve seen plenty of examples like this:

var x = document.getElementsById("asdf")

but no follow-up code showing how to actually do anything. What’s in x? What methods does it have? I know of innerHTML and innerTEXT, but I can’t figure out if they apply to x, a child of x, or ???. The Chrome console has helped a little bit, but I’m basically lost.

This is the relevant code for my button:

As you can see, there is no id on the Export button, but the parent has a class name and the grandparent has an id. The other snag is that the grandparent’s id isn’t static. It always starts with “dhxtoolbar” and there is only one toolbar on the page, but I haven’t been able to make a regex search find the toolbar.

Ultimately, I’d like to be able to attach a Tipped tooltip to the Export button. I think Tipped requires an id, but maybe it doesn’t. Regardless, I’d like to understand more about how to iterate through the DOM and, as a bonus, figure out how or if I can change the id of an element on a live page. Thanks.

Answer 1

This is what I was trying to have explained:

var Obj         = document.getElementsByClassName("classname");
var ObjChildren = Obj[0].getElementsByTagName("tag")
var searchText = "string";

for (var i = 0; i < ObjChildren.length; i < i++) {
    if (ObjChildren[i].innerHTML == searchText) {
        console.log(ObjChildren[i].innerHTML);
    }
}