Week4day2 JavaScript and the DOM

The DOM.

Just like CSS, JavaScript also is able to identify and manipulate the elements in our HTML pages by using the Document Object Model.

  1. The Document Object

The HTMLElement.click() method simulates a mouse click on an element.

When click() is used with supported elements (such as an <input>), it fires the element's click event. This event then bubbles up to elements higher in the document tree (or event chain) and fires their click events.

Syntax:

click()

// On mouse-over, execute myFunction function myFunction() { document.getElementById("myCheck").click(); }

  1. Selectors

Document: querySelector() method

Syntax:

querySelector(selectors) Examples:

JavaScript

const el = document.querySelector(".myclass");

Selector Description Example ("*") Selects all elements in the document
(this) Selects the current HTML element ("p.intro") Selects all

elements with class="intro" ("div p") Selects all

element inside all

elements
("div p:first-child") Selects the first

element inside all

elements ("[href]") Selects all elements with an href attribute ("a[target=_blank]") Selects all elements with a target attribute value equal to "_blank" ("p:nth-child(even)") Selects all even

elements