如何在运行时确定标签在 DOM 元素内是否有效？答案

【问题标题】：How to determine at runtime whether a tag is valid inside a DOM element?如何在运行时确定标签在 DOM 元素内是否有效？
【发布时间】：2014-05-01 17:57:29
【问题描述】：

我正在开发一个 JS 插件 (Just Show Me The Colors)，它遍历 DOM 树（不在我的控制范围内）并将某些 TextNodes 替换为 span。

在某些情况下这会导致无效标记，例如在svg:text 节点内。但是，此代码不会在 Chrome/FF 中引发任何错误：

var text = document.createElementNS("http://www.w3.org/2000/svg", "svg:text");
text.appendChild(document.craeteElement("span"));

即使它是无效的标记。

同样，将div 放入p 是允许的，但有效 (TM)。

但是，也允许将span 放入script 标记内，但不起作用。

有没有一种方法可以在运行时确定我生成的标记是否有效或工作？

【问题讨论】：

为什么不简单地使用有效父母列表 (those that can contain phrasing elements) ？

标签： javascript html dom svg

【解决方案1】：

根据您希望遵守的定义，您只能通过使用给定元素内允许的元素名称列表（嗯，数组）来做到这一点。浏览器不了解此类问题。 HTML 有几种不同的定义，它们有不同的元素内容模型。

事情是否“有效”是一个不同的问题。您应该指定一个更具体的问题，包括对您期望或希望发生的事情的描述； “作品”不是描述。

特别注意span 在script 内无效，并且由普通HTML（或XHTML）解析创建的script 元素不包含任何span 元素（或任何其他元素）。如果您创建一个包含span 的script，其后果取决于浏览器对script 元素的处理方式，即它们如何找到将解析并解释为脚本代码的内容。

【讨论】：

感谢您的回答。我认为浏览器确实必须在某种程度上理解哪些元素是允许的，因为它们有责任渲染它们。我希望浏览器会发出某种警报，告诉我我插入的 DOM 会导致不可预知的行为，但有一个详尽的列表似乎是可行的方法。

【解决方案2】：

最简单的解决方案可能是保留一个可以有效包含跨度的元素列表。

这是一个列表：http://w3-video.com/Web_Technologies/HTML5/span/html5_span_tag_nested.php

【讨论】：