如何确定是否在父元素的开始或结束存在文本?HTML DOM &JavaScript

How to determine if there exists text at the beginning or end of a parent element? HTML DOM & JavaScript

本文关键字：文本 存在 HTML DOM JavaScript 结束 是否 何确定 元素 开始      更新时间：2023-09-26

假设我们有一个嵌套的span:

<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>

应该不会比

更难
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

因此，使用@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;
    } 
}

不确定这是最好的方法，但这是我首先想到的解决方案:

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示例

相关文章：