• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Sprawdzenie czy dany element HTML ma element potomny

Object Storage Arubacloud
+1 głos
133 wizyt
pytanie zadane 22 czerwca 2021 w JavaScript przez ITshnyk Obywatel (1,800 p.)

Witam!

Jak można sprawdzić czy w danym elemencie HTML znajduję się jakikolwiek inny element?

Dla przykładu:

mam pętlę while, która ma się wykonywać póki dany element HTML jest pusty:

while(element.potomek == null){
      consolo.log("Działa!");
}

Próbowałem to sprawdzać za pomocą:

element.children[0] == null
element.firstElementChild == null
element.childNodes.length == 0

Lecz nic nie działało, pętla po prostu się nie wykonywała.

Chciałbym się dowiedzieć jak można to jeszcze sprawdzić

Poniżej wstawiam cały kod JS:

var przycisk = przycisk.parentElement.id;
 
while(przycisk.children[0] == null){
     console.log("Działa!");
}

Z góry dziękuję za pomoc!

3 odpowiedzi

0 głosów
odpowiedź 22 czerwca 2021 przez ScriptyChris Mędrzec (190,190 p.)

var przycisk = przycisk.parentElement.id;

Ale zmienna przycisk to nie jest element, tylko string reprezentujący identyfikator elementu. Konsola przeglądarki powinna rzucić błędem, że przycisk nie ma property children, a tym bardziej to nie jest kolekcja z property '0'.

Poza tym, jeśli element nie ma potomka, to musisz w pętli albo go dodać, albo wyjść z pętli słówkiem break, bo inaczej pętla będzie nieskończona.

Jak można sprawdzić czy w danym elemencie HTML znajduję się jakikolwiek inny element?

Jeśli chcesz sprawdzić, czy element zawiera konkretnych potomków to wygodniej będzie użyć querySelectorAll ].


Co w ogóle chcesz zrobić docelowo tym skryptem?

0 głosów
odpowiedź 22 czerwca 2021 przez Wiciorny Ekspert (273,810 p.)

Jest do tego nawet metoda 
 

const body = document.body;
const btn = document.querySelector('button');

console.log(body.hasChildNodes()); // true
console.log(btn.hasChildNodes()); // true

https://developer.mozilla.org/pl/docs/Web/API/Node/hasChildNodes
hasChildNodes zwraca wartość logiczną określającą, czy element posiada dzieci czy nie.

Albo sprawdzić czy lista dzieci ma długość większą niz 0, przyczym  ELEMENT musi być elementem dokumentu html więc go musisz odpowiednio pobrać 

if (element.childNodes.length > 0) {
.. jakieś operacje
}


 

0 głosów
odpowiedź 23 czerwca 2021 przez VBService Ekspert (254,880 p.)

Dobrze sprawdza się też childElementCount  wink

on-line

<button></button>
 
<script>
  console.clear();
  const button = document.querySelector('button');
  IsChildNode('Przed dodaniem tekstu do button-a');
   
  setTimeout(() => {
    button.textContent = 'Lorem';
    IsChildNode('Po dodaniu tekstu do button-a');
  }, 1000);
   
  setTimeout(() => {
    button.innerHTML += ' <span style="color:red">ipsum</span>';
    IsChildNode('Po dodaniu elementu <span> do button-a');
  }, 2000);
 
  function IsChildNode(message = null) {
    console.info(message);
     
    if (button.children[0] == undefined ) {
      console.log("undefined działa!", button.children[0]);
    }
 
    if (! button.hasChildNodes()) {
      console.log("hasChildNodes działa!", button.hasChildNodes());
    }
 
    if (button.childNodes.length == 0) {
      console.log("childNodes.length działa!", button.childNodes.length);
    }
 
    if (button.firstChild == null) {
      console.log("firstChild działa!", button.firstChild);
    }
 
    if (button.children.length == 0) {
      console.log("children.length działa!", button.children.length);
    }   
     
    if (button.childElementCount == 0) {
      console.log("childElementCount działa!", button.childElementCount);
    }   
  }
</script>

 

image

 

Zamiast pętli while proponuje użyć setInterval

<button></button>
 
<script>
  console.clear();
  const button = document.querySelector('button');
  IsChildNode('Przed dodaniem tekstu do button-a');
   
  setTimeout(() => {
    button.textContent = 'Lorem';
    IsChildNode('Po dodaniu tekstu do button-a');
  }, 1000);
   
  setTimeout(() => {
    button.innerHTML = 'Lorem <span style="color:red">ipsum</span>';
    IsChildNode('Po dodaniu elementu <span> do button-a');
  }, 2000);
   
  const is_child_node = setInterval(() => {
    IsChildNode('Sprawdzam ...');
  }, 100);
 
  function IsChildNode(message = null) {    
    if (button.childElementCount == 0) {
      console.clear();
      console.info(message);
      console.log("childElementCount działa!", button.childElementCount);      
    } else {
      console.info(message, 'Stop');
      clearInterval(is_child_node);
    }   
  }
</script>

 

javascript - while vs. setInterval ]

Podobne pytania

0 głosów
1 odpowiedź 136 wizyt
pytanie zadane 10 grudnia 2019 w JavaScript przez michal_php Stary wyjadacz (13,700 p.)
0 głosów
0 odpowiedzi 412 wizyt
0 głosów
1 odpowiedź 138 wizyt

92,760 zapytań

141,684 odpowiedzi

320,468 komentarzy

62,104 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...