如何用JavaScript检查元素是否为流元素及父元素是否允许流元素子元素

你提到的DOM自动修正结构的问题，本质上是HTML内容模型的约束——不同元素能包含的子元素类型是由规范定义的，比如<p>属于短语内容（Phrasing Content），只能容纳短语元素和文本，而<div>、<figure>这类非短语的流元素（Flow Content）是不被允许的，所以DOM会自动调整结构。

下面分两种场景给出JavaScript的实现方案：

一、检查一个节点是否为「非短语的流元素」（即不能放在<p>里的流元素） #

首先明确概念：流元素（Flow Content）是HTML里最大的内容分类，短语元素是它的子集。我们要找的是那些属于流元素但不属于短语元素的节点，也就是会被<p>拒绝的元素。

先定义两类元素的标签集合，然后写判断函数：

// 短语元素（Phrasing Content）的标签列表（参考HTML5规范）
const phrasingTags = new Set([
  'abbr', 'audio', 'b', 'bdi', 'bdo', 'br', 'button', 'canvas', 'cite', 'code', 'data', 'datalist', 'del',
  'dfn', 'em', 'embed', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'map', 'mark', 'math', 'meter',
  'noscript', 'object', 'output', 'picture', 'progress', 'q', 'ruby', 's', 'samp', 'script', 'select', 'small',
  'span', 'strong', 'sub', 'sup', 'svg', 'textarea', 'time', 'u', 'var', 'video', 'wbr'
]);

// 流元素（Flow Content）的标签列表（包含所有短语元素）
const flowTags = new Set([
  ...phrasingTags,
  'address', 'article', 'aside', 'blockquote', 'details', 'dialog', 'div', 'dl', 'fieldset',
  'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hr', 'main', 'nav',
  'ol', 'p', 'section', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'ul', 'menu', 'summary'
]);

/**
 * 判断节点是否为流元素
 * @param {Node} node - 要检查的DOM节点
 * @returns {boolean}
 */
function isFlowElement(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    // 文本节点属于流元素
    return true;
  }
  if (node.nodeType !== Node.ELEMENT_NODE) {
    // 非元素节点（注释、属性等）不算流元素
    return false;
  }
  return flowTags.has(node.tagName.toLowerCase());
}

/**
 * 判断节点是否为「非短语的流元素」（即不能被<p>包含的流元素）
 * @param {Node} node - 要检查的DOM节点
 * @returns {boolean}
 */
function isNonPhrasingFlowElement(node) {
  return isFlowElement(node) && !phrasingTags.has(node.tagName.toLowerCase());
}

测试示例：

const div = document.createElement('div');
const p = document.createElement('p');
const span = document.createElement('span');

console.log(isNonPhrasingFlowElement(div)); // true（<div>是流元素但不是短语元素）
console.log(isNonPhrasingFlowElement(p)); // false（<p>是短语元素）
console.log(isNonPhrasingFlowElement(span)); // false（<span>是短语元素）

二、检查某个元素是否允许流元素作为子元素 #

这里的核心是判断元素的内容模型是否支持流元素。大部分容器类元素（比如<div>、<article>）允许任意流元素，而<p>、<h1>这类元素只能容纳短语元素。

我们可以通过排除那些明确只能容纳短语元素的元素来实现：

// 只能容纳短语元素的标签列表
const onlyPhrasingParentTags = new Set([
  'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code', 'kbd', 'samp', 'var', 'cite', 'dfn', 'abbr',
  'time', 'ruby', 'rt', 'rp', 'b', 'strong', 'i', 'em', 'mark', 'small', 'del', 'ins', 'sub', 'sup',
  'button', 'input', 'textarea', 'select', 'datalist', 'option', 'optgroup', 'label', 'output', 'progress',
  'meter', 'br', 'img', 'area', 'param', 'canvas', 'svg', 'math', 'script', 'template', 'slot', 'wbr'
]);

/**
 * 判断元素是否允许流元素作为子元素
 * @param {Element} element - 要检查的DOM元素
 * @returns {boolean}
 */
function allowsFlowChildren(element) {
  if (element.nodeType !== Node.ELEMENT_NODE) {
    return false;
  }
  const tagName = element.tagName.toLowerCase();
  // 除了明确只能容纳短语元素的，其他都允许流元素（包括透明内容模型的元素如<a>）
  return !onlyPhrasingParentTags.has(tagName);
}

测试示例：

const p = document.createElement('p');
const div = document.createElement('div');
const a = document.createElement('a');

console.log(allowsFlowChildren(p)); // false（<p>不能包含流元素）
console.log(allowsFlowChildren(div)); // true（<div>可以包含任意流元素）
console.log(allowsFlowChildren(a)); // true（<a>是透明内容模型，在合适上下文下可以包含流元素）

注意事项 #

• 上面的标签列表基于HTML5规范，随着HTML标准更新可能需要调整；
• 部分元素的内容模型是有条件的（比如<option>只能包含文本），如果需要更精确的判断，可以参考最新的HTML规范补充细节；
• 文本节点属于流元素，所以判断时要考虑节点类型。

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