windowobject. Think of the window as the browser window. The
windowcontains the entire DOM document. All components of your HTML file will be accessible from within the window.
windowobject has a large number of properties that return information about the object. Below are a few examples
window.document; //returns the entire HTML document window.innerWidth; // returns the inner width of the browser window. Open a console in the browser and enter this. Then shrink the browser window and run it again. You should get a different value. window.innerHeight; // returns the inner height of the browser window.
documentobject represents any web page loaded in the browser. The
documentcontains all the nodes that represent the HTML elements of the page. We use the
documentobject to traverse through the HTML and manipulate elements.
documentproperties that allow us to obtain information about the
document.all; // returns all the nodes inside the document object document.contentType; // returns the type of content contained. Most web pages should return "text/html" document.URL; // returns the URL of the document object
Below the document are all the nodes representing the HTML or XML elements on the page.
We can alter the DOM through several different ways:
element.attributesgives you access to its attributes.
addEventListener. Elements emit an extensive array of events.
document.getElementsByTagName("p"); //returns all p tags on a page // alternatively, we could do document.querySelectorAll('p'); // the results of these two functions // are the same in this example, but as // we'll see later, getElementsByTagName // and querySelectorAll have different uses
Lots of developers use a library called jQuery for interacting with the DOM. The jQuery library provides a
jQuery function (aliased as
$), which wraps
document.querySelectorAll() and adds a bit of magic.
We could write the above example in jQuery as
View The DOM on Learn.co and start learning to code for free.