如何操作html中的文本节点

Question

在 html 中，文本节点仅包含纯文本。如果超链接位于其间，则它是一个单独的子节点，并且它成为元素节点。我想知道，我们能否以文本节点的方式操作锚标记。就像在某些 span 或 div 标签之间保留锚标签一样。我按照这个方法试过了，不行。有什么解决办法吗？

Answer 1

锚标记的内容将在锚元素节点下形成一个文本节点。不可能有锚标记而没有锚元素节点。

结构如下所示： http://www.w3schools.com/htmldom/default.asp< /a>

例如，如果您有这样的代码：

<p>Go to the <a href='home.html'>Home</a> page.</p>

没有办法让这段代码在没有锚元素的情况下出现在 DOM 中。添加 HTML 元素后，它将被添加到该页面的 DOM 树中。

Answer 2

假设

<p id="message">Hello <a href="#">from this</a> page</p>

您有一个具有三个子节点的段落元素：一个文本节点、一个元素节点和一个文本节点。

听起来您想要段落节点中的所有文本。你可以参考

document.getElementById("message").innerHTML

得到你想要的（我认为）。

现在，如果您想要获取锚节点的文本，作为文本节点，您可以通过识别存在一个文本节点作为锚节点的子节点来实现。

我在 http://jsfiddle.net/8Yqqz/1/ 创建了一个演示

基本思想是您找到锚节点，然后获取其第一个子节点。该子节点将是一个文本节点。小提琴的源代码应该清楚地说明这一点。

Answer 3

打印 link</a> ，您将获得带有 link 的文本

节点说起来，人们可以使用 DOM 客户端来做到这一点，比如

with (elem.parentNode)
    insertBefore(document.createTextNode(elem.innerHTML), elem), 
    removeChild(elem)

你真正想要什么？

Answer 4

'use strict'; 
var mode = 'online'; 
var isCavasInit = false; 
var effects = []; 
var currentEffect = null; 
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'); 
var htmlNode = document.getElementsByTagName('html')[0]; 
var encoder = new GIFEncoder(); 
var string = 'asdfasdfasdfasdfasdf asdfasdfasdfasdfasdfasdf '; 

function initCanvasAndRun(effectType) {
    setTimeout(function() {
        if (htmlNode.offsetHeight === 0 || htmlNode.offsetWidth === 0) {
            initCanvasAndRun(effectType);
            return;
        }
        canvas.width = htmlNode.offsetWidth * 2;
        canvas.style.width = htmlNode.offsetWidth + 'px';
        if (mode === 'dev') {
            canvas.height = htmlNode.offsetHeight;
            canvas.style.height = htmlNode.offsetHeight / 2 + 'px';
        } else {
            canvas.height = htmlNode.offsetHeight * 2;
            canvas.style.height = htmlNode.offsetHeight + 'px';
        }
        isCavasInit = true;
        runEffect(effectType);
    }, 200);
}

function initCanvasAndSend(effectType) 
{
    setTimeout(function() {
        canvas.width = htmlNode.offsetWidth;
        canvas.style.width = canvas.width + 'px';
        if (mode === 'dev') {
            canvas.height = htmlNode.offsetHeight / 2;
            canvas.style.height = htmlNode.offsetHeight / 2 + 'px';
        } else {
            canvas.height = htmlNode.offsetHeight;
            canvas.style.height = htmlNode.offsetHeight + 'px';
        }
        isCavasInit = true;
        sendImage(effectType);
    }, 200); 
}

function getScript(effectType) {
    var script = document.createElement("script");
    script.src = './effects/' + effectType + '/effect.js';
    script.type = "text/javascript";
    document.getElementsByTagName("html")[0].appendChild(script);
    return script;
}

function runEffect(effectType) {
    if (!isCavasInit) {
        initCanvasAndRun(effectType);
        return;
    }
    canvas.width = htmlNode.offsetWidth * 2;
    canvas.style.width = htmlNode.offsetWidth + 'px';
    if (mode === 'dev') {
        canvas.height = htmlNode.offsetHeight;
        canvas.style.height = htmlNode.offsetHeig