About Teletype
Join
jamila aliyeva
@jamilaaliyeva
August 2, 2023

Lesson 15 

DOM

Wha is is DOM?

DOM → Document Object Model

DOM'nig ikkita muhim tushunchasi bor:

Element va Node

  • Element — HTML teglari;
  • Node — teglar ham o'lishi mumkin, newline(text), comment ham bo'lishi mumkin.

  • HTMLCollection(getElementsByTagName, getElementsByClassName, children) vs NodeList(querySelectorAll, childNodes)

Selecting

getElementById()

html

.<!DOCTYPE html>
<html lang="en"> 
 <head>    <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
   <title>Document</title> 
     </head> 
      <body>   
       <header>     
        <nav>       
          <a href="#home">Home</a>     
          <a href="#about">About</a>      
          <button></button>     
         </nav>    
        </header>   
           <main>    
             <section id="home" class="home">      
                  <div class="home__container">
                  </div>     
            </section>    
          <section id="about" class="about">     
              <div class="about__container"></div>   
          </section>   
         </main>
      </body>
   </html>

javaScript

const homeSection = document.getElementById("home");
console.log(homeSection);

bu holatta id'si home bo'lgan elementni o'zlashtirdi.

getElementsByTagName()

HTML

.<!DOCTYPE html>
<html lang="en"> 
 <head>    <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
   <title>Document</title> 
     </head> 
      <body>   
       <header>     
        <nav>       
          <a href="#home">Home</a>     
          <a href="#about">About</a>      
          <button></button>     
         </nav>    
        </header>   
           <main>    
             <section id="home" class="home">      
                  <div class="home__container">
                  </div>     
            </section>    
          <section id="about" class="about">     
              <div class="about__container"></div>   
          </section>   
         </main>
      </body>
   </html>

JavaScript

const allDivs = document.getElementsByTagName("div");
console.log(allDivs);

bu holatta console'ga massive korinishida barcha mavjud bo'lgan divlarni chiqarib beradi. Lekin bular haqiqiy massive bo'lmaydi, 

console.log(sectionTitles[0]);
console.log(sectionTitles[1]); //bunaqa ko'rinishda murojaat qilsak bo'ladi

getElementsByClassName()

HTML

..<!DOCTYPE html>
<html lang="en"> 
 <head>    <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
   <title>Document</title> 
     </head> 
      <body>   
       <header>     
        <nav>       
          <a href="#home">Home</a>     
          <a href="#about">About</a>      
          <button></button>     
         </nav>    
        </header>   
           <main>    
             <section id="home" class="home">      
                  <div class="home__container">
                  <h1> Hello DOM</h1>
                  </div>     
            </section>    
          <section id="about" class="about">     
              <div class="about__container">
              <h1> Hello DOM</h1>
              </div>   
          </section>   
         </main>
      </body>
   </html>

JavaScript

let containers = document.getElementsByClassName("container");
console.log(containers);

bu holatta esa xuddi tagNaem orqali chiqarganimizdek boladi.

querySelector() (faqat bottasini tanlab olishimiz mumkin)

 let homeTitle = document.querySelector("#home h1");
 console.log(homeTitle);

yuqoridagi HTML'ni ichidahi H1ni ichidagi textni console chiqarib beradi.

querySelectorAll() (tanlab olayoygan elementimiz nechta bo'layotgan bo'lsa shunchasini tanlab beradi)

let allH1 = document.querySelectorAll("section h1");
console.log(allH1);

Traversing

parentNode, parentElement

 let homeTitle = document.querySelector("#home h1");
 
 console.log(homeTitle.parentElement); // optimal
 console.log(homeTitle.parentNode);

yuqoridagi HTML code'da h1ni otasini tanlab olyapti

childNodes, children

 let main = document.querySelector("main");
 console.log(main);
 console.log(main.children); // optimal
 console.log(main.childNodes); // node ya;ni textlari bilan chiqaradi

main'ning ichidagi elementlarni chiqaradi;

