The JavaScript DOM explained in 5 minutes! 🌳

Поделиться
HTML-код
  • Опубликовано: 8 фев 2025
  • #JavaScript #tutorial #course
    // DOM = DOCUMENT OBJECT MODEL
    // Object{} that represents the page you see in the web browser
    // and provides you with an API to interact with it.
    // Web browser constructs the DOM when it loads an HTML document,
    // and structures all the elements in a tree-like representation.
    // JavaScript can access the DOM to dynamically
    // change the content, structure, and style of a web page.

Комментарии • 52

  • @BroCodez
    @BroCodez  Год назад +40

    // DOM = DOCUMENT OBJECT MODEL
    // Object{} that represents the page you see in the web browser
    // and provides you with an API to interact with it.
    // Web browser constructs the DOM when it loads an HTML document,
    // and structures all the elements in a tree-like representation.
    // JavaScript can access the DOM to dynamically
    // change the content, structure, and style of a web page.
    console.log(document);
    console.dir(document);
    document.title = "My website";
    document.body.style.backgroundColor = "hsl(0, 0%, 15%)";
    const username = "";
    const welcomeMsg = document.getElementById("welcome-msg");
    welcomeMsg.textContent += username === "" ? `Guest` : username;


    Document

    Welcome

    • @bhigh1983
      @bhigh1983 Год назад

      Your video is good with clear explanations and it's easy for me to understand the code. I love it.

    • @masternobody1896
      @masternobody1896 Год назад

      bro make ai video

  • @kenkioqqo
    @kenkioqqo 11 месяцев назад +55

    Bro, this is the first time I've really understood how the DOM works. Thanks for the clear and simple breakdown of such a complex concept.

  • @ok_e3w
    @ok_e3w Год назад +16

    crazy good introduction, incredible I watched a 3 hour tutorial and didnt even scratch this, thx again

    • @l-fitness3590
      @l-fitness3590 11 месяцев назад +2

      short simple videos are always better because you can just practice and mess around after with the information you learnt

  • @YUVRAJ_MAKWANA_GJ
    @YUVRAJ_MAKWANA_GJ Год назад +21

    I learnt html and css easily by your videos ❤ now I'm trying to learn js 🙏

  • @christiangeorge5313
    @christiangeorge5313 4 месяца назад +2

    you never seize to amaze me. Great explanation!

  • @thejoker-
    @thejoker- Год назад +8

    Alot support for you bro❤

  • @Gion-x3t
    @Gion-x3t 5 месяцев назад +3

    Great explanation. If you made an HTML version and a CSS version of this video, then combine all 3 into a playlist, it'd be a great introduction for anyone looking to code.
    I love the way you break down the stuff and have a simplification at the top. You keep things simple so ppl underdstand rather than copy. Bro Thanks.

  • @Tech-Dev
    @Tech-Dev 10 месяцев назад +2

    Cheers for this tutorial.

  • @khalidelgazzar
    @khalidelgazzar Месяц назад +1

    Great video. thank you!

  • @AhmedRaza-ty7zq
    @AhmedRaza-ty7zq Год назад +1

    Awesome video😎😎👍👍

  • @dustmukhammad
    @dustmukhammad 11 месяцев назад

    This is soo clear explanation broooo! Thank you!!!!

  • @Ryan-mk6ch
    @Ryan-mk6ch 6 месяцев назад

    so clear and explanatory!! thank you for this video!!

  • @AmjadGD
    @AmjadGD Год назад

    Thank you so so so much

  • @adaminsanoff
    @adaminsanoff Месяц назад

    Great explanation! Thanks!

  • @realoogabooga
    @realoogabooga Год назад +1

    please keep doing what you're doing bro🙏🏻

  • @uxus-oh3qk
    @uxus-oh3qk 7 месяцев назад

    Best explanation...ever.

  • @itsshafayat6378
    @itsshafayat6378 8 месяцев назад

    that is such a good explanation
    bro fr knows the bro code

  • @nevouxjulie6595
    @nevouxjulie6595 11 месяцев назад

    Great video !

  • @ikuubi
    @ikuubi Год назад

    All I can say is _Understandable and have a good day_

  • @A_curious_chicken
    @A_curious_chicken 7 месяцев назад

    Nice tutorial

  • @tasi-rella992
    @tasi-rella992 2 месяца назад

    love this thank u !

  • @valenciawalker6498
    @valenciawalker6498 11 месяцев назад

    Thank you

  • @GoodBoy-lr7up
    @GoodBoy-lr7up 4 месяца назад

    Really clear but really short

  • @GoalDigger-footboll
    @GoalDigger-footboll 5 месяцев назад

    for what purpose u use
    : sign use on line .

  • @dipereira0123
    @dipereira0123 Год назад

    CHAD! Chanel 🍷🗿

  • @kushagrarai7799
    @kushagrarai7799 Год назад +1

    Surprise Surprise mfs the King is back👑

  • @gopalgohel4302
    @gopalgohel4302 Год назад

    Thank you sir

  • @chathuraranasingha4942
    @chathuraranasingha4942 8 месяцев назад

    0:07 DOM is not a JS object, but it represent the page we see in the browser

    • @danielgilleland5724
      @danielgilleland5724 8 месяцев назад +5

      DOM is a JS object _which_ represents the page we see in the browser.

  • @016632
    @016632 5 месяцев назад

    i want to hit the mute button how do i use DOM to mute desktop audio???

  • @tsunningwah3471
    @tsunningwah3471 10 месяцев назад

    zguba!

  • @nihongo_
    @nihongo_ 10 месяцев назад

    W

  • @hlahtunthein2830
    @hlahtunthein2830 5 месяцев назад

    msg means Uncle Roger , 😂😂 just kidding

  • @Zoooooooooooo
    @Zoooooooooooo 4 месяца назад +2

    im a dom male

  • @SalmanSalman777-xu5hl
    @SalmanSalman777-xu5hl 4 месяца назад +11

    friend dont speak so fast we from asia(pakistan) and our english is weak so be cool and speaks in slow mode

    • @EverythingIsMathandPhysics
      @EverythingIsMathandPhysics 4 месяца назад +17

      I'm from asia and i can understand everything. The trick is that you can change the speed of video to 0.75x or something just slow it then listen to it. Then when you're accustomed to his accent n stuff you can watch it on 1x

    • @Thewolf_2245
      @Thewolf_2245 3 месяца назад +3

      Me too, I am from Brazil and I suffered to understand it 😅

    • @Thewolf_2245
      @Thewolf_2245 3 месяца назад +3

      ​@@EverythingIsMathandPhysicsyes, I did it too

    • @SalmanSalman777-xu5hl
      @SalmanSalman777-xu5hl 3 месяца назад +1

      @@EverythingIsMathandPhysics ok boss

    • @timothyalex3091
      @timothyalex3091 3 месяца назад

      Big up bro. I feel your pain.😂

  • @tsunningwah3471
    @tsunningwah3471 10 месяцев назад

    fru

  • @sangeethasancharaya6870
    @sangeethasancharaya6870 7 месяцев назад

    every time i code document.getelementbyId the console says document is not defined. how could i overcome this problem. im using node.js

    • @Raymond_G
      @Raymond_G 6 месяцев назад

      document.getElementById()is displayed on the screen bro and not in the console.
      For the console ,it is
      Console.log() you have to define your element with console to view it in your console.