Sprawdzenie czy dany element HTML ma element potomny

Question

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!

Answer 1

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ć querySelector[ All ].

---

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

Answer 2

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
}

 

Answer 3

Dobrze sprawdza się też childElementCount  

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>

 

 

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 ]