11

I am currently trying to figure out a way to get the ID of an element, depending on whether its class contains something. I'm not sure if there's a better way to do it than I currently am, but having looked around nothing fits exactly the need I have. The code I currently have is, where I am looking for a div element whose class contains the string "one" but is not limited to that. Currently there is only one element containing this string but the alert provides me with [Object NodeList] (I may well be overcomplicating this):

$idToMove = document.querySelectorAll('div[class^="one"]');
        alert($idToMove);
Wesley
  • 121
  • 1
  • 1
  • 5
  • Possible duplicate of [Find all elements on a page whose element ID contains a certain text using jQuery](http://stackoverflow.com/questions/1206739/find-all-elements-on-a-page-whose-element-id-contains-a-certain-text-using-jquer) – TylerH May 12 '16 at 18:43

4 Answers4

19

document.querySelectorAll() Returns a node list (kind of like an array), if you are sure there will only ever be one you have a couple options.

1) Use .querySelector instead:

// returns the first node that matches
var elm = document.querySelector('div[class~="one"]');
console.log(elm.id);

2) Access the first element in the returned list:

// returns all nodes that match
var elms = document.querySelectorAll('div[class~="one"]');
console.log(elms[0].id);

Make sure to null check returns of .querySelector and length check returns of .querySelectorAll.

Notice also, that I use ~= and not ^=. You can read on the MDN about the difference between all the equality operators. But for these two:

[attr~=value] Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".

[attr^=value] Represents an element with an attribute name of attr and whose first value is prefixed by "value".

Chad
  • 19,219
  • 4
  • 50
  • 73
  • Thanks for the answer! I seem to be returning null (I've used part resolution 1 to solve this). Could it be that I am setting the class to include "one" with php? It **is** successfully making the class contain the string "one" but when I attempt to console.log it errors that it can't give me the id of null. – Wesley May 12 '16 at 15:32
  • Updated answer, you need `~=` and not `^=`. – Chad May 12 '16 at 15:35
1

First get element from DOM and than from that element get id attribute:

1- If you need only first element then use querySelector like this:

let elms = document.querySelector('div[class~="one"]')[0].id
console.log(elms)

2- If you need all element those have this class then use querySelectorAll like this:

let elms = document.querySelectorAll('div[class~="one"]')

for(let i=0; i<elms.length; i++)
{
console.log(elms[i].id)
}
Nazakat Ali
  • 70
  • 2
1

I think with "*" it works in more cases

document.querySelector('div[class*="words"]')
Vincent Loron
  • 11
  • 2
1

i tried it works absolutely amazing

window.frames[0].document.querySelector('td[id*="sss"]')
fundaoz
  • 11
  • 1
  • 1
    Welcome to Stack Overflow! While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Yunnosch Feb 02 '23 at 06:58