el.hasChildNodes-这可以完成这项工作，但它也会计算非元素节点。
el.children-仅包括元素节点。

let parent1 = document.getElementById("parent1");
let parent2 = document.getElementById("parent2");
let parent3 = document.getElementById("parent3")

console.log('Parent1 has child - ', parent1.hasChildNodes());
console.log('Parent1 has child - ', Boolean(parent1.children.length));

console.log('Parent2 has child - ', parent2.hasChildNodes());
console.log('Parent2 has child - ', Boolean(parent2.children.length));

console.log('Parent3 has child - ', parent3.hasChildNodes());
console.log('Parent3 has child - ', Boolean(parent3.children.length));

<!-- parent 1 -->
<div id="parent1"></div>

<!-- parent 2 -->
<div id="parent2">
  <div id="child1"></div>
</div>

<!-- parent 3 -->
<div id="parent3">
  <!-- comment -->
</div>

该元素确实以子节点（两个文本节点和一个注解节点）开始，只是没有 element 子节点。
如果想知道它是否有任何 element 子元素，可以使用firstElementChild，如果该元素没有任何子元素，则为null，如果有，则为第一个子元素。

const x = document.querySelector(".parent");

console.log(`Before: ${!!x.firstElementChild}`);

// Emulate replacing the comment node with an element node
const div = document.createElement("div");
div.className = "child";
x.replaceChild(div, x.childNodes[1]);

console.log(`After:  ${!!x.firstElementChild}`);

<div class="parent">
   <!--v-if-->
</div>

可以使用“hasChildNodes（）”方法检查子节点：

const parent = document.querySelector(".parent")

btnActions() => {
  this.addAChild()
  this.checkHasChild()
}

addAChild() => {
  parent.innerHTML = `<div class="child"></div>`
}

checkHasChild() => {
  console.log(parent.hasChildNodes())
}

https://developer.mozilla.org/en-US/docs/Web/API/Node/hasChildNodes