html - Hur kan jag testa om ett element är självlutat i JavaScript?

Hur kan jag testa om ett element är självavslutande i JavaScript? Här är ett exempel på ett element som är självavslutande:

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

Och här är ett exempel på ett element som inte är:

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

Hur kan jag skilja mellan dem i JavaScript?

Svar #1

Jag föredrar att kolla tagName mot en lista av kända tomma element, än att lita på att innerHTML returnerar något med >< i det

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

FIOL

Svar #2

Svara & Demo

Du kan upptäcka om ett element är självstängt via följande funktion, här är en JSFiddle med demon.

HTML

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

Två enkla HTMLElement's, den första är inte självstängande, den andra är det.

JavaScript

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

isSelfEnclosed( div ) -> False, under antagandet att div är div-elementet.

isSelfEnclosed( input ) -> Sant, under förutsättning att input är inmatningselementet.

Förklaring

Vi skapar ett nytt element efter element's taggnamn, och vi kontrollerar om dess .outerHTML har "><" i sig.

Anteckning

Jag gjorde den här självbesvarade frågan eftersom det enda andra svaret jag hittade inte var exakt idiotsäkert. Hur som helst är det en enkel funktion med ett enkelt syfte, hoppas det hjälper någon!

Uppdateringar

• Uppdaterad felaktig kod som använder cloneNode( true ) istället för bara cloneNode() (17:01 05/01/15)
• Uppdaterad funktion för att mer effektivt hantera problemet (17:09 05/01/15)