button元素可拥有childNodes吗？内部<b>标签是否为其childNode？

首先直接给结论：<button>元素完全可以拥有子节点（childNodes），你例子里的<b>标签确实是<button>的childNode，代码输出错误是因为你的JavaScript逻辑存在几个问题，而非<b>本身不是子节点。

为什么<b>是<button>的childNode？ #

在HTML规范中，<button>属于可包含流内容的元素，它内部可以嵌套文本、行内元素甚至部分块级元素（行内元素的兼容性完全没问题）。你的HTML结构：

<button id='mooo'><b>Cows can't mooo</b></button>

这里的<b>是<button>的直接子元素，如果你执行document.getElementById('mooo').childNodes，会看到它包含这个<b>元素节点（可能还会包含空白文本节点，取决于HTML代码里的空格）；如果用children属性，则会直接拿到这个<b>元素——因为children只返回元素类型的子节点。

你的JavaScript代码哪里出了问题？ #

我们逐行拆解错误点：

1. 事件名大小写错误：addEventListener的事件名必须是小写的"click"，而非"Click"——虽然部分浏览器可能兼容大写，但这属于不规范写法，可能导致事件无法正确触发。
2. e.target指向偏差：当你点击<b>里的文本时，e.target指向的是<b>元素本身，而非绑定事件的<button>。此时你判断e.target.childNode（还拼错了，正确属性是复数形式childNodes），相当于在检查<b>的子节点是否为"B"，完全偏离了你的需求。
3. 判断逻辑错误：childNodes是一个节点集合，不是单个节点，而且不能直接和字符串"B"做比较。要判断节点类型，应该用nodeName属性，或者直接检查父节点关系。

修正后的代码示例 #

下面是能正确判断<b>是<button>子节点的代码：

const btn = document.getElementById('mooo');
btn.addEventListener("click", function(e) {
  // 方式1：检查button的子元素中是否存在<b>
  if (btn.querySelector('b')) {
    console.log("B is a child of Button");
  } else {
    console.log("B is not a child of Button");
  }

  // 方式2：判断点击的<b>的父节点是否为button
  if (e.target.parentNode === btn) {
    console.log("B is a child of Button");
  }
});

运行这段代码后，点击文本就会输出正确的结果。

内容的提问来源于stack exchange，提问作者James Baloyi