Как манипулировать текстовыми узлами в HTML

Question

В html текстовый узел содержит только чистый текст. Если между ними появляется гиперссылка, это отдельный childNode, и он становится узлом элемента. Я хочу знать, что мы можем манипулировать тегом привязки таким образом, чтобы он отображался как текстовый узел. Например, сохраняя тег привязки между тегами span или div. Я попробовал это так, не получилось. Есть ли какое-нибудь решение?

Answer 1

Содержимое тега привязки сформирует текстовый узел под узлом элемента привязки.Невозможно иметь тег привязки и не иметь узла элемента привязки.

Структура такая, как показано здесь: http://www.w3schools.com/htmldom/default.asp

Например, если у вас есть такой код:

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

Невозможно заставить этот код появляться в DOM без элемента привязки.Как только вы добавите элемент HTML, к нему будет добавлено дерево DOM.

Answer 2

'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

Answer 3

Печать <a>link</a> и вы получите текстовый узел с <a>link</a>

С технической точки зрения, это можно сделать на стороне клиента DOM, например

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

Что ты действительно хочешь?

Answer 4

С учетом

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

у вас есть элемент абзаца с тремя дочерними элементами: текстовый узел, узел элемента и текстовый узел.

Звучит так, будто вы хотите весь текст внутри узла абзаца. Вы можете сослаться на

document.getElementById("message").innerHTML

чтобы получить то, что (я думаю) вы хотите.

Теперь, если вы хотите получить текст узла привязки, как текстовый узел вы можете сделать это, распознав, что текстовый узел является дочерним по отношению к узлу привязки.

Я создал демо на http://jsfiddle.net/8Yqqz/1/

Основная идея заключается в том, что вы находите узел привязки, а затем получаете его первый дочерний элемент. Этот ребенок будет текстовым узлом. Исходный код скрипки должен прояснить это.