如何获取内部文本，不包括子节点
如何获取内部文本，不包括子节点
提问于 2022-01-08 16:45:34
我希望能够在文本周围添加自定义标记，所以说我有：
<p>Some text <img src="" /> more text </p>如何使我的自定义标签围绕‘一些文本’和‘更多的文本’？条件是动态的，所以我不能为任何一个实例编写硬代码。也需要做子节点，不确定本例中的img是否被视为子节点。
回答 2
Stack Overflow用户
发布于 2022-01-08 18:11:08
如果您扫描childNodes，您可以检查每个节点类型，看看它是否是一个Text元素。如果是的话，将父项中的条目替换为封装在标记中的版本。在这里，我选择了<strong>以粗体显示文本，并在替换后显示效果。
const trigger = document.getElementById("trigger");
trigger.addEventListener("click", () => {
const parent = document.querySelector("p");
const customTag = "strong";
for (const childNode of parent.childNodes) {
if (childNode instanceof Text) {
const text = childNode.data;
const customElement = document.createElement(customTag);
customElement.innerText = text;
parent.replaceChild(customElement, childNode);
}
}
});<p>Some text <img src="https://www.gravatar.com/avatar/dc3dc4d5e0f2ded6a626771d2f1ae2a6?s=64&d=identicon&r=PG&f=1" /> more text </p>
<button id="trigger">Wrap text with tag</button>
Stack Overflow用户
发布于 2022-01-08 17:16:26
您可以使用getElementsByTagName或children属性。
document.getElementsByTagName('p')[0].getElementsByTagName("img");document.getElementsByTagName('p')[0].children页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70634404
复制相关文章
相似问题
腾讯云开发者