nextSibling, nextElementSibling

..<!DOCTYPE html>
<html lang="en"> 
 <head>    <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
   <title>Document</title> 
     </head> 
      <body>   
       <header>     
        <nav>       
          <a href="#home">Home</a>     
          <a href="#about">About</a>      
          <button></button>     
         </nav>    
        </header>   
           <main>    
             <section id="home" class="home">      
                  <div class="home__container">
                  <h1> Hello DOM</h1>
                  </div>     
            </section>    
          <section id="about" class="about">     
              <div class="about__container">
              <h1> Hello DOM</h1>
              </div>   
          </section>  
        <section id="contuct" class="contuct">        
          <div class="contuct__container">
          <h1> Hello DOM</h1>
          </div>     
        </section> 
         </main>
      </body>
   </html>

javaScript

let aboutSection = document.querySelector("#about");
console.log(aboutSection);
console.log(aboutSection.nextElementSibling); // optimal
console.log(aboutSection.nextSibling);

birinchi logda about sectionni ozini chiqariub beradi,

ikkinchisida about'dan keyingi section ( contuct)ni chiqarib beradi;

uchunchisida esa text ya;ni newline bilan ciqarib beradi

previousSibling, previousElementSibling

let aboutSection = document.querySelector("#about");
console.log(aboutSection.previousElementSibling);
console.log(aboutSection.previousSibling);

bu holatta aboutdan oldingi section (home) chiqadi

firstChild, firstElementChild

 let main = document.querySelector("main");
 console.log(main.firstElementChild);
 console.log(main.firstChild);

birinchi sectinni tanlab beradi;

lastChild, lastElementChild

 let main = document.querySelector("main");
console.log(main.lastElementChild);
 console.log(main.lastChild);

oxirgi sectinini tanlab beradi;

Styling

style property

..<!DOCTYPE html>
<html lang="en"> 
 <head>    <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
   <title>Document</title> 
     </head> 
      <body>   
       <header>     
        <nav>       
          <a href="#home">Home</a>     
          <a href="#about">About</a>      
          <button></button>     
         </nav>    
        </header>   
           <main>    
             <section id="home" class="home">      
                  <div class="home__container">
                  <h1 class=home_title > Hello DOM</h1>
                  </div>     
            </section>    
          <section id="about" class="about">     
              <div class="about__container">
              <h1 class=home_title> Hello DOM</h1>
              </div>   
          </section>  
        <section id="contuct" class="contuct">        
          <div class="contuct__container">
          <h1 class=home_title> Hello DOM</h1>
          </div>     
        </section> 
         </main>
      </body>
   </html>

javaScript

let homeTitle = document.querySelector("#home h1");
homeTitle.style.backgroundColor = "red";
homeTitle.style.padding = "10px 20px";
homeTitle.style.color = "white";

or 

homeTitle.style = `
  margin: 20px 40px;
  padding: 10px 20px;
border: 5px solid black;
  color: white;
  background-color: red; `;

getComputedStyle(element, [pseudoElement])

 let styleObj = getComputedStyle(homeTitle);
console.log(styleObj.backgroundColor);
console.log(styleObj.padding);

bu style'lani object korinishida chiqarib beradi

offsetWidth, offsetHeight ( margini hisobga olinmaydi, borderini , paddingni, contentini hisobga oladi)

 let styleObj = getComputedStyle(homeTitle);
console.log(homeTitle.offsetHeight);
console.log(homeTitle.offsetWidth);

clientWidth, clientHeight ( boredini marginini hisobga olmaydi, faqat padding, cintentni hisoblab beradi)

let styleObj = getComputedStyle(homeTitle);
console.log(homeTitle.clientHeight);
console.log(homeTitle.clientWidth);

Class

selector.className;

let homeTitle = document.querySelector("#home h1");
console.log(homeTitle.className);

idisi home bolgan sectionni h1'ni classini cbiqarib beradi. (home_title)

