One way to go about getting a reference to an element is by way of an elements id attribute. The typical way to go about getting a reference to an element by way of an id attribute would be to use the document.getElementById method of the document object. There are other ways of getting a reference to an element by id, and of course many other ways to get references to elements by other aspects of an element, but this is one of the more tired yet true ways to do so that have been around for a great while now.
The use of the method is simple enough, just call the method off of the document object, and pass a string that is the id of the element that you want as the first and only argument. If all goes well the value that is returned should be a reference to the desired element with the set id attribute if such an element is there in the HTML.
Works fine assuming that the desired element has an id, and you know what it is. No worries there is of course a great deal of other ways to go about grabbing an element when you do not have one. Also when you do have one there are lots of ways to go about getting references to other child and parent elements. In this example you might have noticed that I am using the children HTML collection of the reference to the div as a way to access another reference that is a child of the one that I obtained by way of the document.getElelementById method.
When making a complex project in which document.getElementById is going to be called many times there might be a desire to wrap the method in another method that will just serve as a more concise way of doing the same thing. There is not much wrong with just repeating the lengthly method over and over again really, it is just the many would say that it looks bad.
If document.getElementById is only used once or twice there is no need, but at some point it might be a good move to do something like this. The other option is to find other ways of going about getting and working with html collections rather than just a single element. The document.getElementById method is just one tool in the toolbox after all, so maybe a better option would be to drop the use of the method all together, and get at your html code by some other means.
So one of the many alternatives to getElementById is the document.getElementsByClassName method that will get a collection of elements by way of class name rather than by id. So then as the name suggests this method will return an HTMLcollection rather than just a single element reference where each of the elements in the collection has the given class name when calling the method.
An HTMLCollection is not an Array, but it is an Array like object, so Array methods can be used via Function.call and doing so will work okay ore often than not as long as it is a read only like method. You might still see this used in code examples now and then, but as of late there is more modern alternatives such as querySelectorAll that might prove to be a better option as that can be used to get by class also as well as many other ways, more on that one later.
There is also a way to get a html collection of all elements of a given tag name such as div rather than any elements that have a class name or just one element by id. This method would be the document.getElementsByTagName method that like the get elements by class name will also return an html collection of all elements that are of a given tag..
Just like document.getElementBy id this is a tired yet true method that will work in really old browsers, and still works just fine if I just want to get elements by a tag name. However when it comes to not caring so much about code breaking on old browsers any more there is again document.querySelector and document.querySelectorAll that are flexible methods that can do everything that these tired yet true methods do and more.
For example if I want to get all elements that are of a given class like the document.getElementsByClassName method for that I can call document.querySelectorAll and pass a string that begins with a dot which means I want to select by class name, and then the name of the class.
There are also references to other elements in the element objects themselves such as the parentNode and children properties of element objects, however maybe that is all a matter for another post.