Get an element by using it's attribute value

Question

I need to retrieve an element in an html document. I can't update the html so I can't add a class or an id. And the class used here can pobliby be used in another place in the code. Here is the element :

<a href="javascript:void(0);" title="M'affecter cette demande" data-aura-rendered-by="1314:0" class="forceActionLink" data-aura-class="forceActionLink">
      <div class="slds-truncate" title="M'affecter cette demande" data-aura-rendered-by="1315:0">M'affecter cette demande</div>
</a>

So I want to retrieve the <a> element, by using the title attribute. In javascript I try that :

var bouton = document.querySelector("[title = \'M'affecter cette demande\']");

But I got an error :

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '[title = 'M'affecter cette demande']' is not a valid selector.

How can I retrieve this element ?

https://stackoverflow.com/questions/3425637/xpath-attribute-quoting-in-javascript — max630, Apr 16 '18 at 15:07

score 2 · Accepted Answer · answered Apr 16 '18 at 14:01

Use this selector instead: [title="M\'affecter cette demande"]

var elem = document.querySelector('[title="M\'affecter cette demande"]');

console.log(elem);

<a href="javascript:void(0);" title="M'affecter cette demande" data-aura-rendered-by="1314:0" class="forceActionLink" data-aura-class="forceActionLink">
      <div class="slds-truncate" title="M'affecter cette demande" data-aura-rendered-by="1315:0">M'affecter cette demande</div>
</a>

score 2 · Answer 2 · answered Apr 16 '18 at 14:02

You can simply use this selector:

var a = document.querySelector('a[title="M\'affecter cette demande"]');
console.log(a);

<a href="javascript:void(0);" title="M'affecter cette demande" data-aura-rendered-by="1314:0" class="forceActionLink" data-aura-class="forceActionLink">
  <div class="slds-truncate" title="M'affecter cette demande" data-aura-rendered-by="1315:0">M'affecter cette demande</div>
</a>

score 1 · Answer 3 · answered Apr 16 '18 at 14:04

Using double quotes ":

you'll have to escape the inner double quotes:

"[title = \"M'affecter cette demande\"]"

Using single quotes ':

you'll have to escape the inner single quote:

'[title = "M\'affecter cette demande"]'

Using template literal `:

you don't have to escape anything:

`[title = "M'affecter cette demande"]`

Get an element by using it's attribute value

3 Answers3