CODEWITHSUNDEEP
javascript
Martin54
Martin54

Reputation: 1874

How to target direct child from element

How can I get direct child from element section?

I've tried target it by query selector, but it didn't work. For this case I don't want to use class or id.

Am I using it correctly?

I want to target it from section.

Thanks for help.

var section = document.getElementsByTagName("section")[0];
var div = section.querySelector(section + "> div"); //this not work

<section>
  <form>
    <div></div>
    <div></div>
  </form>
  <div> //I want target this div
    <div></div>
    <div></div>
  </div>
</section>

Upvotes: 1

Views: 829

Answers (4)

vanilla
vanilla

Reputation: 85

Absolutely too late, but any way… there is a pseudo-class, :scope, for this purpose. It targets the root element of querySelector, so the solution would be:

var div = section.querySelector(":scope>div");

Upvotes: 0

quirimmo
quirimmo

Reputation: 9988

Use query selector specifying the selector like section > div directly:

var div = document.querySelector("section > div"); 
console.log(div);
<section>
  <form>
    <div></div>
    <div></div>
  </form>
  <div id="my-target-element"> //I want target this div
    <div></div>
    <div></div>
  </div>
</section>

If you really want to do that on the section element, get the element and then use the query selector like below, looking directly for the child div element:

const section = document.querySelector('section');
console.log(section.querySelector('section > div'));
// or even
console.log(section.querySelectorAll('div')[2]);
<section>
  <form>
    <div></div>
    <div></div>
  </form>
  <div id="my-target-element"> //I want target this div
    <div></div>
    <div></div>
  </div>
</section>

Upvotes: 4

Aria
Aria

Reputation: 3844

You are concatenating section.querySelector(section + "> div") a string with and object which is not work in querySelector BTW if you use section.querySelector("div") it will return the first div of the elements so what you want is section.querySelectorAll("div")[2] which point to third div see the example in two parts, the second one is yours.

var section = document.getElementsByTagName("section")[0];
var div = section.querySelector("div"); //this not work 
console.log(div);

//What you want
var section = document.getElementsByTagName("section")[0];
var div = section.querySelectorAll("div"); //this not work
var target = div[2];
console.log(target);
<section>
  <form>
    <div>1</div>
    <div>2</div>
  </form>
  <div> I want target this div
    <div>3</div>
    <div>4</div>
  </div>
</section>

in the other side you can set an id for that div and directly find it by getElementById but from you mentioned you don't want find it by class or id.

UPDATE:
At least there should be an info about your target div to be able find it either added dynamically or statically, if you can not define class or id it is good to define and attribute like <dive attName='value'></div> or you can find it by content.
Therefore there should be a specific position for your target div it is not possible to find a div when you don't have any information about it. if that div have specific content you can iterate all div in a for and check it, but the best way is defining class or id for that div or at least defining an attribute for it.

Upvotes: 1

Abdur Rahaman
Abdur Rahaman

Reputation: 307

var div = section.querySelector("section > div");

Upvotes: 0

Related Questions