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>