DOM

“Document Object Model”

Links:  API  — Enligh  —  SitePoint  —  MDN  —  U-NotNeed  — CanIUse —

Tutorials:  Tutorial  —  Node.xyz  — DOM


The following is a brief list of common APIs in web and XML page scripting using the DOM.

QuerySelector();

QuerySelector will return only one Item.  you provide the “ID” or “Class Name”

If you want to grab all of them:

JQuery

This will return only One

If you want to grab all of them, use two $

Monitoring Events

Every time we “click” on the Element wit Id=”div-7″ we will see and get a response printed, on the console

 

 

 

x


Targeting

You can target elements by:

  • Finding HTML elements by id
  • Finding HTML elements by tag name
  • Finding HTML elements by class name
  • Finding HTML elements by CSS selectors
  • Finding HTML elements by HTML object collections

Examples

In the last example “Finding HTML Elements by HTML Object Collections” we use “.forms” but you can use other HTML Objects:

The following HTML objects (and object collections) are also accessible:

Dig Deep

The methods “getElementsBy….” are aplicable to the return elements, so we search on them or as we call it: Dig Deep.


Console Inspection

To see it on the console you can type: document

The window Reference object that contain all the JavaScript API’s, Default Functions, the Document and more: window

the javaScript Document Object can be access with: dir(document);

Example: dir(document.getElementById(“p1”));

Using the CSS Selectors: dir( document.querySelectorAll(“p1”) );


Modify HTML Elements

.innerText

.innerHTML

because we are using the ” = ” operator that means that we are overwriting whatever was there but if you don’t want to delete, instead you want to add to it use the ” += ” operator one example is:

now if you want to modify the newly created span without modify the other text on that element?

in this case we nee to use the CSS selectors, and specify the direct child using the “>” Direct Child indicator.

also make sure that you target the right element of the “Array” in this case is “0”


Input Elements

Most Input Elements do not have closing tag, they are self closing Tags. so lest change the value of an INPUT with value=”Click Me”. in JavaScript attributes are simple properties on an Object.

remember to interact with the WINDOW Object in the Browser console to find more information you can use:

then look for “value” and in this case the value is: “Click Me” as we stipulate in our index.html file

so to change the value I use the code as:


Modify Element Styles

to begin this example we have the following code:

Note– the command:

keep track of the “IN-LINE STYLES” and not the Computed Styles found in: “<head>”  or  “.css “ files, if you need to review the CSS Computed Style values use the command:

This will give you an Object with Numeric Keys from 0…. to …??   in the following way.

This numerical keys are not much help so in order to get the information in a better way, use the command:

Basically we are telling to the computer: from the Coumputed Styles, of the Element with ID= “blue”, get the value of “width”.

In the other side for elements with “IN-LINE STYLES” have different commands like:

and if you want to see the value of just one property use the following command:

Modify the “IN-LINE STYLES”

You can actually OVERWRITE the value of that property, example:

This will simply modify the current ON memory DOM values, one thing to remember is tha JavaScript uses CamelCase but CSS no. so you need to convert the translate the “Property Name” from CSS to CamelCase, example:

Modify the Computed Styles found in: “<head>”  or  “.css “ files

Here we use the same syntax that in the “In line Styles” modifications because “In line Styles” have a higher precedence to “Computed Styles”.


Create and Append DOM element

This time we will not change the elements on the DOM, we actually will Create an OBJECT in JavaScript that represents the “DOM Element” that do not exist on the DOM. in other words we will inject HTML from JavaScript in the virtual DOM.

But this will not be Injected to the HTML for the user “YET”, to do that we need to tell to the compiler where we want this new <div> to be placed on the HTML document.

Create new element inside the newly created “DOMobject”

OnClick=”myFunction()”


EventListeners

There is another post with this information, where I put my notes on eventListeners, which are very useful when Manipulating the DOM. click the image below to go to that post.

Also check: guestbook.mycode.website


x



Copyright 2017. All rights reserved.

Posted January 29, 2017 by Edmundo in category "JS