如何操作父节点为空的文本节点

Question

我正在解析一个网站，我得到了这样一个元素

<td>
                                <span class="label">Hometown/High School:</span>
"                                                                                                  
                                                                                                            Austin, TX
                                                        /
                                                                                        Westwood
                                                                                                    "</td>

问题是当我操作文本节点时，我得到一个类似 --> "

的节点

它的父项为空。我想在 '/' 上拆分此文本并将其替换为 <sometag>Austin,Tx</sometag> <sometag>Westwood</sometag>

之类的标签

但无法执行此操作，因为文本节点的父级即将变为空，无法计算其 xpath。

编辑：我用来拆分和替换文本节点的代码

let parent = textnodeStr.parentElement; // textnodeStr == the text node element
        if(parent != null){
            parent.innerHTML = '';
            let elements = [];
            for (var j=0; j< arr.length; j++){ //arr is the array which contains ['Austin, Tx', 'Westwood'] i.e. the substrings I get After I split the above textnode using '/'
                elements[j] = document.createElement("rtechContainer");
                newText = document.createTextNode(arr[j]);
                elements[j].appendChild(newText);
                parent.appendChild(elements[j])
            }
        }

附加信息 我使用 createTreeWalker 来访问文本节点。这是我正在做的事情的日志。

使用 createTreeWalker 访问文本节点。
根据某些条件，将选择性文本节点存储在数组中（比如数组 selectedTextNodes）。
当 treeWalker 完成执行时，调用另一个函数，我通过它访问前面提到的数组 (selectedTextNodes)。
现在在函数内部，我遍历数组并尝试访问每个项目的父节点。这是发生了什么。

对于

中的文本节点 text1

<td><span> "text1" </span></td>

我在函数中获取了父节点。

对于

中的文本节点text2

<td>" text2 "</td>

我在我的函数中得到父 null。

但是，当我在 createTreeWalker 本身中访问这两个文本节点的 parentNode 时，我得到了所需的正确父节点。

Answer 1

为此，您不需要父元素。您只需要 "rtechcontainer" 元素的文本内容。此外，并非每个浏览器都支持 parentElement（应该支持 parentNode）。

解释在评论中：

<html>
    <head>
        <script>
            //Just an event bound to load, for testing
            window.onload = function(){
                //Grabbing all elements with the tagnaname 'rtechcontainer'
                for(var tL=document.querySelectorAll('rtechcontainer'), i=0, j=tL.length; i<j; i++){
                    var tText = tL[i].textContent; //Holds the textcontent of the element
                    console.log('textcontent', tText);

                    //What we want: <sometag>Austin,Tx</sometag> <sometag>Westwood</sometag>
                    //First we clear the element
                    tL[i].innerHTML = '';

                    //Second we split the textcontent and loop through it
                    for(var tS=tText.split('/'), m=0, n=tS.length; m<n; m++){
                        var tAnyElement = tL[i].appendChild(document.createElement('sometag'));
                        tAnyElement.textContent = tS[m].trim(); //Assigning the trimmed part of the textcontent
                    }
                }
            }
        </script>
    </head>

    <body>
        <div>
            <span class="label">Hometown/High School:</span>
            <rtechcontainer>Austin, TX / Westwood</rtechcontainer>
        </div>
    </body>
</html>

更新：

对于评论中提到的父节点的问题，我需要知道你如何获取节点本身。一种可能的方式是这样的：

    //Just an event bound to load, for testing
    window.onload = function(){
        var tNode, //Is going to be the current node
            tWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false); //All textnodes within the body

        //Check all textnodes in the list
        while(tNode = tWalker.nextNode()){
            console.log('textnode', tNode);
            console.log('content of textnode', tNode.textContent);
            console.log('parent of textnode', tNode.parentNode);

            //We only need the ones containing slashes
            if(tNode.textContent && tNode.textContent.indexOf('/') !== -1){
                console.log('this one we need', tNode);
                //createelements, split, just like above
            }
        }
    };

更新 2：

我根据您的修改调整了我的示例，它仍然可以正常工作。也许你数组中的文本节点从你推送它们到你访问它们的时候都会受到影响？

<html>
    <head>
        <script>
            var selectedTextNodes = []; //The textnodes from treewalker get stored here

            //Just an event bound to load, for testing
            window.onload = function(){
                var tNode, //Is going to be the current node
                    tWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false); //All textnodes within the body

                //Check all textnodes in the list
                while(tNode = tWalker.nextNode()){
                    //Adding the textnode to the list depending on some condition
                    (tNode.textContent && tNode.textContent.trim()) && selectedTextNodes.push(tNode)
                };

                useTextNodes(selectedTextNodes)
            };

            //Functions to use the textnodes in anyway
            function useTextNodes(listOfTextNodes){
                if(listOfTextNodes && listOfTextNodes.length){
                    for(var i=0, j=listOfTextNodes.length; i<j; i++){
                        console.log(i, listOfTextNodes[i].textContent, listOfTextNodes[i].parentNode)
                    }
                }
            }
        </script>
    </head>

    <body>
        <div>
            <span class="label">Hometown/High School:</span>
            Austin, TX / Westwood
        </div>
    </body>
</html>

如何操作父节点为空的文本节点

How to manipulate a text node whose parent is coming null

html

javascript

dom

textnode

更新：

更新 2：