- The source code examples in this post are on Github
1.1 - Get a reference to an element
There is a lot more to get into when it comes to the various ways to go about getting a reference to an element in html, including options like the document body, and document title properties just to name a few. However there is not just getting a single element object reference, but also a collection of elements that meet a given condition also, when it comes to this of course there are also some methods to use in the document object.
1.2 - Get a collection of elements
There is also not just getting a single element object reference but a collection of elements in the form of a NodeList or an HTMLCollection. These collections are array like objects in the sense that they are formated like arrays, but are of there own prototype and as such the same array methods in the array prototype are not always there to work with. There are reasons why that is, but I should maybe get into those things in a more advanced section in this post.
In this example I am using the query selector all method of the document object to get a node list of all the elements in the html that contain a certain class.
1.3 - Attaching Events to the document object
When it comes to attaching events to the document object there are a number of options when it comes to global events, as well as a number of events that have to do with just the document object that are worth looking into in greater detail.
For this example I am just attaching a client event to the document object, when I do this I the event hander that I attach will fire for any element that I click on in the page. Inside the body of the event hander I have access to an event object that will be passed by way of the first argument for the event hander function. This event object contains many useful properties such as the target property that is a reference to the element that was clicked.
1.4 - The Location object
Another major feature of the document object would be the location object that is attached to the location property of the document object. This object contains the href property that is the url of the current page, the property can also be set to a new url that will cause a redirection to that url. There are also all kinds of properties and methods in the object that can be used to extract useful information and do things like reload the page.
2 - Getting Element Object references in detail
2.1 - By id and class
In the basic section I have all ready covered the tired yet true document get element by id method, but there is also the question of getting one or more elements by a class name rater than an id also. Event when it comes to that I also covered the use of the quest selector all method as a way to get a collection of elements that way. However I did not write about the get elements by class name method also in the document interface. This get elements by class name method is another option when it comes to getting a collection of elements by class name, it may be a little more restricted co pared to the query selector method however there is one note worthy difference. The get elements by class name method will return an HTML collection object rather than a Node list object.
I should get more into what the differences is between HTML Collections and Node lists, but maybe that is a matter for another examples, section or even a whole other post. For now at least there is just being mindful that there is more than one tool in the toolbox when it comes to grabbing at elements, and there is more than one standard when it comes to collections of elements, or nodes in general.
2.2 - The query selector, and query selector all methods
In the basic section of this post I used the query selection all method to get a collection of elements by class name. So then once again I want to have a quick example of this method when it comes to getting a collection of elements in the from of a Node List rather than an HTML Collection. There is also the query selector method that works just like the query selector all method only it will return an element object reference. So then that method can be used as a replacement for the get element by id method as it can be used to just get a single element by id, as well as by class and tag name. The only draw back about these methods is that they will not work on very old browsers, but that becomes less of a problem every day.
3 - Create and remove elements
There is getting one or more references to elements that are hard coded into html, but there is also the question of creating additional elements and appending them into the existing html. Also I can not really write about the topic of creating elements without at least going over one or more examples of removing them also. ALthiigh there may not be any methods that have to do with removing elements there sure are methods that can be used to select one or more elements that can then be removed by calling the remove method of an element object reference.
3.1 - The document create element method
The create element method of the document object is the main method to use to create any HTML element, such as canvas elements. With that said in this example I am using the create element to do just the create, and inject a canvas element that I then draw to with the 2d drawing context.
The first step would be to get a mount point where I would want to append a canvas element, for this I can use any of the meth9ds that I have covered in the above sections such as the get element by id method. Now that I have something that I can append an element to there is then creating the element with the create element method by just calling the method and passing a string that is the name of the element that I wan to create which in this case is canvas. What is returned by the create element method is then a new element object that is a canvas element, at this point I can start to do things with the element such as setting the native size and getting a reference to the 2d drawing context sense it is a canvas element.
Once I create my new element object, and do anything that I might want to do before appending to the hard coded html, I can then do jst that append it. For this I call the append child method of the container element object reference and pass the new element object that is to be appended to the container element. After that I am just drawing to the canvas element with the 2d context methods.
3.2 - Removing elements
There does not seem to be any methods in the document interface that have to do with removing elements. However there are a number of methods that can be used get one or more references to elements, and there is the remove method of an element object.
4 - Conclusion