CODEWITHSUNDEEP
javascripthtmlgetelementbyid
Anthony
Anthony

Reputation: 1876

javascript find node without id

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:

DIVs in my page (no id on the Export 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.

Upvotes: 2

Views: 1742

Answers (2)

Anthony
Anthony

Reputation: 1876

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);
    }
}

Upvotes: 0

Chris Van Opstal
Chris Van Opstal

Reputation: 37537

Tipped actually accepts any CSS selector as an argument. If the class is unique, you could target it that way:

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

Or if the class isn't unique, you could try target it via the tree structure. Made up example:

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

I noticed in your html that the buttons have empty title attributes (or maybe your inspector just added them). If you can set the title attribute for the buttons Tipped will pick it up automatically. Example:

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

You would then only have to use:

Tipped.create('.dhx_toolbar_btn');

And Tipped will automatically pick up the title and use it.

Upvotes: 2

Related Questions