Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
71 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 02.08.2020 17:34:28 aktualiesiert
71

Was Sie über das DOM wissen müssen: 20 Funktionen in 100 Zeilen

Was folgt, ist eine einzelne Funktion, die dumme Javascript-Aktionen mit dem Dokumentobjektmodell ausführt. Obwohl jeder vernünftige Entwickler die Verwendung einer Bibliothek wie jQuery für solche Dinge bevorzugt, ist es immer gut zu wissen, was sich hinter den Kulissen abspielt. Was ich behandelt habe, sind die folgenden Funktionen:

  • document.
    • createElement
    • createTextNode
    • getElementsByTagName
    • getElementsByName
    • getElementById
  • node.
    • appendChild
    • removeChild
    • className
    • setAttribute
    • getAttribute
    • children
    • tagName
    • parentNode
    • style.setProperty
    • style.removeProperty
    • style.cssText
    • innerHTML
    • insertBefore
    • previousSibling
    • nextSibling

Ich denke, der Code ist gut genug dokumentiert, zögern Sie nicht, damit herumzuspielen

<!DOCTYPE html>  <html>      <head>      <script>      function doStuff()  	{  		var container = document.createElement("div"),  			h1 = document.createElement("h1"),  			text = document.createTextNode("important headline"),  			body = document.getElementsByTagName("body")[0];  		  		//add the text 'important headline' to the h1  		h1.appendChild(text);   		h1.className = "headline";   		//add <h1>important headline</h1> to the container  		container.appendChild(h1);   		container.setAttribute('id','wrapper');  		//add the container with h1 and   		//text to the body (make it visible)  		body.appendChild(container);   		  		/*  		Markup is now:  		<body>  			<div id="wrapper">  				<h1 class="headline">wichtige Überschrift</h1>  			</div>  		</body>  		*/    		//DIV == DIV -> true  		//tagName is basically the same as nodeName,   		//except for the behaviour with text nodes  		alert(body.children[0].tagName == h1.parentNode.tagName);   			  		//uh oh, we "accidently" deleted the container   		//variable (not the container itself)  		container = null;   		  		//so we get it again  		container = document.getElementById("wrapper");   		  		//some css stuff  		container.style.setProperty("border","4px solid red");  		//overwrites all previous styles like the border set before  		var cssText = 'color:blue;text-decoration:underline;';  		container.style.cssText = cssText;   		//other way to do that: container.setAttribute('style',cssText);  		  		//make it black again  		container.style.removeProperty("color");   		  		//set name  		h1.setAttribute("name","theName");   		alert(h1.getAttribute("name"));   		//and remove its class  		h1.removeAttribute('class');   		h1.innerHTML = "my new headlinetext";  		  		//ah damn, same again ;)  		h1 = null;  		  		//recover h1  		h1 = document.getElementsByName("theName")[0];  		  		/*  		markup is now:  		<body>  			<div id="wrapper" style="text-decoration: underline;">  				<h1 name="theName">my new headlinetext</h1>  			</div>  		</body>  		*/  		  		var span = document.createElement("span");  		span.appendChild(document.createTextNode("here comes the span"));  		container.insertBefore(span,h1);  		  		/*  		markup is now:  		<body>  			<div id="wrapper" style="text-decoration: underline; ">  				<span>here comes the span</span>  				<h1 align="center">my new headlinetext</h1>  			</div>  		</body>  		*/  		  		alert(h1.previousSibling.tagName == span.tagName); //span == span  		alert(span.nextSibling.tagName == h1.tagName); //h1 == h1  		  		container.removeChild(h1); //and the headline is gone  		  		/*  		markup is now:  		<body>  			<div id="wrapper" style="text-decoration: underline; ">  				<span>here comes the span</span>  			</div>  		</body>  		*/  	}            window.onload = doStuff;      </script>      </head>      <body>      </body>  </html>