.<!DOCTYPE html>
<html lang="en"> 
 <head>    <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
   <title>Document</title> 
   <style>     
    .home_title{       
     font-size: 30px;       
      color: red;      
     }      
     .home_title_text{     
        color: yellow;
      }
      </style>
     </head> 
      <body>   
       <header>     
        <nav>       
          <a href="#home">Home</a>     
          <a href="#about">About</a>      
          <button></button>     
         </nav>    
        </header>   
           <main>    
             <section id="home" class="home">      
                  <div class="home__container">
                  <h1 class=home_title > Hello DOM</h1>
                  </div>     
            </section>    
          <section id="about" class="about">     
              <div class="about__container">
              <h1 class=home_title> Hello DOM</h1>
              </div>   
          </section>  
        <section id="contuct" class="contuct">        
          <div class="contuct__container">
          <h1 class=home_title> Hello DOM</h1>
          </div>     
        </section> 
         </main>
      </body>
   </html>

let homeTitle = document.querySelector("#home h1");
homeTitle.className = "home_title_text";

bu holatta home_title classi .home_title_text'ga o'zgaradi, home_titlega style bersak ham element ozgarmaydi

homeTitle.className += " home_title_text";

agar bu holatta yozadigan bo'lsak ikkala class ham ishlayveradi

classList

let homeTitle = document.querySelector("#home h1");

homeTitle.classList.add("home_title_text");

classlariga qoshimcha class qoshib beradi

homeTitle.classList.remove("home__title");

berilgan classni olib tashlaydi

homeTitle.classList.replace("home__title", "home_title_text");

home_tiitleni orniga home_title_text ni olib kelyapti

console.log(homeTitle.classList.contains("home__title"));

bu berigan class bormi yoqmi tekshirib beradi

toggle() — berigan class bolsa olib tashlaydi, yoq bolsa qo;shib beradi

homeTitle.classList.toggle("home_title_text");

Attributes

let homeImg = document.querySelector("#home img"); console.log(homeImg.src); // optimal

console.log(homeImg.alt);

console.log(homeImg.image);

or

console.log(homeImg.attributes);

console.log(homeImg.attributes[0]);

  • getAttribute(name)
  • setAttribute(name, value) homeImg.setAttribute("height", 400);
  • hasAttribute(name) console.log(homeImg.hasAttribute("alt"));

data-* attributes → dataset

DOM events

Event handlers

<button onclick="func()"> Click </button>

selector.onclick = function () {}

selector.addEventListener("click", function () {})

dblclick

ikki marta bosganimida isshlaydi.

mouseup (bir marta bossak ishlaydi)

let aboutSection = document.querySelector("#about"); aboutSection.addEventListener("mouseup", function ()

{  this.style.backgroundColor = "red";

});

mousedown ( bosib tursak ishlaydi)

aboutSection.addEventListener("mousedown", function () { 

this.style.backgroundColor = "yellow";

});

mouseenter ( mouseenter va mouseleave hoverni birlashgani)

aboutSection.addEventListener("mouseenter", function () { 

this.style.backgroundColor = "red";

});

"mouseleave

aboutSection.addEventListener("mouseleave", function () {

  this.style.backgroundColor = "white";

});

Manipulating

createElement() — element yaratish uchun ishlatamiz;

Masalan: const productCard = document.createElement("div");

createTextNode() — yaratgan elementimizni ichiga yozish uchun foydalanamiz;

Masalan: const productTitleText = document.createTextNode(product.name);

append()

bu ichidagi bolalarini qo'shib beradi;

Masalan: productCard.append(productCardBody, productCardFooter);

appendChild() — agar bitta qoshmoqchi bolsak, bundan foydalanamiz

Masala: productCardBody.appendChild(productImg);

prepend() — oldidan qo'shib beradi;

Masalan: productCardFooter.prepend(productBtn);  productCardFooter.prepend(productPrice);

button turadi undan oldin, productPrice'ni qoshib beradi

jamila aliyeva
August 2, 2023, 09:26
0 reactions
0 views