What you need to know about the DOM: 20 functions in 100 lines

Okay, first english article. I’m feeling kind of stupid when posting code related topics in German so I’m gonna try to bring some english content in here. Personally I think that comments, variable names and everything code-related should be written in english – considering multi-national development teams.

So, enough introduction. What follows is one single function performing stupid javascript actions with the Document Object Model. Even though every sane developer prefers the use of a library like jQuery for stuff like that, it’s always good to know what goes on behind the scenes. What I’ve covered are the following functions:

  • 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

I think the code is document good enough, feel free to play around with it.

<!DOCTYPE html>
    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.className = "headline"; 
		//add <h1>important headline</h1> to the container
		//add the container with h1 and 
		//text to the body (make it visible)
		Markup is now:
			<div id="wrapper">
				<h1 class="headline">wichtige Überschrift</h1>

		//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
		//set name
		//and remove its class
		h1.innerHTML = "my new headlinetext";
		//ah damn, same again ;)
		h1 = null;
		//recover h1
		h1 = document.getElementsByName("theName")[0];
		markup is now:
			<div id="wrapper" style="text-decoration: underline;">
				<h1 name="theName">my new headlinetext</h1>
		var span = document.createElement("span");
		span.appendChild(document.createTextNode("here comes the span"));
		markup is now:
			<div id="wrapper" style="text-decoration: underline; ">
				<span>here comes the span</span>
				<h1 align="center">my new headlinetext</h1>
		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:
			<div id="wrapper" style="text-decoration: underline; ">
				<span>here comes the span</span>
    window.onload = doStuff;

Weitere Posts:

Dieser Beitrag wurde unter Javascript, Security, webdev veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert