Question

我们说我们有一个嵌套的范围：

<span><span></span></span>

我们想知道文本是否存在

<span> here <span> </span></span>

或

<span><span></span> here</span>

我们假设我们引用了父元素节点。

请注意

<span> text <span> text </span> text </span>

或

<span> text <span> text </span></span>

是完全可能的两种情况。

Answer 1

不应该比

更难

node.firstChild && node.firstChild.nodeType === Node.TEXT_NODE || 
  node.lastChild && node.lastChild.nodeType === Node.TEXT_NODE

为了便于阅读，最好使用Node.*_NODE符号常量（尽管它们可能不会在旧浏览器中定义）。

为了避免空文本节点出现问题，您可以在其前面加上

node.normalize()

哪个

将指定节点及其所有子树放入“规范化” 形成。在规范化子树中，子树中没有文本节点为空并且没有相邻的文本节点。

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Node.normalize。

省略注释节点和仅空白文本节点：

var children = Array.prototype.filter.call(node.childNodes || [], function(node) {
  return node.nodeType !== Node.COMMENT_NODE &&
    (node.nodeType !== Node.TEXT_NODE || /\S/.test(node.nodeValue));
}),
    firstChild = children[0],
    lastChild = children[children.length-1];

return firstChild && firstChild.nodeType === Node.TEXT_NODE ||
  lastChild && lastChild.nodeType === Node.TEXT_NODE;

如果出于某种原因，检查里面是否有潜伏的子元素很重要，那么添加支票就足够了

!!node.children.length

Answer 2

因此，使用@ weeklyTea答案中的一些概念，我将三个函数放在一起，为所提出的问题提供答案。

我认为重要的是要指出，我们总是有一个嵌套元素节点。我们'不确定'我们是否在元素节点的两侧都有文本节点。当它这样说时，我认为这些功能将非常直接：

function isNestedHighlightAtEnd(parent) {
    var childNodes = parent.childNodes;
    var childNodesLength = childNodes.length;

    if( childNodes[childNodesLength-1].nodeType != 3 ) {
        return true;
    }
    else {
        return false;
    }
}

function isNestedHighlightAtMiddle(parent) {

    if( !isNestedHighlightAtBeg( parent ) && !isNestedHighlightAtEnd( parent )) {
        return true;
    }
    else {
        return false;
    }                
}

function isNestedHighlightAtBeg(parent) {
    var childNodes = parent.childNodes;
    var childNodesLength = childNodes.length;

    if( childNodes[0].nodeType != 3) {
        return true;
    }
    else {
        return false;
    } 
}

Answer 3

不确定这是最好的方式，但这是我的解决方案首先进入我的脑海：

HTML：

<span id="span1">
    thththt
    <span id="span2"></span>
</span>

JS：

var span = document.getElementById('span1');
var spanChilds = span.childNodes;
var textIndex = -1;

for(var i = 0; i < spanChilds.length; ++i){
    debugger;
    if(spanChilds[i].nodeType == 3){
        textIndex = i;
        break;
    }
}

var nestSpan = document.getElementById('span2');
var nestSpanIndex = Array.prototype.indexOf.call(span.childNodes, nestSpan);

if(nestSpanIndex > textIndex){
    alert('text first')
}else{
    alert('span first')
}

jsFiddle上的

Example

如何确定父元素的开头或结尾是否存在文本？ HTML DOM＆amp; JavaScript的

3 个答案: