Sie sind hier : sebastian1012.bplaced.net/ homepage-neu / Themen-Blog1 / what-you-need-to-know-about-the-dom-20-functions-in-100-lines.php

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>