如何检查JavaScript对象是否为新DOM元素？及QUnit测试方法

一、如何在QUnit中测试mutationToDom的返回结果 #

你的mutationToDom函数返回了一个自定义的<mutation string="test"> DOM元素，在QUnit里不能直接比较对象引用（因为每次调用都会创建全新的元素实例），得从元素的特征维度来验证正确性，这里给你完善后的测试代码：

QUnit.test( 'check function mutationToDom', function( assert ) {
  var container = testBlock.mutationToDom();
  
  // 1. 验证返回值是有效的DOM元素
  assert.ok( container instanceof Element, '返回值是有效的DOM元素' );
  
  // 2. 验证标签名是否正确（注意DOM的tagName属性默认是大写格式）
  assert.equal( container.tagName, 'MUTATION', '元素标签名符合预期' );
  
  // 3. 验证string属性的取值
  assert.equal( container.getAttribute('string'), 'test', 'string属性值为test' );
  
  // 4. 验证元素的完整HTML结构
  assert.equal( container.outerHTML, '<mutation string="test"></mutation>', '元素的HTML结构完全符合预期' );
});

如果你之前尝试用XML相关的方法，也可以用XMLSerializer来序列化元素做验证，适合需要严格XML格式校验的场景：

QUnit.test( 'check function mutationToDom with XMLSerializer', function( assert ) {
  var container = testBlock.mutationToDom();
  var serializer = new XMLSerializer();
  var xmlStr = serializer.serializeToString(container);
  
  assert.equal( xmlStr, '<mutation string="test"></mutation>', '元素序列化为XML的结果正确' );
});

二、如何判断一个JavaScript对象是否是新的DOM元素？ #

可以通过以下几种可靠的方法来判断：

• 使用instanceof关键字：所有DOM元素都是Element的实例，自定义标签元素（比如你的<mutation>）即使未注册，也属于HTMLUnknownElement（Element的子类），这个判断最直接：

  function isDomElement(obj) {
    return obj instanceof Element;
  }
  

• 检查对象的内部类型：用Object.prototype.toString可以获取对象的标准类型标识，DOM元素会返回类似[object HTMLUnknownElement]（自定义标签）或[object HTMLDivElement]（标准标签）的结果：

  function isDomElement(obj) {
    return Object.prototype.toString.call(obj).startsWith('[object HTML');
  }
  

• 验证DOM特有的方法/属性：比如检查对象是否拥有getAttribute、appendChild这类DOM元素独有的方法，但这种方式不如前两种可靠，因为普通对象也可以模拟这些属性。

内容的提问来源于stack exchange，提问作者Vu Le Anh