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.<\/p>\n
So, enough introduction. What follows is one single function performing stupid javascript actions with the Document Object Model<\/a>. 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:<\/p>\n I think the code is document good enough, feel free to play around with it.<\/p>\n 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 … Weiterlesen \n
\n
\n
\r\n<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <script>\r\n function doStuff()\r\n\t{\r\n\t\tvar container = document.createElement("div"),\r\n\t\t\th1 = document.createElement("h1"),\r\n\t\t\ttext = document.createTextNode("important headline"),\r\n\t\t\tbody = document.getElementsByTagName("body")[0];\r\n\t\t\r\n\t\t\/\/add the text 'important headline' to the h1\r\n\t\th1.appendChild(text); \r\n\t\th1.className = "headline"; \r\n\t\t\/\/add <h1>important headline<\/h1> to the container\r\n\t\tcontainer.appendChild(h1); \r\n\t\tcontainer.setAttribute('id','wrapper');\r\n\t\t\/\/add the container with h1 and \r\n\t\t\/\/text to the body (make it visible)\r\n\t\tbody.appendChild(container); \r\n\t\t\r\n\t\t\/*\r\n\t\tMarkup is now:\r\n\t\t<body>\r\n\t\t\t<div id="wrapper">\r\n\t\t\t\t<h1 class="headline">wichtige \u00dcberschrift<\/h1>\r\n\t\t\t<\/div>\r\n\t\t<\/body>\r\n\t\t*\/\r\n\r\n\t\t\/\/DIV == DIV -> true\r\n\t\t\/\/tagName is basically the same as nodeName, \r\n\t\t\/\/except for the behaviour with text nodes\r\n\t\talert(body.children[0].tagName == h1.parentNode.tagName); \r\n\t\t\t\r\n\t\t\/\/uh oh, we "accidently" deleted the container \r\n\t\t\/\/variable (not the container itself)\r\n\t\tcontainer = null; \r\n\t\t\r\n\t\t\/\/so we get it again\r\n\t\tcontainer = document.getElementById("wrapper"); \r\n\t\t\r\n\t\t\/\/some css stuff\r\n\t\tcontainer.style.setProperty("border","4px solid red");\r\n\t\t\/\/overwrites all previous styles like the border set before\r\n\t\tvar cssText = 'color:blue;text-decoration:underline;';\r\n\t\tcontainer.style.cssText = cssText; \r\n\t\t\/\/other way to do that: container.setAttribute('style',cssText);\r\n\t\t\r\n\t\t\/\/make it black again\r\n\t\tcontainer.style.removeProperty("color"); \r\n\t\t\r\n\t\t\/\/set name\r\n\t\th1.setAttribute("name","theName"); \r\n\t\talert(h1.getAttribute("name")); \r\n\t\t\/\/and remove its class\r\n\t\th1.removeAttribute('class'); \r\n\t\th1.innerHTML = "my new headlinetext";\r\n\t\t\r\n\t\t\/\/ah damn, same again ;)\r\n\t\th1 = null;\r\n\t\t\r\n\t\t\/\/recover h1\r\n\t\th1 = document.getElementsByName("theName")[0];\r\n\t\t\r\n\t\t\/*\r\n\t\tmarkup is now:\r\n\t\t<body>\r\n\t\t\t<div id="wrapper" style="text-decoration: underline;">\r\n\t\t\t\t<h1 name="theName">my new headlinetext<\/h1>\r\n\t\t\t<\/div>\r\n\t\t<\/body>\r\n\t\t*\/\r\n\t\t\r\n\t\tvar span = document.createElement("span");\r\n\t\tspan.appendChild(document.createTextNode("here comes the span"));\r\n\t\tcontainer.insertBefore(span,h1);\r\n\t\t\r\n\t\t\/*\r\n\t\tmarkup is now:\r\n\t\t<body>\r\n\t\t\t<div id="wrapper" style="text-decoration: underline; ">\r\n\t\t\t\t<span>here comes the span<\/span>\r\n\t\t\t\t<h1 align="center">my new headlinetext<\/h1>\r\n\t\t\t<\/div>\r\n\t\t<\/body>\r\n\t\t*\/\r\n\t\t\r\n\t\talert(h1.previousSibling.tagName == span.tagName); \/\/span == span\r\n\t\talert(span.nextSibling.tagName == h1.tagName); \/\/h1 == h1\r\n\t\t\r\n\t\tcontainer.removeChild(h1); \/\/and the headline is gone\r\n\t\t\r\n\t\t\/*\r\n\t\tmarkup is now:\r\n\t\t<body>\r\n\t\t\t<div id="wrapper" style="text-decoration: underline; ">\r\n\t\t\t\t<span>here comes the span<\/span>\r\n\t\t\t<\/div>\r\n\t\t<\/body>\r\n\t\t*\/\r\n\t}\r\n \r\n window.onload = doStuff;\r\n <\/script>\r\n <\/head>\r\n <body>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"