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

Question

如何测试元素是否在JavaScript中自我封闭？ 所以，这是一个自封闭元素的例子：

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

这是一个不是

的元素的例子

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

如何在JavaScript中区分它们？

Answer 1

答案＆amp;演示

您可以通过以下函数检测元素是否是自我封闭的，这里是带有演示的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 ) - ＆gt;假， div 是div元素。

     

isSelfEnclosed( input ) - ＆gt;是的，假设输入是输入元素。

说明

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

注意

我提出了这个自我回答的问题，因为only other answer I found并不完全是防弹的。无论如何，这是一个简单的功能，目的很简单，希望它对某人有帮助！

更新

• 使用cloneNode( true )而非cloneNode()更新了错误的代码（ 17:01，05/01/15 ）
• 更新功能以更有效地处理问题（ 17:09 p.m 05/01/15 ）

Answer 2

我宁愿根据已知的void元素列表检查tagName，而不是依赖于innerHTML返回其中><的内容

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

FIDDLE