Get an element by using it's attribute value [duplicate]

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 ?

You don't need the backslashes.

Pointy
– Pointy

2018-04-16 14:01:15 +00:00
Commented Apr 16, 2018 at 14:01 — Pointy
– Pointy, Commented Apr 16, 2018 at 14:01
stackoverflow.com/questions/3425637/…

max630
– max630

2018-04-16 15:07:04 +00:00
Commented Apr 16, 2018 at 15:07 — max630
– max630, Commented Apr 16, 2018 at 15:07

Ele · Accepted Answer · 2018-04-16 14:01:12Z

2

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>

answered Apr 16, 2018 at 14:01

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CodeF0x · Accepted Answer · 2018-04-16 14:02:19Z

2

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>

answered Apr 16, 2018 at 14:02

CodeF0x

2,6676 gold badges19 silver badges29 bronze badges

Comments

ibrahim mahrir · Accepted Answer · 2018-04-16 14:04:56Z

1

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"]`

answered Apr 16, 2018 at 14:04

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Collectives™ on Stack Overflow

Get an element by using it's attribute value [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related