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>
<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>
Mein Name ist