Document Object Model (DOM)

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually, that means JavaScript, although modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language, as such.

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.

Nodes can also have event handlers attached to them. Once an event is triggered, the event handlers get executed.

Window

https://developer.mozilla.org/en-US/docs/Web/API/Window

The Window interface represents a window containing a DOM document; the document property points to the DOM document loaded in that window. A window for a given document can be obtained using the document.defaultView property.

A global variable, window, representing the window in which the script is running, is exposed to JavaScript code.

Document.querySelector()

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

Array.prototype.forEach()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

The forEach() method executes a provided function once for each array element.

console.dir(document);
console.log(document.URL);

const hTag = document.querySelector('h1');
console.log(hTag);
hTag.textContent = 'Hello World';
console.log(hTag.textContent);
const divTag = document.querySelector('div');
console.log(divTag);

const divs = document.querySelectorAll('div');
console.log(divs);

divs.forEach(function(ele){
    console.log(ele);
})
divs.forEach(ele => console.log(ele));

divs.forEach((ele,index,arr) => {
    console.log(ele);
    ele.textContent = 'NEW '+ index;
    //console.log(arr);
})

divs[0].textContent = 'Hello 1';
divs[1].textContent = 'Hello 2';

const divs = document.querySelectorAll('div');
const inValue = document.querySelector('.val');
const hTag = document.querySelector('h1');
const span = document.querySelector('span');

inValue.style.fontSize = '3em';
let counter = 0;
const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.addEventListener('click',(e)=>{
    const newDiv = document.createElement('div');
    document.body.append(newDiv);
    counter++;
    
    newDiv.textContent = `${inValue.value} ${counter}` ;
    newDiv.addEventListener('click',myClick);
})

const val1 = span.append(btn);
const val2 = span.appendChild(btn);

console.log(btn);

inValue.addEventListener('click',(e)=>{
    if(inValue.getAttribute('type') =='text'){
        inValue.setAttribute('type','number');
    }else{
        inValue.setAttribute('type','text');
    }

})

divs.forEach((div,ind)=>{
    console.log(div);
    inValue.value = ind;
    div.textContent = `<h2>Hello World</h2> ${inValue.value + 1}`;
    div.innerHTML = `<h2>Hello World</h2> ${inValue.value + 1}`;

    div.addEventListener('click',myClick);

})


function myClick(e){
    console.log(e.target); 
    e.target.classList.toggle('box');
}

hTag.addEventListener('click',(e)=>{
    console.log(e.target);
    hTag.style.color = 'white';
    if(hTag.textContent == 'JavaScript'){
        hTag.textContent = 'test';
        hTag.style.backgroundColor = 'blue';
    }else{
        hTag.textContent = 'JavaScript';
        hTag.style.backgroundColor = 'red';
    }
})