3 DOM Topics I'm Going to Master

It seems there are a million different ways the DOM allows HTML and Javascript to interact. Here are a few pretty cool properties and methods that could be used to add interesting interactivity and spontaneity to webpage.


1. Object.getOwnPropertyNames()

This method seems very useful because it interacts with many different elements and makes them accessible in an efficient and easily read format. When invoked, Object.getOwnPropertyNames() returns an array type variable of all properties associated with a given object. From there, it would be simple to parse this array into the sections that you are interested in and react based on what was returned. If you wanted to drastically change the appearance or content of a given object, Object.getOwnPropertyNames() would be a good option because it would provide all possible properties with one line of code and in one array. Check it out via the link below!

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames

2. Object.assign()

Often times there are multiple object elements on a page that share very similar or identical style attributes. Furthermore, in an interactive webpage it would be helpful to the viewer to assign similar object elements with similar attributes in order to convey relationships and paths. Object.assign() makes this task easy! Object.assign() take all properties of a given source and copies them to the target. This way, you can easily make one object element formatted exactly like another. Check it out in the link below!

http://www.2ality.com/2014/01/object-assign.html

3. document.forms.length

With forms being an integral part of user interaction on the internet, different and innovative ways to interact with forms enhances our ability to produce an attractive and coherent user experience. When document.forms.length is invoked, it returns the number of form elements in a collection. This operation could be very useful in validating the way in which a given user has used the form. Many forms have options, say a selectable list, that when selected adds another form box to the page for additional information. For example, if a form was asking for your occupation and had a long list of different occupations, at the bottom it might have an "other" option that when selected makes another form input element appear to enter your "other" occupation. If a form had multiple instances of this, it could be very helpful for the designer to use document.forms.length in order to know how many form elements are on a given page. With this information the designer could add functionality that interacts with the users unique input.

http://www.w3schools.com/jsref/coll_doc_forms.asp