Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2011
    Messaggi
    192

    DOM - Evitare [ObjectText]

    Ho un codice HTML di questo tipo:
    codice:
    <table>
    	<tr>
    		<td>
    			<div>
    				
    
    </p>
    			</div>
    			<div>
    				
    
    </p>
    			</div>
    		</td>
    		<td>
    			<div>
    				
    
    </p>
    			</div>
    		</td>
    	</tr>
    </table>
    Come si può notare ho formattato il testo in modo da renderlo il più leggibile possibile e cosi ho sempre scritto in HTML. Il problema sorge quando devo utilizzare i nodi e mi conta gli 'a capo', che ho messo per formattare, come oggetti testo. Preferirei evitare di saltare il nodo testo e vorrei proprio che non lo considerasse anche perché cambio in continuazione l'html (in termine di leggibilità e altro) e andare a modificare ogni volta il js per aggiustare.. mi sembrerebbe eccessivo. Mi spiego meglio: se volessi passare da una cella all'altra dovrei utilizzare due nextSibling non uno, se volessi selezionare la 2 cella della riga dovrei mettere childNodes[3] e non childNodes[1]. Spero di essere stato chiaro, dunque, esiste una soluzione?

  2. #2
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Originariamente inviato da dimoshake
    dunque, esiste una soluzione?
    Mi spiace, esiste solo una soluzione indiretta:

    codice:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Pagina bianca</title>
    <script type="text/javascript">
    
    var aTable;
    
    function astraiTabella () {
    	aTable = Array.prototype.slice.call(document.querySelectorAll("#esempio tr"));
    	for (var nRow = 0; nRow < aTable.length; nRow++) {
    		aTable[nRow] = Array.prototype.slice.call(aTable[nRow].querySelectorAll("td"));
    	}
    
    	// Estraggo il contenuto della prima cella della seconda riga...
    	alert(aTable[1][0].innerHTML);
    }
    
    onload = astraiTabella;	
    
    </script>
    
    </head>
    
    <body>
    
    <table id="esempio">
    	<tr>
    		<td>
    			<div>
    				
    
    Cella 0.1</p>
    			</div>
    			<div>
    				
    
    Blabla</p>
    			</div>
    		</td>
    		<td>
    			<div>
    				
    
    Cella 0.2</p>
    			</div>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			<div>
    				
    
    Cella 1.0</p>
    			</div>
    			<div>
    				
    
    Blabla</p>
    			</div>
    		</td>
    		<td>
    			<div>
    				
    
    Cella 1.1</p>
    			</div>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			<div>
    				
    
    Cella 2.0</p>
    			</div>
    			<div>
    				
    
    Blabla</p>
    			</div>
    		</td>
    		<td>
    			<div>
    				
    
    Cella 2.1</p>
    			</div>
    		</td>
    	</tr>
    </table>
    
    </body>
    
    </html>
    Per applicarlo ad altre strutture devi modificare lo script ad hoc.
    Tutto ciò che fai con jQuery puoi farlo meglio e con la metà del codice in puro JavaScript.

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2011
    Messaggi
    192
    Un esempio con semplici funzioni
    codice:
    function nextSibling(nodo){
    	do{
    		nodo = nodo.nextSibling;
    	}while(nodo == "[object Text]");
    	
    	return nodo;
    }
    
    function childNodes(nodo,i){
    	nodo = nodo.childNodes;
    	nodi = new Array();
    	
    	for(x=0;x<=nodo.length;x++){
    		if(nodo[x] != "[object Text]")nodi.push(nodo[x])
    	}
    	
    	return nodi[i];
    }
    
    node = document.getElementById('id');
    node = node.parentNode.parentNode;
    node = nextSibling(node);
    node = childNodes(node,0);
    Invece di utilizzare le funzioni volevo creare una sorta di nodo personalizzato quindi per esempio

    codice:
    node = node.parentNode.parentNode.next.child[0];
    next e child sono nodi inventati che emulano il nextSibling e childNodes ma omettono l'oggeto testo. Spero di essermi spiegato

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.