STORING DOM ELEMENTS IN VARIABLES
You have elements in your DOM that you want to manipulate or work with without having to repeatedly type out: 'document.getElementById('elementID')', everytime you want to reference a DOM element. Instead you can store references to DOM elements into constant elements. For example:
Storing DOM element references can be used with single and multiple element methods.
BUILT IN METHODS FOR WORKING WITH SINGLE OR MULTIPLE DOM ELEMENTS
JavaScript contains built in methods in it's libraries for dealing with single and multiple DOM elements:
SINGLE ELEMENT METHODS
'.querySelector('elementID')'
-This method gets first element that meets search query
'.getElementById('elementID')'
-This method gets reference to element containing unique ID
MULTIPLE ELEMENT METHODS
'.getElementsByClassName('class')'
-This methods gets all elements that contain specified class name
'getElementsByTagName('div')'
-This method gets all elements that contain specified tag name
'.querySelectorAll('div1')'
-This method gets all elements that contain specified class, id, or search query
The example above reveals an unordered list with four items and in the javascript file it is getting reference to the unodered list using the 'getElementById' method and storing it into the constant variable 'list'. Then in the example it creates a const 'elementItem2 to get all the elements containing the 'attack' class which would be two elements in this example, the listed items 'SWORD' and 'STAFF'
CREATING DOM ELEMENTS
Ontop of referencing DOM elements and storing them into variables, you can also create DOM elements and much more. Right now we are going to focus on creating new DOM elements. To create new DOM elements you can use the DOM method :
As you can see, it's not too hard to create a new DOM element using javascript. The syntax is typing in 'document' and then add the method 'createElement' onto it and specifying the element you want to create, for example, if you want to create a new paragraph element you put the value 'p' within the parenthesis.
MODIFYING DOM ELEMENTS
You can also modify DOM elements, such as changing what the inner text of a paragraph element is, adding classes or id's to elements.
One way to go about changing the DOM elements is to use the method '.innerHTML'.
The example above shows a constant newDiv which references the new 'div' element created. The 'newDiv' variable has it's value modified using the '.innerHTML' method.
You can also use the '.contentText' method to change the inside value of element. Syntax:[newDiv.contentText = "Hello World"]
If you want to 'reset'or change the value of an element to nothing, you can use the 'contentText' or '.innerHTML' method and setting the value to an empty set of quotations [""]
APPENDING ELEMENTS
A useful thing you can do is append elements onto other elements. One example of this would be to have an ordered list element and you want to create 'li' elements to append onto the ordered list.
To do this you create your listed item element and modify your element as you want such as adding a class onto the element. When you are done modifying your 'li' element, you can type name of parent element followed by [.appendChild('listElement')] where listElement is the name of the element you want to append.
USING FOR LOOPS WITH APPENDCHILD()
Sometimes you are dealing with an array of data and you want to iterate through every element in the array and append it to another element. You can achieve this by using a 'forEach' method on an array and in the callback function for the forEach method, somewhere in there most likely somewhere around the end, you add [element.appendChild('childElement')], where element is the name of the element you wish to append child element to and, 'childElement' represents the child element. Using for loops with other methods such as appendChild() works well in situations where you need to repeat the same method over many times and this may help keep your code looking cleaner too.
COMMENTS ARE HELPFUL
Don't forget we can use comments to inform us or readers about certain points of the code or what area of code is doing or represents. Adding code at certain points in code such as at the beginning of a function with a few words to descript the function can help explain what is happening in the code. This may be common sense in the coding world but for those who may have overlooked commenting or forgot about it, its there and its very useful for the user and others that read your code.
Top comments (0)