Getting tabs by file name


I am trying to change the background colour of a tab depending on whether or not it has interacted with my package. I have the name of the file that is on the tab, i just don’t know how to select a tab programmatically by its associated file name. Once I found the tab that I want to change, I was just going to add a class to its class list to modify the background. Any ideas how to select the tab?

Thanks in advance!


This code gets me the tab’s element from a file named

document.querySelector('.tab-bar .tab [data-name=""]').parentNode

The element also has a [data-path] attribute with the absolute path to the file, so you could also use

document.querySelector('.tab-bar .tab [data-path*="path/to/"]').parentNode

if the file is in <project root>/path/to/


I tried this, and i cant seem to get it to work as you described. I get

TypeError: Cannot read property 'parentNode' of null

Above is the html that is rendered. I use the following code to try to access the package.json tab

document.querySelector('.tab-bar .tab [data-name="package.json"]').parentNode

but I get the error described above.


I just tried it and it worked just fine for me in the Console running Atom v0.176.0 on Mac OS X 10.10.2. Could you give the following information?

  • Which version of Atom are you using?
  • What OS and version are you running?


What happens if you use window.document.querySelector(...)?


I tried this and it works flawlessly on Mac OS X. I tried it on Windows and it does not work. The value returned by the query selector is null always. I double checked that in both cases there is a data-path with exactly the same name as I’m querying.

Version 0.190.0

What can I try to do to trouble shoot this?


Can you query for just .tab-bar .tab and get a non-null result set?