Body niet bereikbaar vanuit DOM

Status
Niet open voor verdere reacties.
0backslash0

0backslash0

Gebruiker
Lid geworden
3 jul 2007
Berichten
31
Een nogal lastig probleem (bug?) achtervolgt mij. Indien ik JavaScript gebruik om naar
bepaalde elementen inmijn documenten te verwijzen graak ik niet verder dan de body.

Het is te zeggen, de body tag lijkt volledig leeg te zijn (vanuit het DOM punt bekeken).

Ik stuite eerste op dit probleem wanneer ik alle tags uit een formulier (form tag) wou
retourneren.

Ten gevolge heb ik dan een controle geschreven, de code volgt:
test.html
HTML: 
<html>    
	<head>
		<title>Testpagina voor JavaScript</title>
		<script type="text/javascript" language="JavaScript">
		<!--
		var DOM = new Array();
		DOM = document.getElementsByTagName('html');
		DOM = DOM[0].childNodes;
		
		document.write('<table style=\"width: 100%\" cellpadding=\"2\" cellspacing=\"3\"\" border=\"1\">');
		document.write('<thead>');
		document.write('<th>Array</th>');
		document.write('<th>Key</th>');
		document.write('<th>Value</th>');
		document.write('</thead>');
		document.write('<tbody>');
		for(key in DOM)
		{
			document.write('<tr>');
			document.write('<td style=\"text-align: center\;padding: 3px\;width: 5px\">DOM</td><td style=\"padding: 3px\">' + key + '</td><td style=\"padding: 3px\">' + DOM[key] + '</td>');
			document.write('</tr>');
		}
		document.write('</tbody>');
		document.write('</table>');
			
		//document.write(DOM);
		//-->
    	</script>
	</head>
	
	<body>
		<hr>
		<form name="mainform">
			<label for="field_1">some field:</label><input type="text" id="field_1" name="field_1" />
			<input type="submit" />
		</form>
	</body>
</html>

Zoals verwacht, bij het uitvoeren van deze pagina blijkt het element HTML 2 childNodes heefd.

Indien de code wordt aangepast om de eerste child van HTML weer te geven:
Code: 
DOM[0].childNodes[0]

blijkt dus dat zoals verwacht de eerste childNode HEAD is

Wanneer nu de code wordt aangepast om de tweede child van HTML weer te geven
Code: 
DOM[0].childNodes[1]
is tabelleeg.

en ook referencies naar elke child or descendant van body resulteerd in een lege array of het volgende:

HTML: 
<table style="width: 100%" cellpadding="2" cellspacing="3" border="1">
<thead>
<th>Array</th>
<th>Key</th>
<th>Value</th>
</thead>
<tbody>
<tr>
<td style="padding: 3px; text-align: center; width: 5px;">DOM</td>
<td style="padding: 3px;">length</td><td style="padding: 3px;">0</td>
</tr>

<tr>
<td style="padding: 3px; text-align: center; width: 5px;">DOM</td>
<td style="padding: 3px;">item</td>
<td style="padding: 3px;">function item() { [native code] }</td>
</tr>

<tr>
<td style="padding: 3px; text-align: center; width: 5px;">DOM</td>
<td style="padding: 3px;">namedItem</td>
<td style="padding: 3px;">function namedItem() { [native code] }</td>
</tr>
</tbody>
</table>

Notitie: ik gebruik ook firebug, en bij het inspecteren van de pagina geefd deze alles weer
zoals het moet zijn, ook de error console geefd geen fouten. Gebruik dus firefox :)

kan iemand mij uit dit probleem helpen?
 
Laatst bewerkt:
Mijn gok is dat het body element nog niet is geladen op het moment dat het Javascript uit de header wordt gedraait. Als je een object wilt gebruiken in javascript moet het natuurlijk wel al bestaan. Als je je javascript dus helemaal onderaan in de body zet heb je in ieder geval toegang tot alle elementen in de body, end waarschijnlijk de body zelf ook.

