在你使用 Javascript 的过程中你可能需要使用 js 判断一个 HTML 元素是否含有子元素，在本文中我们将要介绍 js 判断是否含有子元素的两种方法：

  • Javascript 中使用 Node: hasChildNodes() 方法判断是否含有子元素
  • Javascript 中使用 Node: childNodes 属性判断是否含有子元素

注：js 判断是否含有子元素使用的都是 Node 类提供的方法或属性。

HTML 元素介绍

在 HTML 中的每一个标记元素（如：<body>, <div>, <a>等），在 DOM 中为一个 HTMLElement，HTMLElement 类继承 Node 类，在 DOM 中具体继承结构如下：

EventTarget Node Element HTMLElement

因此：在 js 中可以使用 Node 类提供的方法或属性判断 HTML 元素是否含有子元素。

JS使用hasChildNodes()判断是否含有子元素

JS 使用 Node: hasChildNodes() 方法判断时，没有子元素时返回 False，有子元素返回 True，具体示例如下：

let myel = document.getElementById("myel");

if (!myel.hasChildNodes()) {
  // 没有子元素时执行的语句
}

if (myel.hasChildNodes()) {
  // 有子元素时执行的语句
}

JS使用childNodes判断是否含有子元素

Node: childNodes 属性是一个 NodeList 类。NodeList 是一个列表（List），它与数组类型非常相似，也有 Object 类的特点。NodeList 有属性 length 用于获取该 NodeList 中子项的数量。

JS 使用 Node: childNodes 属性判断时，没有子元素时 length 的值为 0，有子元素时 length 的值为子元素的个数，具体示例如下：

let myel = document.getElementById("myel");

if (myel.childNodes.length==0) {
  // 没有子元素时执行的语句
}

if (myel.childNodes.length!=0) {
  // 有子元素时执行的语句
}

结语

在本文中我们介绍了在 js 中如何使用 Node: hasChildNodes() 方法或 Node: childNodes 属性判断一个 HTML 元素是否含有子元素。