Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it L'avatar di andreto
    Registrato dal
    Dec 2012
    Messaggi
    127

    Visualizzare albero DOM oppure Visualizzare Nodi che fanno parte di una Selezione

    Ciao a tutti,
    selezionando del testo con il mouse su una pagina HTML avrei la necessità di ricevere la lista di tutti i nodi del DOM che fanno di questa selezione.

    Avrei pensato di procedere per due strade, ma entrambe per me complicate da svilupparsi.

    La prima è avere la lista di tutti i nodi e figli del body e confrontarli con i nodi che fanno parte della selezione (con .containsNode)
    ma purtroppo non saprei se esiste già un'istruzione che mi permetta di ricevere tutti i nodi, figli, nipoti e pronipoti ecc... a partire da un elemento, oppure se devo crearmi un ciclo for.

    La seconda è usare un'istruzione di javascript che mi restituisce in un array tutti i nodi che fanno parte della mia selezione, (questa sarebbe l'ideale ) ma in questo caso non so se esiste tale istruzione.

    Ho verificato le varie istruzioni di Range e Selection ma non ne ho trovata nessuna che mi risolva il problema.

    Spero che qualcuno di voi mi possa aiutare, grazie.

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Quello che chiedi è fattibile (complessità difficoltà 7) solo nelle pagine che sviluppi (che sei amministratore) le pagine esterne di altri siti no
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it L'avatar di andreto
    Registrato dal
    Dec 2012
    Messaggi
    127
    Si certo, devo integrarlo nel mio sito.

    Per quanto riguarda la difficoltà Ok, ci sto!

    Praticamente

    applicando .childNodes a body, visualizzo tutti i figli ma non nipoti, pronipoti ecc...
    Io dovrei riuscire ad avere in un array l'intero albero.

    Oppure
    .anchorNode Restituisce il nodo in cui inizia la selezione
    .focusNode Restituisce il nodo in cui finisce la selezione

    Io dovrei sapere quali altri nodi sono coinvolti nella selezione e non solo il primo e l'ultimo, tutti.

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Il DOM mi è sempre stato "ostico" se non lo hai già fatto leggi qui
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Utente di HTML.it L'avatar di andreto
    Registrato dal
    Dec 2012
    Messaggi
    127
    Originariamente inviato da cavicchiandrea
    Il DOM mi è sempre stato "ostico" se non lo hai già fatto leggi qui
    Io fin'ora ho scritto questo che si occupa di evidenziare le parole o frasi della pagina con la sola selezione del mouse:

    codice:
    <!DOCTYPE html>        
    <html>
    <head>
        <meta charset="UTF-8" />
        <style>
        .evidenziato{
            background-color: yellow;
            }
        </style>
        
        <script type="text/javascript">
            document.onmouseup=function(){evidenzia()};
            
            function evidenzia () {
                if (window.getSelection().isCollapsed == false) {               
                if (window.getSelection) {                 
                    var selection = window.getSelection();                 
                    var range = selection.getRangeAt(0);               
                    var selection_clone = range.cloneContents();
                   
                    selection.deleteFromDocument();
                    
                    var nuovo_nodo = document.createElement("span");
                    nuovo_nodo.setAttribute("class","evidenziato"); 
                    nuovo_nodo.appendChild(selection_clone);
                    range.insertNode(nuovo_nodo);                
                }
                else {
                    alert ("Il tuo browser non supporta questo!");
                    }
                }
            }
        </script>
    </head>
    <body>
        
    <div>Questo è un div</div>
    
    <div>Questo è un div</div>
    
    
     
    <span>Questo è uno span</span>
    
    
     
    <span>Questo è uno span</span>
    
    
     
    
    
    Questo è un paragrafo</p>
    
    
    Questo è un paragrafo</p>
    
    </body>
    </html>
    Se seleziono riga per riga, nessun problema!
    Se seleziono insieme le due righe dello span anche se in mezzo c'è il tag
    nessun problema!
    Quando la selezione inizia o finisce in un div o paragrafo, incominciano i problemi.

    Avrei pensato di trovare tutti i nodi di testo inclusi nella selezione ed applicare lo span ad ognuno di loro.

    Ma purtroppo non conosco il metodo.

    C'è qualche angelo che mi possa aiutare?

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.