Maar het is maar een gok.

Maar dit werkt in ieder geval. Alles in een functie die geroepen wordt op onload. Het nadeel van onload is dat het wacht tot alles is geladen wat niet persee nodig hoeft te zijn.

HTML: 
<html>    
	<head>
		<title>Testpagina voor JavaScript</title>
		<script type="text/javascript" language="JavaScript">
		<!--
		function dostuff()
               {
		  var DOM = new Array();
		  DOM = document.getElementsByTagName('html');
		  DOM = DOM[0].childNodes[1].childNodes;
		
		  document.write('<table style=\"width: 100%\" cellpadding=\"2\" cellspacing=\"3\"\" border=\"1\">');
		  document.write('<thead>');
		  document.write('<th>Array</th>');
		  document.write('<th>Key</th>');
		  document.write('<th>Value</th>');
		  document.write('</thead>');
		  document.write('<tbody>');
		  for(key in DOM)
		  {
		    document.write('<tr>');
		    document.write('<td style=\"text-align: center\;padding: 3px\;width: 5px\">DOM</td><td style=\"padding: 3px\">' + key + '</td><td style=\"padding: 3px\">' + DOM[key] + '</td>');
		    document.write('</tr>');
		  }
		  document.write('</tbody>');
		  document.write('</table>');
		  }
			
		//document.write(DOM);
		//-->
    	</script>
	</head>
	
	<body onload="dostuff()">
		<hr>
		<form name="mainform">
			<label for="field_1">some field:</label><input type="text" id="field_1" name="field_1" />
			<input type="submit" />
		</form>
	</body>
</html>
 
Laatst bewerkt:
ik heb jouw html dus in een andere pagina opgenomen en deze kan zonder problemen
elk element uit het document aanhalen. Jouw code geefd dus de children van body, in totaal
5.



Wat wel eigenaardig is, het form element en inhoud wordt niet geladen. Als ik de pagina
met firebug bekijk komt er in de body dus alleen het table element (en zn inhoud) voor.

De script mee in de body zetten blijkt te werken, maar geefd niet de gewenste resultaten.
HTML: 
<html>    
	<head>
		<title>Testpagina voor JavaScript</title>		
	</head>
	
	<body>
		<script>
		<!--
		var DOM = new Array();
		DOM = document.getElementsByTagName('body');
		DOM = DOM[0].childNodes;
		
		document.write('<table style=\"width: 100%\" cellpadding=\"2\" cellspacing=\"3\" border=\"1\">');
		document.write('<thead>');
		document.write('<th>Array</th>');
		document.write('<th>Key</th>');
		document.write('<th>Value</th>');
		document.write('</thead>');
		document.write('<tbody>');
		for(key in DOM)
		{
			document.write('<tr>');
			document.write('<td style=\"text-align: center\;padding: 3px\;width: 5px\">DOM</td><td style=\"padding: 3px\">' + key + '</td><td style=\"padding: 3px\">' + DOM[key] + '</td>');
			document.write('</tr>');
		}
		document.write('</tbody>');
		document.write('</table>');
			
		//document.write(DOM);
		//-->
    	</script>
		<hr>
		<form id="mainform">
			<label for="field_1">some field:</label><input type="text" id="field_1" name="field_1" />
			<input type="submit" />
		</form>
	</body>
</html>



Het lijkt erop dat alle elementen goed geladen worden (inclusief de table gegenereerd door javascript), maar toch kan via javascript
de form niet bereikt worden.
 
Laatst bewerkt:
Dat het form element niet in Firebug zichtbaar is kan kloppen. Zodra je de tabel schrijft met document.write krijg je een lege pagina met alleen wat je output met document.write.

Maar het form element staat wel in de tabel

Ik krijg deze tabel met FF3
DOM 0 [object Text]
DOM 1 [object HTMLHRElement]
DOM 2 [object Text]
DOM 3 [object HTMLFormElement] <------- Form element
DOM 4 [object Text]
DOM length 5
DOM item function item() { [native code] }

