检查DocumentFragment是否是普通的节点。

Question

我认为我的问题很简单，但是在花费了一些时间搜索之后，我无法找到令人满意的解决方案。

我有一个DocumentFragment元素，我想检查它是否完全被某个html标签包装。这是我试图转换成JavaScript的伪代码：

entireTagSelected = function (selRange) {
  var documentFragment = selRange.cloneContents();
  if (documentFragment is wrapped entirely by something) {
    return something;
  }
  return undefined;
}

对于类似 DocumentFragment 的内容：

<span>Te<b>s</b>t</span>

该函数应返回span对象。

但对于类似于:

Some text<span>Test</span>

它应该返回未定义。

- ghi

Answer 1

你可以获取 documentFragment 的子元素，如果长度为 1 并且 nodeType == 1，则它是一个单独的元素。

function entireTagSelected (selRange) {
  var documentFragment = selRange.content
  var children = documentFragment.childNodes
  if ( children.length == 1 && children[0].nodeType == 1 ) 
    return children[0]
}


var template1 = document.createElement( 'template' )
template1.innerHTML = "<span>Te<b>s</b>t</span>"

var template2 = document.createElement( 'template' )
template2.innerHTML = "Some text<span>Test</span>"

var template3 = document.createElement( 'template' )
template3.innerHTML = "Only text"

console.log( entireTagSelected( template1 ) )
console.log( entireTagSelected( template2 ) )
console.log( entireTagSelected( template3 ) )

- Supersharp