1. 今天遇到一个需求是,需要循环dom中一个元素的所有节点,一直找到它里面所有的文本节点。里面有些 js 的判断条件好久没写,都忘了(难受),特此记录一下。
2. 如图 ,手动创建了一个名称为 temn 的 dom节点,当然可以不用手动创建,如果页面有该元素的话可以直接获取,例如: document.getElementById('tenm')
<div id="temn">
<span>k哈哈哈哈哈s</span>
<span>k哈哈哈哈哈s</span>
<span>k哈哈哈哈哈s</span>
</div>
3. 写方法获取其中的节点,利用递归不管里面节点有多少层节点都可以获取到。
var tenm=document.createElement('div')
tenm.innerHTML=value
tenm.id='tenm'
console.log('tenm',tenm)
function loopUntilTextNode(node) {
for (let i = 0; i < node.childNodes.length; i++) {
let childNode = node.childNodes[i];
if (childNode.nodeType === Node.TEXT_NODE && childNode.textContent.trim() !== '') {
console.log('childNode',childNode,childNode.parentNode)
return childNode; //childNode为他的文本内容 childNode.parentNode是他的父节点
} else {
let result = loopUntilTextNode(childNode);
if (result) return result;
}
}
return null;
}
4. loopUntilTextNode 接受一个 DOM 节点作为参数,并递归遍历它的所有子节点。如果某个子节点的 nodeType
属性为 Node.TEXT_NODE
并且它的文本内容不是空字符串,该函数就返回该节点。否则,继续递归遍历该节点的子节点。如果遍历完所有子节点都没有找到合适的文本节点,该函数返回 null
。
5.好久没写 js 了,找了好多方法才想起来,。。。