Как я могу проверить, содержит ли div другой div?

Question

Мне нужно показать предупреждение, если у моего родительского div есть дочерний div, использующий только JavaScript. Нет jQuery.

Я пытался использовать функцию contains(), чтобы проверить мой div и отправить предупреждение, но он не работает.

<script type="text/javascript">
  var parentDiv = document.getElementById("commentBox");
  var childDiv = document.getElementById("comment1");
  if (parentDiv.contains(childDiv)) {
    alert("yes");
  } else
  {
    alert("no");
  }
</script>
<div class="row leftpad collapse" id="commentBox">
  <div id="comment1">
    <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
      <h6>James </h6>
    </div>
    <div class="col-md-9 dir-rat-right">
      <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
    </div>
  </div>
</div>

Должно быть окно с сообщением yes, но оно не видно. Я также пытался проверить JavaScript, используя метод alert() только без кода.

Answer 1

Вы можете использовать querySelector. Если ребенка нет, он даст нулевое значение

var hasChildDiv = document.getElementById("commentBox").querySelector("#comment1");
if (hasChildDiv !== null) {
  alert('yes')
}

<script type="text/javascript">
</script>
<div class="row leftpad collapse" id="commentBox">
  <div id="comment1">
    <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
      <h6>James </h6>
    </div>
    <div class="col-md-9 dir-rat-right">
      <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
    </div>
  </div>
</div>

Answer 2

Убедитесь, что весь DOM загружен, прежде чем выполнять код JavaScript. Это можно сделать, добавив прослушиватель событий DOMContentLoaded в свой код или поместив сценарии в конец файла

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function(){
        var parentDiv = document.getElementById("commentBox");
        var childDiv = document.getElementById("comment1");

        if (parentDiv && parentDiv.contains(childDiv)) {
            alert("yes");
        }
        else {
            alert("no");
        }
    }, false);
</script>


<div class="row leftpad collapse" id="commentBox" >
    <div id="comment1">
        <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
            <h6>James </h6>
        </div>
        <div class="col-md-9 dir-rat-right">    
            <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
        </div>
    </div>
</div>

Вы не получите оповещение, потому что parentDiv еще не будет существовать, и значение будет null. Это приводит к тому, что он не содержит функцию contains() и выдает ошибку. Для большей безопасности вы можете добавить нулевую проверку внутри оператора if.

Answer 3

Как насчет использования функции window.onload?

<script>
    window.onload = function() {
        var parentDiv = document.getElementById("commentBox");
        var childDiv = document.getElementById("comment1");
        if (parentDiv.contains(childDiv)) {
            alert("yes");
        } else {
            alert("no");
        }
    }
</script>

Эта функция будет выполняться до полной загрузки dom

<script>
    window.onload = function() {
        var parentDiv = document.getElementById("commentBox");
        var childDiv = document.getElementById("comment1");
        if (parentDiv.contains(childDiv)) {
            alert("yes");
        } else {
            alert("no");
        }
    }
</script>
<div class="row leftpad collapse" id="commentBox">
    <div id="comment1">
        <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
            <h6>James </h6>
        </div>
        <div class="col-md-9 dir-rat-right">
            <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
        </div>
    </div>
</div>

Answer 4

Ваш код работает до полной загрузки DOM.Переместите свой скрипт внизу страницы:

<div class="row leftpad collapse" id="commentBox" >
    <div id="comment1">
      <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
        <h6>James </h6>
      </div>
      <div class="col-md-9 dir-rat-right">
        <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
      </div>
    </div>
</div>
    
<script type="text/javascript">
  var parentDiv = document.getElementById("commentBox");
  var childDiv = document.getElementById("comment1");
  if (parentDiv.contains(childDiv)) {
    alert("yes");
  }
  else{
    alert("no");
  }

</script>

ИЛИ: Оберните код с помощью DOMContentLoaded , который обеспечит выполнение кода, размещенного внутри, только после полной загрузки DOMзагружено:

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
    var parentDiv = document.getElementById("commentBox");
    var childDiv = document.getElementById("comment1");
    if (parentDiv.contains(childDiv)) {
      alert("yes");
    }
    else{
      alert("no");
    }
  });

</script>

<div class="row leftpad collapse" id="commentBox" >
    <div id="comment1">
      <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
        <h6>James </h6>
      </div>
      <div class="col-md-9 dir-rat-right">
        <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
      </div>
    </div>
</div>