Niehztog: simple Dom Abfrage geht nicht

Das ist mein Code. Es kommt die Meldung:

Fehler: document.getElementsByName("mse")[0] is undefined

<html>  
	<head>  
		<title>Test</title>  
  
		<script type="text/javascript">  
			window.alert(document.getElementsByName("haus")[0].nodeName);  
		</script>  
  
	</head>  
	<body>  
		<map name="haus">  
		</map>  
	</body>  
</html>

Abgesehen davon dass ein leeres Imagemap nicht viel Sinn macht, was ist da falsch? (Nutze Firefox 3.0.11)

  1. Moin Moin!

    Ich schätze, das Problem liegt darin, dass der alert aufgerufen wird, bevor das Dokument komplett verarbeitet ist. Verschieb den alert mal in einen onload-Handler.

    Alexander

    --
    Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
    1. Danke, danke, so geht es dann wohl:

      <html>  
      	<head>  
      		<title>Test</title>  
        
      		<script type="text/javascript">  
      		  
      			function laden() {  
      				window.alert(document.getElementsByName("haus")[0].nodeName);  
      			}  
      			  
      		</script>  
        
      	</head>  
      	<body onLoad="javascript:laden()">  
      		<map name="haus">  
      		</map>  
      	</body>  
      </html>
      

      Ist es also grundsätzlich so dass auf den DOM-Tree nie einfach so im <script></script> Teil zugegriffen werden kann, sondern dass man den code über Events triggern muss?

      1. <body onLoad="javascript:laden()">

        Das javascript: Label ist hier völlig unnötig.

        Ist es also grundsätzlich so dass auf den DOM-Tree nie einfach so im <script></script> Teil zugegriffen werden kann, sondern dass man den code über Events triggern muss?

        Nein. Du kannst auch auf die Elemente zugreifen, wenn sie im HTML Code davor stehen.

        Struppi.

      2. @@Niehztog:

        nuqneH

        Ist es also grundsätzlich so dass auf den DOM-Tree nie einfach so im <script></script> Teil zugegriffen werden kann, sondern dass man den code über Events triggern muss?

        Nein.

        Im Script ist der Teil des DOMs bekannt, das vor dem 'script'-Element im Quelltext steht.

        Nicht nur deshlab ist es sinnvoll, Scripte als letztes im 'body' zu notieren. Das erspart einige Eventhandler und macht den Seitenaufbau schneller. [PERFORMANCE-BP2]

        <html>  
                <head>  
                        <title>Test</title>  
                </head>  
                <body>  
                        <map name="haus">  
                        </map>  
                        <script type="text/javascript">  
        [code lang=javascript]                        window.alert(document.getElementsByName("haus")[0].nodeName);
        

        </script>
                </body>
        </html>[/code]

        (vom fehlenden DOCTYPE und Inhalt des 'map'-Elements mal abgesehen)

        Qapla'

        --
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
      3. <body onLoad="javascript:laden()">

        Das Event-Handling des load-Ereignisses kann man auch direkt im JavaScript notieren:

        window.onload = laden;

        Ist es also grundsätzlich so dass auf den DOM-Tree nie einfach so im <script></script> Teil zugegriffen werden kann, sondern dass man den code über Events triggern muss?

        Ein Script hat Zugriff auf die Elemente vor dem zugehörigen script-Element. Aber generell macht es Sinn, Scripte aus dem HTML auszulagern und die Initialisierungsfunktionen auszuführen, sobald das Dokument geladen ist.

        Mathias

        1. @@molily:

          nuqneH

          Aber generell macht es Sinn, Scripte aus dem HTML auszulagern

          ACK.

          und die Initialisierungsfunktionen auszuführen, sobald das Dokument geladen ist.

          Njein.

          Qapla'

          --
          Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
          1. und die Initialisierungsfunktionen auszuführen, sobald das Dokument geladen ist.

            Njein.

            Das mag von einem High-Performance-Standpunkt Sinn machen. Das ist für mich eine Optimierung ist, die man einsetzen KANN, wenn man klassisches Event-Handling gut verstanden hat. Ich setze es so radikal sehr selten ein und rate zunächst zu unobtrusive DOM Scripting. Standard in der JavaScript-Entwicklung ist die Nutzung von DOM-ready-Lösungen, bei denen egal ist, an welcher Stelle man die Scripte notiert, also eine spätere Änderung und Optimierung möglich ist. Aus Sicht von wiederverwendbaren Scripten, die nicht von einer bestimmten script-Position im Dokument abhängen, macht das m.E. immer Sinn.

            Die elaborierten unter den DOM-ready-Lösungen, die in den großen Bibliotheken verbaut sind, prüfen im Übrigen nicht nur den Zugriff auf das volle DOM, sondern auch den Ladezustand von Stylesheets, weil viele Scripte die gerenderten Element-Zustände benötigen. Ich weiß nicht, ob das zwingend gegeben ist, wenn das script-Element nach dem entsprechenden link@rel=stylsheet-Element auftaucht. Ich würde jedem raten, sich an die Best Practises zu halten, die gut erforscht sind sowie robust und flexibel im Einsatz sind. Das ist m.M.n. DOM-ready als Stand der Technik.

            An welcher Stelle man Script platziert, hängt auch einfach davon ab, was sie tun und wie wichtig das Anwenden des DOM Scriptings im Vergleich zum schnellen Aufbau des Dokuments ist. Wenn zahlreiche Funktionen des Dokuments mit JavaScript hinzugefügt werden, dann habe ich wenig davon, wenn dicke Scripte am Ende geladen werden und ein »Flash of unscripted document« stattfindet. Üblicherweise bauen Unobtrusive-Scripte Inhalte ins DOM ein wie z.B. Links und Schaltflächen. Wenn das erst zwei Sekunden nach dem Aufbau des Dokuments passiert, habe ich keine verbesserte User-Experience. Nicht zuletzt gibt es einfach Scripte, die so früh wie möglich ausgeführt werden müssen, weil sie die Grundlagen für das darauffolgende DOM-Scripting legen (man denke etwa an document.documentElement.className = "js").

            Mathias

  2. Hi Niehztog!

    Abgesehen davon dass ein leeres Imagemap nicht viel Sinn macht, was ist da falsch? (Nutze Firefox 3.0.11)

    Du greifst auf ein Element zu, dass nicht existiert.
    Was nicht verwunderlich ist, da dem Browser in diesem Moment nur alles oberhalb des Skriptcodes bekannt ist.

    Du solltest dir das onload-Event anschauen.
    Um mehrere Funktionen onload auszuführen, kannst du eine Funktion wie addLoadEvent() nutzen.

    MfG H☼psel

    --
    "It's amazing I won. I was running against peace, prosperity, and incumbency."
    George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
    Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
    1. Um mehrere Funktionen onload auszuführen, kannst du eine Funktion wie addLoadEvent() nutzen.

      Danke, Danke, die Funktion klappt hervorragend. Sehr hilfreich!