如何在html中操作文本节点

时间:2011-09-07 05:01:10

标签: html dom

在html中,文本节点仅包含纯文本。如果它之间存在超链接,则它是一个单独的childNode,它将成为元素节点。我想知道,我们可以操纵一个锚标记,使其显示为文本节点。就像在一些span或div标签之间保持锚标签一样。我试过这种方式没有成功。有没有解决方案?

4 个答案:

答案 0 :(得分:1)

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

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

例如,如果你有这样的代码:

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

如果没有anchor元素,则无法使此代码显示在DOM中。添加HTML元素后,将添加该页面的DOM树。

答案 1 :(得分:0)

鉴于

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

你有一个包含三个子节点的段落元素:文本节点,元素节点和文本节点。

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

document.getElementById("message").innerHTML

得到你想要的东西。

现在,如果你想获取锚节点的文本,作为文本节点,你可以通过识别文本节点作为锚节点的子节点来实现。

我在http://jsfiddle.net/8Yqqz/1/

创建了一个演示

基本思想是找到锚节点,然后找到它的第一个子节点。这个孩子将是一个文本节点。小提琴的源代码应该清楚明白。

答案 2 :(得分:0)

打印&lt;a&gt;link&lt;/a&gt;,您将获得带<a>link</a>

的文字节点

从技术上讲,人们可以使用DOM客户端来做这件事,比如

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

你真正想要什么?

答案 3 :(得分:0)

'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