如何测试元素在JavaScript中是否自封闭？

Question

如何测试元素在JavaScript中是否自封闭？ 因此，这是一个自我封闭元素的示例：

<input type="text" value="I'm self-enclosed.">

这是一个没有的元素的示例：

<div>I'm not self-enclosed.</div>

如何在JavaScript中区分它们？

Answer 1

答案与演示

您可以通过以下函数检测元素是否被自动封闭，这里是带有示例的JSFiddle 。

的HTML

<div>False</div><br>
<input type="text" value="True"/><br>

两个简单的HTMLElement's ，第一个不是自封闭的，第二个是自封闭的。

的JavaScript

function isSelfEnclosed(element) {
    var elem = document.createElement( element.tagName );
    return elem.outerHTML.indexOf( "><" ) == -1;
}

isSelfEnclosed( div ) -> False，假设div是div元素。

isSelfEnclosed( input ) -> True，假设输入是输入元素。

说明

我们在element的标记名之后创建一个新元素，然后检查它的.outerHTML是否有“> <”。

注意

我提出了这个自我回答的问题，因为我发现的唯一其他答案并非完全防弹。 无论如何，这是一个具有简单用途的简单功能，希望对您有所帮助！

更新

• 使用cloneNode( true )而不是cloneNode()更新了不正确的代码（ 17:01 p.m 05/01/15 ）
• 更新了功能以更有效地解决问题（ 17:09 p.m 05/01/15 ）

Answer 2

我宁愿对照已知的空元素列表检查tagName，而不是依靠innerHTML返回带有><的内容

function isSelfEnclosed(element) {
    return ['area', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param'].indexOf(element.tagName.toLowerCase()) != -1;
}

小提琴