Welcome to DavisDay.com! Enjoy Your Visit!

DOM API

The DOM API - What it is

The Document Object Model (DOM) is a built in object, representing a page loaded into a browser page. Although, while not being a part of JavaScript, it specifies how JavaScript accesses and updates contents of a web page. The Application Program Interface (API) allows users to interact with programs. This program allows the DOM script to be read, allowing the access and updates of content. The DOM API represents a model tree with objects, and each object represents unique parts of a browser page.


DOM Queries

Document Object Model queries are methods that find elements in the DOM tree. Storing elements in variables is taking a variable, and using that to store the location of an element within the DOM tree. Using the DOM script to store elements makes the elements become usable multiple times. This is beneficial for the browser, as it does not have to loop through the DOM tree to find the same elements multiple times. A Document Object Model query can either return an element, a node, or a collection of nodes.


Using the DOM To Add Elements

The Document Object Model in HTML can create new elements using document.createElement and .append. The document.createElement can be created by either specifying the tag name, or by being being unknown if the tag name isn't recognized. The tag name requires parameters to specify the element type. Lists, divs, and more can be created as element types. The .append object specifies the type if a document is created as a child through inheritance.

                
                    
                    var paragrpah = document.createElement("p")

                
            

This code creates a new paragraph.


The SetAttribute() Method of the DOM

Unlike the document.createElement, the SetAttribute method doesn't make anything new. Instead, this DOM method uses what is already there, but modifies it, instead of hard-coding individual changes. This becomes helpful when multiple different tags need to be chaged at once, or to change a modification back to what it was without losing work previously done. Styles can be changed using the SetAttribute method. Although, to not overwrite CSS properties, the Style Object properties should be used.

                
                    
                    var attributeOne = document.getElementById('one');
                    attributeOne.className = 'firstAttribute';

                    attributeOne.style.backgroundColor = "yellow";

                
            
This code changes the attributeOne class to firstAttribute, and then changes the color of the element to yellow.