It\u2019s been an awesome summer, with temperatures soaring in the global warming range throughout our northern country. The heat has given me ample reason to not be near a computer, but now it\u2019s time to mine some JavaScript wisdom again. Here\u2019s the second part of my JavaScript for Google Tag Manager<\/a> series. The first part<\/a> focused on GTM specific tips and tricks, and I hope that while reading it, you were treated to another grand example of the flexibility of this wonderful tool.<\/p>\n This second part was supposed to be more about general JavaScript practices, but I saw myself going back to the DOM with every step. So the theme here is the elusive Document Object Model. It\u2019s a defining quality of JavaScript in web development, and understanding its mechanics is key to understanding how tag management solutions work as well.<\/p>\n Here\u2019s the list of topics:<\/p>\n The Document Object Model (DOM)<\/p>\n<\/li>\n The DOM API<\/p>\n<\/li>\n JavaScript injection + GTM<\/p>\n<\/li>\n Handling false<\/p>\n<\/li>\n<\/ol>\n Here we go again. I implore you to take a look at the list of resources<\/a> I linked to in the previous post. They should serve you really well in your journey towards JavaScript enlightenment.<\/p>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n Here\u2019s a very, very simplified account of how a browser works:<\/p>\n The browser sends a request to the web server to retrieve a web document<\/p>\n<\/li>\n This document is just an annotated source code file, so it needs to be parsed into a format the browser can interpret<\/p>\n<\/li>\n The document is parsed into a parsed node tree, whose syntax is very standardized<\/p>\n<\/li>\n The node tree is then rendered as a web page, which can be viewed in the browser window<\/p>\n<\/li>\n The node tree is actually the Document Object Model (DOM), which also provides an interface for interacting with elements in the tree<\/p>\n<\/li>\n<\/ol>\n In short, what you see when looking at the page source<\/strong> of a web page in your browser is just that: the source code of the page. It isn\u2019t the final<\/em> product, since the source code is parsed into a format which can be better understood by browsers.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n If you\u2019ve messed around with a tag management system or with JavaScript, chances are you already know all this. The DOM is both a representation of on-page elements and an interface<\/em> (more on this in the next chapter) which describes a standard for interacting with these elements. It\u2019s called the Document Object<\/strong> Model because the HTML elements you lovingly create in your source code are represented as objects, or nodes, or branches of a tree, in a top-level object called document<\/strong>. So when you tag<\/em> a section of text as a DIV element in HTML, you are actually creating a new node with tag name DIV into the document hierarchy as a new element that can be interacted with.<\/p>\n So the DOM and your HTML document are related, in that they share the same elements, but they are not the same thing. The DOM is the browser\u2019s interpretation of the HTML document. The fact that it\u2019s standardized makes sure that all your sloppiness in HTML markup is glossed over in a perfectly structured DOM.<\/p>\n If you want to take a look at what the document object looks like for any given page, just open a JavaScript console, type <\/p>\n <\/a><\/p>\n<\/div>\n Almost all JavaScript that interacts with a page (such as analytics tags) utilizes the DOM. This is because representing a document with a collection of objects allows for scripting languages such as JavaScript to mimic the syntax of more traditional, object-oriented programming languages. Also, using a standardized set of objects and functions in the DOM normalizes the potentially chaotic and horrible markup that many, many web pages out there display.<\/p>\n The thing about the DOM is that if you understand its basic functions and if you read up on the standard, you should be inspired to create better markup as well. If the ID attribute was just a CSS selector to you before, after realizing what a crucial part it plays in the unique identification of a single DOM node, you\u2019ll be more inclined (hopefully) to utilize it in the future in all relevant markup situations.<\/p>\n The DOM is a huge standard and there\u2019s lots to learn. The best way to learn is to inspect objects in the model by utilizing the JavaScript console. Reading up on GTM articles is a good way to brush up your skills as well, since almost all GTM customizations have to do with manipulating the DOM in some way.<\/p>\n There\u2019s also the Browser Object Model (BOM), which is a de facto standard for interacting with the browser window. The BOM houses the window<\/strong> object, which, in turn, contains all the global variables and functions of the page AND the document object. So when you type Confusing? Perhaps, but in the end it\u2019s all quite logical. The DOM is a necessary interface between the client and the HTML document, because so much of today\u2019s web development revolves around dynamic and often subtle modification of the web pages. That\u2019s how you get your animations, transitions, event handlers and so forth to work.<\/p>\n FURTHER READING:<\/strong><\/p>\n The DOM API is actually the DOM itself (remember, it\u2019s a standard for interacting with the document), but for clarity\u2019s sake I use the term API here (a<\/strong>pplication p<\/strong>rogramming i<\/strong>nterface). Interacting with the document is done via the methods and objects exposed by the API.<\/p>\n When using JavaScript (as most often is the case) to interact with the DOM, all calls should naturally be in the context of a There are many functions and objects you can access via the DOM, so I won\u2019t go into too much detail here. However, I will add an example of what DOM manipulation means in terms of HTML vs. JavaScript. Here\u2019s a typical HTML passage in a normal web page:<\/p>\n So there are some unique elements where I utilize the ID attribute, and some elements which are reused, represented by the CLASS attribute. It\u2019s important to remember that if you use ID, you should only ever have one such element on the page. Otherwise you will make life difficult for anyone wishing to manipulate the element using the DOM API (plus it won\u2019t be valid HTML).<\/p>\n Here are some examples of JavaScript functions I can use to interact with the document:<\/p>\n This stores the whole #content node with all its children into the JavaScript variable Changes the ID attribute of the #content DIV to #main-content. Here I utilize the JavaScript object where I stored the entire #content node just before.<\/p>\n Stores all elements with CLASS .paragraph in an Array object referred to as Writes the entire HTML content of the first P element with class .paragraph into the console.<\/p>\n Pops up a dialog box with the number of child nodes for the HTML element with ID #request-access. In this case, the alert will contain the number 1.<\/p>\n There are many, many ways to interact with the document, its objects and functions using the interface of the DOM. You should be pretty comfortable with these especially if you want to do some advanced tag management and web analytics tweaking.<\/p>\n FURTHER READING:<\/strong><\/p>\n Now that you understand perfectly how the DOM works, you\u2019re ready for the next big thing: code injection.<\/p>\n\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n1. The Document Object Model (DOM)<\/h2>\n
\n
![\"How](\"https:\/\/www.simoahava.com\/images\/2014\/07\/browser-function.jpg#ZgotmplZ\")
<\/p>\ndocument<\/code> and press enter.<\/p>\n![\"Document](\"https:\/\/www.simoahava.com\/images\/2014\/07\/document-object.jpg#ZgotmplZ\")
<\/p>\ndocument<\/code> in the JavaScript console, you are actually accessing the window.document<\/code> object.<\/p>\n2. The DOM API<\/h2>\n
div id<\/span>=\"content\"<\/span>>\n span class<\/span>=\"header\"<\/span>>Why Four Strings Is Enoughspan<\/span>>\n p class<\/span>=\"paragraph\"<\/span>>Many dismiss the ukulele because it only has four strings. However, it has more strings than a typical balalaika.p<\/span>>\n div id<\/span>=\"request-access\"<\/span>>\n p class<\/span>=\"paragraph\"<\/span>>Request access to ukulele vault by sending mail to span class<\/span>=\"email\"<\/span>>[email\u00a0protected]<\/a>span<\/span>>p<\/span>>\n div<\/span>>\ndiv<\/span>><\/code><\/pre>\n<\/div>\nvar<\/span> content = document<\/span>.getElementById(\"content\"<\/span>);\n<\/code><\/pre>\n<\/div>\ncontent<\/code>. I can then use other functions of the DOM to manipulate the node further.<\/p>\ncontent.setAttribute(\"id\"<\/span>, \"main-content\"<\/span>);\n<\/code><\/pre>\n<\/div>\nvar<\/span> classArray = document<\/span>.getElementsByClassName(\"paragraph\"<\/span>);\n<\/code><\/pre>\n<\/div>\nclassArray<\/code>.<\/p>\nconsole.log(classArray[0<\/span>].innerHTML);\n<\/code><\/pre>\n<\/div>\nalert(document<\/span>.getElementById(\"request-access\"<\/span>).children.length);\n<\/code><\/pre>\n<\/div>\n3. JavaScript injection + GTM<\/h2>\n
![\"Example](\"https:\/\/www.simoahava.com\/images\/2014\/07\/injection-example.jpg#ZgotmplZ\")
<\/p>\n