-1

I'm trying to extract selector from the event.currentTarget (e,g input#lst-ib.gsfi). I can find other attributes like event.currentTarget.baseURI. May I know how can I get input#lst-ib.gsfi ? Following console output has all the details about the object. I can get originalEvent.path as array of object. But not sure how to get the title/name (what ever it is called) Thanks a lot in advance for all of your help. 

currentTarget:input#lst-ib.gsfi
    accept:""
    accessKey:""
    align:""
    alt:""
    assignedSlot:null
    attributes:NamedNodeMap {0: class, 1: id, 2: maxlength, 3: name, 4: autocomplete, 5: title, 6: type, 7: value, 8: aria-label, 9: aria-haspopup, 10: role, 11: aria-autocomplete, 12: dir, 13: spellcheck, 14: style, class: class, id: id, maxlength: maxlength, name: name, autocomplete: autocomplete, …}
    autocapitalize:"sentences"
    autocomplete:"off"
    autofocus:false
    baseURI:"https://www.google.ca/search?ei=fnSHWtmQOcPcswWo67yYBA&q=get+object+name+javascript&oq=getobject+name+&gs_l=psy-ab.3.0.0i22i30k1l10.2185.66281.0.69197.18.18.0.0.0.0.201.1902.4j12j1.17.0....0...1.1.64.psy-ab..1.17.1900...0j46j33i160k1j33i21k1j35i39k1j0i131i67k1j0i131k1j0i67k1j0i46k1j0i20i263k1j0i10k1.0.rFRsim4bz6g"
    checked:false
    childElementCount:0
    childNodes:NodeList []
    children:HTML
moyeen52
  • 425
  • 3
  • 13
  • Possible duplicate of [Get the current jQuery selector string?](https://stackoverflow.com/questions/9382028/get-the-current-jquery-selector-string) – Spencer Wieczorek Feb 17 '18 at 00:56
  • I'm trying to get current target element's selector of an event. Should not be a duplicate. Also the question here is to get the desired value from dom object. We know about getting value of attribute of an object but currentTarget:input#lst-ib.gsfi this is different than CurrentTarget.alt or other things Thanks. – moyeen52 Feb 17 '18 at 01:21
  • If you have the current DOM element, why do you need a selector? If you want to construct a selector that selects that specific element, why can't you just use the element directly? Some context about what you're actually trying to achieve might allow us to give you a useful answer. – SpoonMeiser Feb 17 '18 at 01:29
  • I'm building a chrome extension that requires capturing of events and target elements selector as string. Thanks @SpoonMeiser Do you know how can I get the selector as string? – moyeen52 Feb 17 '18 at 01:32
  • Just saying this out loud for others if you are already aware that #ids must be unique--like Highlander *"There can be only one"*. So if you have valid HTML (i.e. no duplicated #ids on the document--e.g. `index.html` ), then just look for the `#id`. If you can locate `#lst-ib`, then you've located `input#lst-ib.gsfi`. I'll say this out load for others if you already know that `currentTarget` is the element to which the event is registered to (i.e the eventListener) it doesn't normally change constantly. What it sounds like is that you want `event.target` which is the clicked element. – zer00ne Feb 17 '18 at 03:10
  • In chrome developer tool while you inspect gives the mentioned output when you print your event in console. As currentTarget is an object, there is a name beside it after clone. Can you tell me how to get that name? My application requirement is different thus can't consider building the selector from #id and #class – moyeen52 Feb 17 '18 at 14:13
  • I still don't understand what you're trying to achieve. Why does the fact that your developing a chrome extension mean that you need a selector instead of an element? Or is the purpose of the chrome extension to provide this selector? In which case, why are you developing a chrome extension to do this? Who would want it? – SpoonMeiser Feb 17 '18 at 15:37
  • @user119247 you're aware that there isn't a one to one mapping between selectors and elements? An element may be matched by multiple selectors, and a selector may match multiple elements. If an element doesn't have an `id`, it might be that the only way to match it uniquely with a selector is to match its exact position in the DOM, which isn't likely to be ever so useful. – SpoonMeiser Feb 17 '18 at 15:46
  • In chrome inspect , I could find the string beside currentTarget: is unique selector when I print the event in the console. But can't find any way to get that selector. I can get properties with dot(.). I can do event.currentTarget.constructor.name (this returns HtmlElement instead the selector string). Now that extension is for my research purpose only. Probably will aid in test automation in future. Would be nice to get that selector as string. I could get element selector with custom code. But its length is bigger also its not optimized path. @SpoonMeiser thanks for your effort. – moyeen52 Feb 17 '18 at 16:17
  • whoever down voted this question did not understand the purpose. Its not a duplicate question. I'm interested to get firebug or chrome generated path for an html element. But not with too much code. As I can find object name is the path in inspection. Just need to get that name as string. – moyeen52 Feb 27 '18 at 14:35

1 Answers1

0

I think that selector is synthetic: input is a tag, #lst-ib is an ID and .gsfi is a class. So you need to get that properties and combine them into this selector.

Something like:

var el =  event.currentTarget;  
var selector = el.tagName.toLowerCase() + '#' + el.id + '.' + el.className;

Of course you need to add different checks and process multiply classes and absens of ID or class

Andriy Kuba
  • 8,093
  • 2
  • 29
  • 46
  • Thanks for your comment. But how can I directly get input#lst-ib.gsfi ? My problem is I might capture element with multiple id's or classes. I'm thinking about getting the selector that is written just beside the currentTarget object. – moyeen52 Feb 17 '18 at 01:43
  • Why do you decide that "input#lst-ib.gsfi" is present "directly"? it's just an identifyer of the element composed from it's tag name, ID and class names. ID is always one - in the case of multiply ID - the only first is taken, in the case of multiply classes you just join them with a point, like ".firstclass.secondclass.onemoreclass" – Andriy Kuba Feb 17 '18 at 02:05
  • I am pretty sure your example is from the chrome developments tool, then take this element "currentTarget:input#lst-ib.gsfi", open the development tools and try to add more IDs, change classes and so on, and look how the selector is changing. – Andriy Kuba Feb 17 '18 at 02:10
  • Yah its from chrome developer tool. But this is just an example. I'll capture selector dynamically from any website. For example a person types in a text box then I'll capture the selector of the input element along with the value. I need selector and value. I'll store them in a database for research purpose. – moyeen52 Feb 17 '18 at 02:47