DOM and Events Fundamentals

DOM stands for Document Object Model : structured representation of HTML documents,

allows JS to access HTML elements and styles to manipulate them 

 

*automatically created by the browser when a HTML file is created

 

in a tree structure!!

 

 

DOM is not acutally a part of JS. 

 

We use DOM to manipulate webpages and its appreances that is created through JS via APIs.

---

 

We can use document.querySelector to select elements from HTML and assign roles in Javascript.

 

for example if there is a class named message in a HTML file we can select it in JS by

console.log(document.querySelector('.message'));

 

for classes we use . and for ID we use #.

 

However if we want to select different elements within the element, we can use either 

• innerHTML
• innerText
• textContent

These 3 can seem similar but select different things within a HTML element.

 

innerHTML selects everything within the element including the HTML.

 

for example

 

HTML:

<section class="right">

        <p class="message">Start guessing...</p>

        <p class="label-score">💯 Score: <span class="score">20</span></p>

        <p class="label-highscore">

          🥇 Highscore: <span class="highscore">0</span>

        </p>

      </section>

 

if we selected the section with class right

document.querySelector('.right').innerHTML

 

we will select everytthing within it both text and html

    <p class="message">Start guessing...</p>
        <p class="label-score">💯 Score: <span class="score">20</span></p>
        <p class="label-highscore">
          🥇 Highscore: <span class="highscore">0</span>
        </p>
     

innerText selects only the text within a selected element

 

document.querySelector('.message').innerText

 

will print: Start guessing...

 

textContext is slightly similar to innerText however it will select all texts within an element whether it's hidden or not

 

<div id='my_div'>
  안녕하세요?     만나서 반가워요.
  <span style='display:none'>숨겨진 텍스트</span>
</div>

 

print:   안녕하세요?  만나서 반가워요. 숨겨진 텍스트

---

 

selecting input elements in HTML

 

if an input element is empty, even if we use document.querySelector it might turn up as an error. 

This is because we need to add an aditional line of code that is .value

---

Coding project : Guess my Number

 

using if , else if statements and DOM we created a small game where you can create a number guessing program.

 

Initially all of the code was written with duplicate codes to better our understanding of using the document query selector option. 

 

Then we tried to write dry code by substituting some of the duplicated code by refractorying.

 

refactorying

restructure the code without changing how it works : improve code and removing duplications

 

We have done this by 

1.)creating a const value for all of the HTML elements that was required.

2.) creating a function for the message displays

 

*check 240314 folder for the dry code

---

Through this excercise I have learned that

 

• we can use ternary operators inside a function
• setting reusable values in the let variable so they can be called again in the future
• to always store a value seperately instead of excepting the DOM to hold the value for us (for example the starting score of 20 can be stored seperately instead of it being called as a DOM)

---

 

Coding Project: Modal

 

we are creating a project that creates a modal window when a button is pressed.

 

A difficulty arised when I was trying to figure out why I had to use a for statement in order to print out which button I'm pressing on the console log when using the querySelectorAll, instead of directly using addEventListener (this results in stating that the addEventListener is not a function)

 

Upon investigating I found out that this is because the querySelectorAll function bring the NodeCollection (since its selecting more than one element), therefore the addEventListener does not work.  Therefore we need to use a for method to select each element from the NodeCollection and to add an eventListener.

 

Additionally NodeCollection has a numeral index and has a length property, however since its not am array we can't use methods that has the Iterator Function such as forEach (but more on what forEach is later..)

---

classList

 

we can also use the method classList to manipulate classes of each element. 

modal.classList.remove('hidden', 'show');

it is important to note that we should not add a "." infront of the class names. 

we can manipulate more than one classes by adding a comma after a class to add as many as we want.

 

for classLists there are multiple methods to use such as 

• remove
• add
• toggle

---

keypress events

 

keypress events are keypress events which are deemed as global events because they can happen anywhere on the page not just on a certain HTML element.

 

3 different events

• keydown: happens when the key is pressed down
• keypress: happens continously as long as the key is pressed
• keyup: only happens when the key that is pressed is released

but how does the eventHandler know what key is pressed?

 

We can do this by logging an event, this is done by adding the event as an argument (you can do this by using e, or event)

document.addEventListener('keydown', e => {

  console.log(e);

});

 

when we console log the event, we can start seeing which key is pressed down, and that every value of the key is logged under key. 

we can narrow it down further by specifying it as e.key.

 

Now to close the modal we add an if statement

 

document.addEventListener('keydown', e => {

  console.log(e.key);

  if (e.key === 'Escape') {

    if (!modal.classList.contains('hidden')) {

      closeModal();

    }

  }

});

 

we can simplify this code further by using &&

  if (e.key === 'Escape' && !modal.classList.contains('hidden')) {

    closeModal();

  }

});