How to get element without ID or Class Name using Javascript DOM

Question

I'm developing a chrome extension for manipulating HTML elements. I got a little problem. The element that I want to manipulate is without ID or ClassName, like this:

<div style="width: 400px">

I want to manipulate the width. But there is no identifier in the tag div. How can I manipulate that tag using javascript DOM?

There are many ways. `document.querySelector('div[style="width: 400px"]')` is one. If you show more of the surrounding document, there may be better ways. — Heretic Monkey, Dec 11 '20 at 17:02
Does this answer your question? [How to get element without element id?](https://stackoverflow.com/questions/24569485/how-to-get-element-without-element-id) — Heretic Monkey, Dec 11 '20 at 17:04
Possible duplicate of https://stackoverflow.com/questions/2332061/accessing-dom-elements-without-id — doo_doo_fart_man, Dec 11 '20 at 19:29
@HereticMonkey I tried your suggestion. I assign it to a variable and I try to manipulate the width using the `style` attribute it doesn't work. How to manipulate the width? `let x = document.querySelector('div[style="width: 400px"]'); x.style.width = "500px"` I got an error message > "Uncaught TypeError: Cannot read property 'style' of null" — syaifulhusein, Dec 12 '20 at 00:37
https://jsfiddle.net/n3zhr9vo/ shows it working. Your comments under the answer tell me that the HTML you've shown in your question is not representative of your actual HTML. Obviously, my example JavaScript would only work with the provided example HTML. Again, show more of your **actual** HTML, and we can help you better. Until then, we can only give you guesses and general advice. — Heretic Monkey, Dec 13 '20 at 17:02

Aib Syed · Accepted Answer · 2020-12-12T00:54:35.147

3

You can use querySelector.

Here is a simple example:

//adjust selector to target your div (more info in docs)
var div = document.querySelector('div[style="width: 100px; background-color: green"]')
//change this width to your preference
div.style.width = "700px"

<!-- This is my condition -->
<div class="wrap">
  <div style="width: 100px; background-color: green">
    <h1 class="h1">
      Hello World
    </h1>
  </div>
</div>

edited Dec 12 '20 at 00:54

answered Dec 11 '20 at 17:03

Aib Syed

3,118
2
19
30

That will get the first `div` element on the page. If there are any other `div`s before the one the OP wishes to target in the source, they will not get the desired result. – Heretic Monkey Dec 11 '20 at 17:05
Correct, I fully agree with you. This is just a simple example. OP can use a selector of his preference which is why I included a link to the docs. As it stands, OP did not specify additional divs in his question but I can update this if the question provides info on additional divs. – Aib Syed Dec 11 '20 at 17:07
What if there are multiple `div`s in a webpage? – doo_doo_fart_man Dec 11 '20 at 19:28
Then you adjust your selector to more specifically target the div you want to manipulate. As @HereticMonkey explained in his comment to OP, `document.querySelector('div[style="width: 400px"]')` would target this div more specifically if it wasn't the only div on the webpage. - I will say again, OP never mentioned multiple divs. A link to documentation was also provided in case this was true. My answer made no assumptions and gave information on the `querySelector` method which is just one of many ways this could be achieved. – Aib Syed Dec 11 '20 at 19:35
@AibCodesDaily it is works if I just have one div. But it doesn't work if I have another div before. Check this link, this is my condition (https://jsfiddle.net/ys6wbLo7/1/) – syaifulhusein Dec 12 '20 at 00:44

How to get element without ID or Class Name using Javascript DOM

1 Answers1