Javascript 如何操作其父节点为空的文本节点
我正在解析一个网站，我得到了这样一个元素Javascript 如何操作其父节点为空的文本节点,javascript,html,dom,textnode,Javascript,Html,Dom,Textnode,我正在解析一个网站，我得到了这样一个元素 <td> <span class="label">Hometown/High School:</span> "
<td>
<span class="label">Hometown/High School:</span>
"
Austin, TX
/
Westwood
"</td>
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])
}
}
text2<td>" text2 "</td>
“text2”
null但是，当我在createTreeWalker本身中访问这两个文本节点的parentNode时，我获得了所需的正确父节点 为此，不需要父元素。您只需要“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>
<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>
var selectedTextNodes=[]//treewalker中的textnodes存储在这里
//只是一个绑定到加载的事件，用于测试
window.onload=函数（）{
var tNode，//将成为当前节点
tWalker=document.createTreeWalker（document.body，NodeFilter.SHOW_TEXT，null，false）；//正文中的所有textnodes
//检查列表中的所有文本节点
while（tNode=tWalker.nextNode（））{
//根据某些条件将textnode添加到列表中
（tNode.textContent&&tNode.textContent.trim（））&&selectedTextNodes.push（tNode）
};
useTextNodes（selectedTextNodes）
};
//函数来使用文本节点
函数useTextNodes（listOfTextNodes）{
if（listOfTextNodes&&listOfTextNodes.length）{
对于（var i=0，j=listOfTextNodes.length；我在虚拟家长中添加了它。你能格式化代码吗？并提供一个工作代码样本吗？我已经编辑了我的问题，请让我确切地知道你想要的内容。我想这是一个非常清楚的问题。@Justinas有任何参考资料吗？嗨，莱恩，谢谢你如此详尽的解释。然而rtech容器
尚未出现在html中（请参见我的示例代码，我正在使用document.createElement（'rtechContainer'）创建它。）。虽然我在问题中提到的最后一个代码中提到了这一点，但我的错是，我提交了错误的第一个html代码。我已经更新了它。在问题中找到的第一个html代码是如何接收html的。我接收的文本节点是“Austin，Tx/Westwood”。它的parentElement也为null，parentNode也为null（尽管它在内部）你是如何接收或获取该文本节点的？我不是指内容字符串，而是指节点本身。进行了一个小的更新，我可以访问父节点而没有任何问题。至少从提供的示例来看。你好@Lain，请参考我问题中的附加信息
更新，我已经解释了我这方面的情况。我希望国家是明确的。你确定textnode2真的是“text2”吗？你记录过它的文本内容吗？TreeWalker还包括其他textnodes，例如，.你的TreeWalker的实际调用是什么？你还将节点存储在一个数组中..这意味着，在引用这些元素之前，它们可能已经更改了。
<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
}
}
};
<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>