How do you check if a JavaScript Object is a new DOM Element?

Question

I have a function

mutationToDom: function() {
    var container = document.createElement( 'mutation' );

    container.setAttribute( 'string', 'test' );

    return container;
}

The container is <mutation string="test"></mutation>

How can I check it after I call this function in my Unit test?

QUnit.test( 'check function mutationToDom', function( assert ) {
    var container = testBlock.mutationToDom();
    assert.ok( container === ???, 'mutation is created with correct value' );
});

Try #1

I tried with XMLSerializer() to convert the XML to string

var containerString = new XMLSerializer().serializeToString(container);

but, the containerString is

"<mutation xmlns="http://www.w3.org/1999/xhtml" string="test"></mutation>"

instead of "<mutation string="test"></mutation>"

@JaromandaX the is not a standard HTMLElement, so the result of this comparison is false — Vu Le Anh, May 07 '18 at 03:54
@JaromandaX I tried `HTMLUnknownElement` already, and result is false too. But, I dont want to check by this way, bcz I do not know the container is exact `` — Vu Le Anh, May 07 '18 at 04:10
check for one or the other - though, if unknown doesn't work ... what is the result of `Object.prototype.toString.call(container)` — Jaromanda X, May 07 '18 at 04:14
`Object.prototype.toString.call(container)` --> `"[object HTMLUnknownElement]" ` — Vu Le Anh, May 07 '18 at 04:28
`container.nodeName.toUpperCase() === "MUTATION" && container.classList.contains("test")` — , May 07 '18 at 13:05

score 2 · Accepted Answer · answered May 07 '18 at 04:17

How about checking for the outerHTML?

var testBlock = {
  mutationToDom: function() {
    var container = document.createElement('mutation');
    container.setAttribute('string', 'test');
    return container;
  }
};

QUnit.test( 'check function mutationToDom', function( assert ) {
    var container = testBlock.mutationToDom();
    assert.ok( container.outerHTML === '<mutation string="test"></mutation>', 'mutation is created with correct value' );
});

<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.6.0.css">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="https://code.jquery.com/qunit/qunit-2.6.0.js"></script>

score 0 · Answer 2 · answered Jun 06 '18 at 22:27

0

To answer the specific question in the title, try testObject instanceof Element or ...HTMLElement? This might be a precondition of checking the .outerHTML, as suggested by 31piy.

answered Jun 06 '18 at 22:27

Anm

3,291
2
29
40

How do you check if a JavaScript Object is a new DOM Element?

2 Answers2