Document Object Model(DOM)

What is DOM?

Dom is a complete representation of HTML documents.

Browser converts HTML elements to JavaScript objects.

What is jQuery?

Built-in Dom Manipulation method.

CRUD Operation

C - Create

R - Read

U - Update

D - Delete

 

Guess My Number - Project

See the Pen by Nurmdrafi (@nurmdrafi) on CodePen.

    let secretNumber = Math.trunc(Math.random() * 20) + 1;
    let score = 20;
    let highscore = 0;

    // Main Function
    document.querySelector('.check').addEventListener('click', function () {
        const guess = Number(document.querySelector('.guess').value); 
        // User value input always string, So have to convert to Number

        // When there is no input
        if (!guess) { // !guess = 'blank' and '0'
            document.querySelector('.message').textContent = '🚫 No Number!'

            // When player wins
        } else if (guess === secretNumber) {
            document.querySelector('.message').textContent = '✨ Congratulations!';
            document.querySelector('.number').textContent = secretNumber;

            // Style
            document.querySelector('body').style.backgroundColor = 'green';

            // Save Highscore
            if (score > highscore) { // highscore = 0 (always)
                highscore = score;
                document.querySelector('.highscore').textContent = highscore;
            }
        }
        // When guess is wrong
        else if (guess !== secretNumber) {
            if (score > 1) { // Between 1 and 20
                document.querySelector('.message').textContent = guess > secretNumber ? '😒 Too High!' : '👀 Too Low!';
                score--; // Each click on check button score decreased by 1
                document.querySelector('.score').textContent = score;
            } else {
                document.querySelector('.message').textContent = '💣 You lost the Game';
            }
        }
    })
        // Reset/Again Button
        document.querySelector('.again').addEventListener('click', function () {
            score = 20;
            secretNumber = Math.trunc(Math.random() * 20) + 1;
            document.querySelector('.number').textContent = '?';
            document.querySelector('.guess').value = '';
            document.querySelector('.message').textContent = 'Start guessing...';
            document.querySelector('.score').textContent = '0';
            document.querySelector('body').style.backgroundColor = '#222'
        })

Documentation

There has 3 results or scenario

1. !guess = true => When there is no input
2. guess === secretNumber => When player wins
3. guess !== secretNumber => When guess is wrong

Create a secret Number

1. Get random Number each time =>

Math.random();

2. Get random Number each time within 1-19.999 =>

Math.random()*20;

3. But the problem is each time we got number with decimels, SO...

4. Get random integer number =>

Math.trunc(Math.random()*20);

=> 19.9999 = 19

5.

Math.trunc(Math.random()*20)+1;

Add +1 for equality

Node Vs Element

Every Node is Element but Every Element is not Node.

Node Object: node is the generic name for any type of object in the DOM hierarchy.

Element Object: An element is one specific type of node as there are many other types of nodes (text nodes, comment nodes, document nodes, etc...).

Node Types

1. ELEMENT_NODE

2. ATTRIBUTE_NODE

3. TEXT_NODE

4. CDATA_SELECTION_NODE

5. ENTITY_REFERENCE_NODE

6. ENTITY_NODE

7. PROCESSING_INSTRUCTION_NODE

8. COMMENT_NODE

9. DOCUMENT_NODE

10. DOCUMENT_TYPE_NODE

11. DOCUMENT_FRAGMENT_NODE

12. NOTATION_NODE

Depricated: 2, 5, 6, 12 (REMOVED)

Dom Element Selection

Single Element Selector

• .getElementById()
• .querySelector()

Multiple Elements Selector

• .getElementsByTagName() --HTMLCollection--For Loop Not Useable--
• .getElementsByClassName() --HTMLCollection--For Loop Not Useable--
• .querySelectorAll() --NodeList--For Loop Useable--

Get Child Nodes Property

• .childNodes --NodeList--

Get Children Element Nodes

• .children --HTMLCollection--

Dom Manipulation (Properties & Method)

add()

append() 👉🏻 Multiple
appendChild() 👉🏻 Single

children

classList 👉🏻 [classList.add() or classList.remove()]

createElement

getAttribute()

getComputedStyle() 👉🏻 window.getComputedStyle(variable)

textContent 👉🏻  Show Browser Format

innerText 👉🏻 Show HTML Document Format

innerHTML 👉🏻 Show Full HTML

insertBefore

insertAdjacentElement(where, element)

nextElementSibling

nextSibling 👉🏻 Text_Node

parentElement

prepend() 👉🏻 Multiple

prependChild() 👉🏻 Single

previousElementSibling

previousSibling 👉🏻Text_Node

remove(class, id)

remove() 👉🏻 Not support old browser

removeChild()

setAttribute()

src

href

style

toggle()

value

console.dir() 👉🏻 Show All Property

textContent vs innerText vs innerHTML

    document.querySelector('p').textContent = 'My name is *Rafe*';
    document.querySelector('p').innerText = 'MY NAME IS *RAFE*'
    document.querySelector('p').innerHTML = 'My name is Rafe';