Als je dus niet document.write gebruikt maar document.createElement en appendChild dan blijft de referentie naar het form element geldig. Maar na de eerste document.write is het form weg.

Probeer dit maar: Er zal niet Aap Hello World! staan, maar alleen Hello World!
HTML: 
<html>
<head>
<script type="text/javascript">
function test()
{
  document.write("Hello World!");
}
</script>
</head>
<body onload="test()">
Aaap


</body>
</html>
 
Laatst bewerkt:
Ik heb eens geprobeert de javascript in een functie te zetten, en deze aan te roepen via een onclick event.

HTML: 
<html>    
	<head>
		<title>Testpagina voor JavaScript</title>		
	</head>
	
	<body>
		<script>
		<!--
		function DOMTest()
		{
			var DOM = new Array();
			DOM = document.getElementsByTagName('body');
			DOM = DOM[0].childNodes;
			
			document.write('<table style=\"width: 100%\" cellpadding=\"2\" cellspacing=\"3\" border=\"1\">');
			document.write('<thead>');
			document.write('<th>Array</th>');
			document.write('<th>Key</th>');
			document.write('<th>Value</th>');
			document.write('</thead>');
			document.write('<tbody>');
			for(key in DOM)
			{
				document.write('<tr>');
				document.write('<td style=\"text-align: center\;padding: 3px\;width: 5px\">DOM</td><td style=\"padding: 3px\">' + key + '</td><td style=\"padding: 3px\">' + DOM[key] + '</td>');
				document.write('</tr>');
			}
			document.write('</tbody>');
			document.write('</table>');
		}
			
		//document.write(DOM);
		//-->
    	</script>
		<hr>
		<form id="mainform">
			<label for="field_1">some field:</label><input type="text" id="field_1" name="field_1" />
			<input type="button" value="click me" onClick="DOMTest();" />
		</form>
	</body>
</html>


De pagina blijft maar laden :s (zelfs nog na 1 uur)

Daarna heb ik de alternatieve benadering genomen, via createElement dus.

HTML: 
<html>    
	<head>
		<title>Testpagina voor JavaScript</title>		
	</head>
	
	<body>
		<script>
		<!--			
			document.createElement('a');
			link.setAttribute('href', 'mypage.htm');
		//-->
    	</script>
		<hr>
		<form id="mainform">
			<label for="field_1">some field:</label><input type="text" id="field_1" name="field_1" />
			<input type="button" value="click me" onClick="DOMTest();" />
		</form>
	</body>
</html>

dit zou dus bij het laden van de pagina een anchor moeten aanmaken, maar de anchor komt er niet :s

Ik heb het dan maar geprobeert met een alert, en dit geefd geen probleem.
HTML: 
<html>    
	<head>
		<title>Testpagina voor JavaScript</title>
	</head>
	
	<body>
		<script>
		<!--
		function DOMTest()
		{
			var DOM = new Array();
			DOM = document.getElementById('field_1');
			
			var Str = new String;
			var i = new Number;
			
			/*for(key in DOM)
			{
				Str += 'DOM[' + key + '] => ' + DOM[key] + '\r\n';
				i++;
			}*/
			
			Str = DOM.className;
			if(Str == 'field') {
				DOM.className = 'field_required';
			}
			alert(Str);
		}
		//-->
    	</script>
		<hr>
		<form id="mainform">
			<label for="field_1">some field:</label><input type="text" class="field" id="field_1" name="field_1" />
			<input type="button" value="click me" onClick="DOMTest();" />
		</form>
	</body>
</html>

Dit is ongeveer wat ik wou bereiken, ik ga het hierbij dus laten :)
 
na
var newElement = document.createElement("a");
moet
parentElement.attachChild(newElement);

dus
Code: 
var newElement = document.createElement("a");
parentElement.attachChild(newElement);

parentElement zou dan in dit geval het body element zijn. Als je dit niet doet wordt het element niet toegevoegd aan de pagina.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan