Lecture 6 : DOM - Document Object Model | JavaScript Full Course | Part 1

Sdílet
Vložit
  • čas přidán 22. 11. 2023
  • ⭐️ Instagram : / shradhakhapra
    ⭐️ LinkedIn : / shradha-khapra
    Notes available at : drive.google.com/drive/folder...

Komentáře • 490

  • @shradhaKD
    @shradhaKD  Před 6 měsíci +209

    One step at a time, keep learning❤
    Someone give timestamps after studying.

    • @SmartStudy-sp9uy
      @SmartStudy-sp9uy Před 6 měsíci +2

      tq

    • @monkeymusics2024
      @monkeymusics2024 Před 6 měsíci

      thank you so much for this video
      i really needed this video
      thank you

    • @santoshgrd01
      @santoshgrd01 Před 6 měsíci

      Video quality very low

    • @pratikshasonar1568
      @pratikshasonar1568 Před 6 měsíci +2

      Mam mera interview hai agle hafte and ur java script series helping me a lot please share remaining lecturers as early as possible its humble request mam please share it as fast as possible

    • @user-kx1bt3ff6c
      @user-kx1bt3ff6c Před 6 měsíci +2

      @@santoshgrd01 achi quality hai bro refresh kar ke dekh

  • @pratickmajee3697
    @pratickmajee3697 Před 3 měsíci +104

    I dont know about others , but in my case shradha actually explained this course better than CodeWithHarry. She didnt even missed a single detail in any video. Kudos to You !

    • @studyplans3783
      @studyplans3783 Před 2 měsíci +4

      bilkul bahii haryy bahi ne to bhoot sari chisze nahi pdahii no basicccc

    • @xyzadmin123
      @xyzadmin123 Před 2 měsíci +7

      harry bhai ko knowledge to boht hai but unke pdhane ka trika boht messy hai..

    • @paradise836
      @paradise836 Před 2 měsíci +12

      finally someone said it, bhai mujhe lagata tha ki harry bhai ka mujhe hi smajh nahi atta, mujhme hi koi kami hai. But now i can sit back and relax hehe

    • @hampam8235
      @hampam8235 Před 2 měsíci +3

      Bhai mere dil ki baat keh di tumne

    • @relaxgaming6393
      @relaxgaming6393 Před 2 měsíci +1

      bhai harry bas basics karwata hai wo bhi free me , itna sab kuch to krke de rha hai wo

  • @AmanKumar-oj1ks
    @AmanKumar-oj1ks Před 6 měsíci +68

    00:48------Start
    04:11-----Starter Code
    16:45----Understanding INSPECT WINDOW
    20:18-----Starter code
    22:00-----Window Object
    25:18------DOM (DOCUMENT OBJECT MODEL)
    38:06------DOM Manipulation
    51:55----DOM Manipulation PROPERTIES
    01:11:19----Practice set

  • @shehryaransari8353
    @shehryaransari8353 Před 6 měsíci +8

    thankyou didi ye itna barra DOM ka concept apny itne ache se sikhne ke lea apke lecture tu assa lgta h ke hm koi paid courses kr rhe hn itna zyda clarifications ke sth ap sikha thi hn apny vedio me itni sarri qualtiy deti hn thankyou and thankyousomuch didi.

  • @SmartStudy-sp9uy
    @SmartStudy-sp9uy Před 6 měsíci +170

    00:01 Chapter six covers the important concept of DOM (Document Object Model).
    02:20 Building a house analogy for understanding the Document Object Model (DOM)
    07:33 Introduction to DOM concepts
    10:12 The style tag is used to connect CSS to an HTML file.
    14:21 Adding styling and JavaScript code to the webpage
    16:45 Understanding the elements and inspection process in the DOM
    21:03 The DOM helps with organizing and caching web content for better loading time.
    22:57 The window object in JavaScript is a global object with various properties and methods.
    27:01 Introduction to Document Object Model (DOM)
    28:56 DOM is the Document Object Model, representing the structure of an HTML page.
    33:13 Introduction to DOM and accessing HTML tags in JavaScript.
    34:59 The Document Object Model (DOM) allows us to manipulate the HTML structure of a webpage.
    38:42 Adding scripts in index.htm and accessing elements using IDs
    40:21 Accessing elements using ID and Class name
    44:01 Get elements by class name returns an HTML collection, similar to an array.
    46:03 DOM collections can be accessed using various methods and properties
    49:43 Query selector is used to select elements based on ID, class or tag
    51:32 Accessing and manipulating elements using DOM
    55:24 Understanding the relationship between parent, child, and siblings in the Document Object Model (DOM)
    57:12 Understanding the DOM Tree Structure
    1:00:53 Query and select elements using the DOM
    1:02:35 Self-learning mindset as a programmer
    1:06:34 Using innerHTML to modify the content of an element
    1:08:40 The DOM allows us to access and manipulate elements in a web page.
    1:12:37 Changing the inner text of an h2 element in the DOM using JavaScript
    1:14:33 Basic concepts of JavaScript: concatenation, accessing HTML elements, changing inner text property
    1:18:33 Changing the properties of DOM elements
    1:20:26 Accessing and manipulating DOM elements using JavaScript.

  • @Loveleensharma763
    @Loveleensharma763 Před 7 měsíci +25

    You are teaching very good and God bless you both😊😊

  • @bhavanapentam7519
    @bhavanapentam7519 Před 6 měsíci +8

    So crystal clear . Waiting for more such content.

  • @Frontend_.designer
    @Frontend_.designer Před 7 měsíci +12

    your have amazing teaching skills we want to learn Next.js 14 from you after javascript....

  • @Wazir202
    @Wazir202 Před 6 měsíci +3

    Best Explanation Ever Thank you Maam.

  • @adeshshahi517
    @adeshshahi517 Před 6 měsíci +6

    this whole video was interesting
    i liked this video so much
    this is one of the best video so far from 1-6 ep

  • @classes.pk2024
    @classes.pk2024 Před 5 měsíci +1

    Amazing video. Thanks for your all effort.

  • @premsagar4438
    @premsagar4438 Před 6 měsíci +3

    Thanks for turning dark mood. Much easier to focus now.

  • @user-dm6er3yk4q
    @user-dm6er3yk4q Před 6 měsíci +1

    Thanks i love your teaching method and effort.

  • @HasnainAli-qq4jf
    @HasnainAli-qq4jf Před 6 měsíci +4

    All parts of Dom topic I felt like superb mam Didi bhut shukriya 💖
    You teach our easier way

  • @user-be8nf9xe8t
    @user-be8nf9xe8t Před 7 měsíci +11

    Best Teaching Method Ever. Thank you didi for such an amazing content❤

    • @adibanaaz8854
      @adibanaaz8854 Před 21 dnem

      Aap acha pdhate ho... Vha apna college channel pr aman dal rkha h vedio... That's so boring

  • @artycrafty8691
    @artycrafty8691 Před 4 měsíci +5

    Two most important topic of this video
    39:44 Accessing elements of html using js
    51:53 Dom manipulation Properties

  • @snehalyadav1657
    @snehalyadav1657 Před 3 měsíci

    Very simple language, real time examples and everything is well explained

  • @nyaharuchi
    @nyaharuchi Před 10 dny +1

    watched too many tutorial videos from apna college but this one from shradha khapra is gonna be the best in my youtube history

  • @DevTShubham
    @DevTShubham Před 7 měsíci +8

    Loved the way hoe you covered basics of DOM Manipulation!!!!

  • @meapawanyadav
    @meapawanyadav Před 6 měsíci +3

    Top 100 problem solving questions with solutions 🙏🙏

  • @sandeeptanjore1253
    @sandeeptanjore1253 Před 5 měsíci

    The entire lecture was good. Loved it as you made me understand DOM like 1-2-3 🙂

  • @user-nh1kd5nm2o
    @user-nh1kd5nm2o Před 4 měsíci

    very educative video..Thank you Apna College...Your learning approach is totally next level..i am a big fan from Bnagladesh...I am learning Web Development and your videos are helped me to learn and explore the web development journey more effectively...Thanks a lot again..

  • @bhavyangdixit8919
    @bhavyangdixit8919 Před 5 měsíci +9

    Hello Shraddha Didi
    Your JavaScript playlist is pure gold! 🌟 Thanks a ton for making learning JavaScript so much fun and understandable. Your energy and clear explanations are awesome! Can't get enough of your tutorials - they're simply fantastic!
    Big thanks for sharing your knowledge and passion with us. You're making a real difference in my learning journey! 🚀

    • @ShaziaTabassum-qj6wp
      @ShaziaTabassum-qj6wp Před 5 měsíci

      How to download notes

    • @nosim442
      @nosim442 Před 3 měsíci

      ​@@ShaziaTabassum-qj6wp drive.google.com/drive/folders/1wfNTKinBAV6CCxaI5lfSnnRFAYpy0uEl?usp=share_link

  • @user-uj9lz5xi9m
    @user-uj9lz5xi9m Před měsícem +2

    understood precisely.. Thank you so much 🙏

  • @hampam8235
    @hampam8235 Před 2 měsíci

    Shradhha
    The way you teach innerText , InnerHTML , textContent is quite amazing .

  • @ritikclub2481
    @ritikclub2481 Před 6 měsíci +4

    Great Explanation dii ❣ ...And Thanku for change the VS-Code Theme 😊😊

  • @mysteriousanil
    @mysteriousanil Před 7 měsíci +6

    Thanks for regularly uploading this js series u saved my money

  • @user-zq5il8xj9v
    @user-zq5il8xj9v Před 6 měsíci +3

    Mam I am continuously watching your video 🎉❤

  • @sonukshatriya15
    @sonukshatriya15 Před 20 dny

    Is video se mera parent or child vala concepts clear ho gaya + Javascript k jo main basic concepts kaha use hote uska idea aa gaya

  • @lovingkid2737
    @lovingkid2737 Před 5 měsíci

    This video is really so helpful for us 🌸🌸thank you mam

  • @nitinshinde60
    @nitinshinde60 Před 5 měsíci

    Your teaching skills are so elegent so beautiful just looking like a wow ! ♥

  • @alinaeem9156
    @alinaeem9156 Před 4 měsíci

    best part was last question where u have also used last lecture concepts May god bless u madam love from pk

  • @ANIMALLOVERS-fh5np
    @ANIMALLOVERS-fh5np Před 6 měsíci +2

    Mam it's fantastic kindly make a video on diff between wordpress web development and html development thanks

  • @Seek_of_islam
    @Seek_of_islam Před 6 měsíci +1

    awesome explanation❤❤

  • @Bobbykumar
    @Bobbykumar Před 6 měsíci +2

    thanku thanku very much ,
    maine aapki puri playlist dekhi muje bahut ache se samaj aaya thanku once again & plz advance java ki bhi playlist banao aise hi ache se explane karke
    thanku

  • @_AGCraft_
    @_AGCraft_ Před 4 měsíci

    Thank you so much for this tutorial I watched your full video 🎉🎉🎉😊

  • @akahayrathod9946
    @akahayrathod9946 Před 6 měsíci

    i never seen video of dom like this thank you

  • @manishsawwashere2669
    @manishsawwashere2669 Před 7 měsíci +2

    Thanks mam for js series 🔥🔥🔥🔥

  • @hdgaming3020
    @hdgaming3020 Před 7 měsíci +1

    Finally video aa gaya

  • @supriyatupe369
    @supriyatupe369 Před 6 měsíci +3

    Thank you maam .. such a amazing video's all consept are understand very clearly....❤

  • @poojajaiswal6988
    @poojajaiswal6988 Před 5 měsíci

    It's very helpful mam for easy to understand, thank you so much 🎉☺️

  • @AYUSHKUMAR-xj4wc
    @AYUSHKUMAR-xj4wc Před 6 měsíci +7

    The more I learn from her, the more the respect increases for her in my heart. Thanks di for such an amazing content.

  • @fashioncravings52
    @fashioncravings52 Před 6 měsíci +4

    I have made all hand written notes.... From this JavaScript series ❤🎉 a bundle of thanks to you Mam ❤

  • @Suraj-qs4ym
    @Suraj-qs4ym Před 6 měsíci +1

    REGULAR WATCHING YOUR VIDEO LOVE FROM इंडीया थँक्यू वरी MUCH FOR THISE VALUABLE COURSE❤

  • @codingkran
    @codingkran Před 4 měsíci

    Ma'am thanks a lot, You're doing a lot for us Students

  • @Suraj-qs4ym
    @Suraj-qs4ym Před 7 měsíci

    Regular watching your video love from india❤

  • @tipsentertainment9684
    @tipsentertainment9684 Před 4 měsíci

    good communication skills and explanation.

  • @faizanbeg7921
    @faizanbeg7921 Před 6 měsíci +1

    Thank you so much again and again mam .

  • @shikhagadpayle5208
    @shikhagadpayle5208 Před 6 měsíci +1

    bahot hi mast padhate ho ...aap.....very very good

  • @deepakbareth-il7ou
    @deepakbareth-il7ou Před 2 měsíci

    My best part was that before this i had confusion that why did i learn back concepts now i realized and grateful for you and i am able to understand these beautiful concepts and ready for upcoming journey tq di

  • @Motivational_talks
    @Motivational_talks Před 3 měsíci

    getelementbyid , getelementbyclassname,getelementbytagname. and query selector .I was totally confused between these three types , but now, am dam clear. thanks

  • @nevilmandora4694
    @nevilmandora4694 Před 4 měsíci

    Thank you so much ma'am for this kind of amazing course ❤️🔥

  • @wajidrana3005
    @wajidrana3005 Před 5 měsíci

    HLO SHRADHA KHAPRA You are teaching very good and God bless you both 😊 today my fav....topic cover DOM...........Thanks

  • @Dheer_09
    @Dheer_09 Před 5 měsíci +1

    Thank you mam ✨ very helpful lecture 😇

  • @maheshhandechocolateboy
    @maheshhandechocolateboy Před 6 měsíci +1

    really waiting for next part

  • @birjubharti8379
    @birjubharti8379 Před 6 měsíci +2

    My First AI tool Shradha Khapra❤❤

  • @ronakparjapati2264
    @ronakparjapati2264 Před 7 měsíci +2

    Mam I am continuously present ✋ in your lecture number 6

  • @zaidchangwadiya
    @zaidchangwadiya Před 6 měsíci

    Ham se jiyadah mehnat to aap karte ho best he mam❤❤

  • @Joker_1406
    @Joker_1406 Před 6 měsíci +5

    Before this video i don't know about Window object and document object after watching this video i completely understand this concept...thank u 🫡🫡 God bless you...keep smiling keep teaching 🙏🙏🙏

  • @user-kr6uo3zb8w
    @user-kr6uo3zb8w Před 3 měsíci

    Thank you shraddha didi this is very helpful

  • @user-rp4pc7cj3c
    @user-rp4pc7cj3c Před 7 měsíci +4

    Your process is slow I like it this course is very helpful for beigner to understand ❤

  • @LuckyVerse1
    @LuckyVerse1 Před 2 měsíci

    Thanks mam for enabling dark mode .... 😊😊

  • @MrPawitrang
    @MrPawitrang Před 6 měsíci +2

    Best DOM lecture🎉🎉🎉🎉

  • @asif_chouhanproduction415
    @asif_chouhanproduction415 Před 6 měsíci +1

    Respected madam. Keep doing good

  • @user-qw1rn8iw3h
    @user-qw1rn8iw3h Před 7 měsíci +8

    Didi next series react js par please 🥺

  • @rangrezzaftab7560
    @rangrezzaftab7560 Před 7 měsíci

    Thanks mam for this topic

  • @muhammadusmanali1838
    @muhammadusmanali1838 Před 4 měsíci

    Explained well!

  • @Samiullah-vd6sm
    @Samiullah-vd6sm Před 6 měsíci +1

    Great teacher

  • @muhammadumerfarooque-fz8cg
    @muhammadumerfarooque-fz8cg Před měsícem

    Best DOM Explanation Ever

  • @tariqmahmoodi6105
    @tariqmahmoodi6105 Před 7 měsíci

    Teaching method 👍👍

  • @zaibitech427
    @zaibitech427 Před měsícem

    You are teaching very good and God bless you

  • @user-vr6xr3xb2z
    @user-vr6xr3xb2z Před 4 měsíci

    Keep it up very amazing

  • @mohitjaiswal9046
    @mohitjaiswal9046 Před 6 měsíci

    Thank you so much ma'am ❤

  • @shashank.4705
    @shashank.4705 Před 7 měsíci +1

    yesterday i waited for the class like anything.......

  • @yuvrajkumarsingh4984
    @yuvrajkumarsingh4984 Před 7 měsíci

    all time favourite

  • @user-uw2md5os6i
    @user-uw2md5os6i Před 7 měsíci

    Big blast 🎉🎉🎉

  • @ROHITDUBEY-wy9hf
    @ROHITDUBEY-wy9hf Před 6 měsíci

    Thankyou so much didi❤

  • @Asim_Ali4857
    @Asim_Ali4857 Před 6 měsíci

    Thanks a lot maam

  • @krutikabarad4241
    @krutikabarad4241 Před 6 měsíci +2

    first practice question can be done by this as well?
    const heading = document.getElementById("heading");
    heading.append(" from apna College");
    console.log(heading);

  • @suhaib_nisar
    @suhaib_nisar Před 6 měsíci

    Great Ma'am

  • @surajoswal8128
    @surajoswal8128 Před 6 měsíci

    Thanku so much mam🙏

  • @amanbaghel7841
    @amanbaghel7841 Před 6 měsíci +2

    Didi , pls make a detailed course on AWS and cloud computing pls 🙏🙏

  • @AhmedRaza-ty7zq
    @AhmedRaza-ty7zq Před 4 měsíci +1

    Awesome video😎😎👍👍

  • @AmitkMehta-ee4gy
    @AmitkMehta-ee4gy Před 5 měsíci

    that was amazing mam

  • @No_Shanks1
    @No_Shanks1 Před 9 dny +1

    14:33,you can't do that lady. If you do that then you will get null because js runs before html
    we should write script tag always at the end, by the way nice explanation.

  • @user-xk8hf8zr3g
    @user-xk8hf8zr3g Před 3 měsíci

    Day - 8 - Javascript learning
    Thank you so much for teach us

  • @FaizanFurqan034
    @FaizanFurqan034 Před 6 měsíci +1

    Great 👍

  • @SanTanuManna2000
    @SanTanuManna2000 Před 7 měsíci +29

    Mam object ki video??

    • @fansofa2688
      @fansofa2688 Před 7 měsíci

      Starting mein introduction de diya

    • @ApnaCollegeOfficial
      @ApnaCollegeOfficial Před 6 měsíci +28

      After DOM, will be covered in detail in upcoming chapters ❤

    • @SanTanuManna2000
      @SanTanuManna2000 Před 6 měsíci +1

      @@ApnaCollegeOfficial ok mam thanks for your reply & I am waiting for you marvelous lecture 🙏🏼

  • @LpuThings
    @LpuThings Před 5 měsíci

    Thank you for this amezing lecture 🫶🫶❤️❤️

  • @AmanSingh-yi7ei
    @AmanSingh-yi7ei Před 22 dny

    Best explanation of Dom 😊

  • @alokthakkar9392
    @alokthakkar9392 Před 3 měsíci

    Why I ❤ your videos so much 😊

  • @karnraj979
    @karnraj979 Před 3 měsíci

    Good explanation ❤

  • @keshabgogoi8252
    @keshabgogoi8252 Před měsícem

    DOM concepts made so easy💯 Thank you @shradha di for the JS series ❤️🙌 Also make a React JS series please

  • @aminul.islam.
    @aminul.islam. Před 6 měsíci

    thank you so much :)

  • @atrikashow8118
    @atrikashow8118 Před 5 měsíci

    really helpful video didi

  • @user-dl9zh3fq1l
    @user-dl9zh3fq1l Před 7 měsíci

    from Nepal, big fan ma'am

  • @learnwithnagma
    @learnwithnagma Před 6 měsíci +11

    Thank you so much ma'am for your phenomenal way of explaining concepts . Definitely gonna to do homework by reading MDN references . I always wanted to learn coding. I am connected with you since last 7 months. I learnt a lot & created project. Also working on new projects. As u say to explore by our side is the best way to understand things in a better way. I am doing it & read more about them . Once again thank you so much ma'am ✨😇 . Now I am able to create things. You played an important role in my journey of exploring the world of coding 😊.

  • @prashanths7526
    @prashanths7526 Před měsícem

    Thank you ma'am.❤

  • @kareenatulyani24
    @kareenatulyani24 Před 5 měsíci

    Thankyouuuu mammm❤🫶🏻

  • @nishantpandey1042
    @nishantpandey1042 Před 4 měsíci

    Thanks You🎉