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

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?

Answer

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>