Get into features of "a" anchors included in a div get by classname

Question

I desperately try to find how to change many 'a' anchor features styles within a div, found by their self classname. I think i got you the whole needed code related as below. I thank you a lot for your time and your help.

HTML:

<div class="dropdown">
    <a class="boutonmenuprincipal">          <img src="{{ url_for('static', filename='logo_sel_lang.png') }}"></a>
    <div class="dropdown_child">
        <a href="" onclick="changeLanguage('fr')">Français  <img src="{{ url_for('static', filename='logo_fr.png') }}" class="flags"></a>
        <a href="" onclick="changeLanguage('de')">Deutsch   <img src="{{ url_for('static', filename='logo_de.png') }}" class="flags"></a>
        <a href="" onclick="changeLanguage('es')">Español   <img src="{{ url_for('static', filename='logo_es.png') }}" class="flags"></a>
        <a href="" onclick="changeLanguage('en')">English   <img src="{{ url_for('static', filename='logo_uk.png') }}" class="flags"></a>
        <a href="" onclick="changeLanguage('tk')">Türk      <img src="{{ url_for('static', filename='logo_tk.png') }}" class="flags"></a>
        <a href="" onclick="changeLanguage('br')">Brasil    <img src="{{ url_for('static', filename='logo_br.png') }}" class="flags"></a>
        <a href="" onclick="changeLanguage('it')">Italiano  <img src="{{ url_for('static', filename='logo_it.png') }}" class="flags"></a>
        <a href="" onclick="changeLanguage('ro')">Românesc  <img src="{{ url_for('static', filename='logo_ro.png') }}" class="flags"></a>
        <a href="" onclick="changeLanguage('nl')">Nederlands<img src="{{ url_for('static', filename='logo_nl.png') }}" class="flags"></a>
        <a href='' onclick='.dropdown:hover disabled'>&times; Close  </a>
    </div>
</div>

JS:

var myObj1 = window.document.querySelectorAll('dropdown_child');
myObj1.style.height = '0px';
myObj1.style.color = 'white';
myObj1.style.textDecoration = 'none';

Answer 1

• querySelector should include . for selecting class.
• If you want to select all 'a' tags in myObj1, you have to select dropdown_child's children, not querySelectorAll('.dropdown_child').
  It'll only select a .dropdown_chlid element.

Solution

const myObj1 = document.querySelector(".dropdown_child").children;
[...myObj1].map((el) => {
  el.style.height = "0px";
  el.style.color = "white";
  el.style.textDecoration = "none";
});

<div class="dropdown">
  <a class="boutonmenuprincipal"> <img src="{{ url_for('static', filename='logo_sel_lang.png') }}"></a>
  <div class="dropdown_child">
    <a href="" onclick="changeLanguage('fr')">Français <img src="{{ url_for('static', filename='logo_fr.png') }}" class="flags"></a>
    <a href="" onclick="changeLanguage('de')">Deutsch <img src="{{ url_for('static', filename='logo_de.png') }}" class="flags"></a>
    <a href="" onclick="changeLanguage('es')">Español <img src="{{ url_for('static', filename='logo_es.png') }}" class="flags"></a>
    <a href="" onclick="changeLanguage('en')">English <img src="{{ url_for('static', filename='logo_uk.png') }}" class="flags"></a>
    <a href="" onclick="changeLanguage('tk')">Türk <img src="{{ url_for('static', filename='logo_tk.png') }}" class="flags"></a>
    <a href="" onclick="changeLanguage('br')">Brasil <img src="{{ url_for('static', filename='logo_br.png') }}" class="flags"></a>
    <a href="" onclick="changeLanguage('it')">Italiano <img src="{{ url_for('static', filename='logo_it.png') }}" class="flags"></a>
    <a href="" onclick="changeLanguage('ro')">Românesc <img src="{{ url_for('static', filename='logo_ro.png') }}" class="flags"></a>
    <a href="" onclick="changeLanguage('nl')">Nederlands<img src="{{ url_for('static', filename='logo_nl.png') }}" class="flags"></a>
    <a href='' onclick='.dropdown:hover disabled'>&times; Close </a>
  </div>
</div>