JavaScript DOM Tutorial | Document Object Model in JavaScript

Поделиться
HTML-код
  • Опубликовано: 9 окт 2024

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

  • @gate2ece357
    @gate2ece357 6 месяцев назад +3

    Sir, I am really grateful to you sir. You are great. I really can't afford money what today every platform demands. But whatever you teach here is I think far far better than paid courses. I always refer your playlist of Web development. I always tell your name to anyone who want to learn web development and tell him/her , whatever you want to learn just go through this legend's RUclips channel. Thank you so much sir.

    • @9nikolov
      @9nikolov 6 месяцев назад +2

      Keep leveling up bro 💪

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

    i watched a couple of videos that talk about DOM and this one is by far the best one that i watched, thank you Dave !

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

    So many methods covered, but I love coding along and testing them out in my own IDE. Wonderful tutorial as always, thank you!!! 🙌

  • @trending.music21
    @trending.music21 3 года назад +2

    Thank you!! I like the way you show the result right after the commands and elaborating the commands briefly. Very clear. (y)

  • @9nikolov
    @9nikolov 6 месяцев назад +1

    Brilliant explanation of the DOM ❤

  • @kithagoras
    @kithagoras 3 года назад +3

    wow dude...this video is incredibly well made

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  3 года назад +1

      Thank you! 🙏

    • @kithagoras
      @kithagoras 3 года назад

      No thank you Dave... I finally found the best RUclips channel and RUclipsr out there... You're a genius in teaching programming

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  3 года назад +1

      @@kithagoras I sincerely appreciate the kind words!

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

    Great tutorial. I have zero doubts after this. Keep creating new content

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

    For all of you who are wondering, at 11:47 we are selecting all even divs with "(2n)". Selecting odd ones would be "(2n+1)".
    Even better and less complicated alternative for beginners would be "(even)" and "(odd)".

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

    great video, thank you. Just covering the basics of JS to move to React.

  • @Grihlo
    @Grihlo 2 года назад

    Thank you Dave! That was another useful video. The real magic is getting closer, can't wait to see the next tutorials. It takes more time to understand but I don't want to just skip it quickly, I realise that these are the essential basics which are really important.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 года назад

      Great job! 🙏🚀

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

      @@DaveGrayTeachesCode hey Dave, your courses have been really helpful so far. But I got stuck here on DOM...right from the beginning every time I try to console.log(view1) from the const view1 = document.getElementById("view1");. It keeps return null on the console and I couldn't go further on with this particular topic...any suggestions on what could be the problem??

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

      @@mysticalKins If the element with an id attribute of view1 exists in your html document, then look at how you are loading your Javascript file. If in the head section, make sure you have defer in the script tag.

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

      @@DaveGrayTeachesCode thanks alot...I finally figured it out after watching the next lesson (listeners) my script tag was in the head tag all this while🙈🙈..

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

      @@mysticalKins @davegray . Now the console is returning this (section#view1.view.view1) I am still confused.

  • @CondeAlberto
    @CondeAlberto 2 года назад +1

    High quality tutorial as usual.

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

    As ever your content is awesome! Thank you

  • @asifahmed6568
    @asifahmed6568 3 года назад

    Hey just found your channel really like your content keep posting😃

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

    this is the most fun lesson!

  • @Salah-YT
    @Salah-YT 2 года назад +1

    thx bro it is a good video but it is nicer if u show the HTML code at the beginning so thx anyway

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 года назад +2

      You're welcome! There should be a link to that HTML source code in the description.

    • @Salah-YT
      @Salah-YT 2 года назад +1

      @@DaveGrayTeachesCode ok thank u so much

  • @Subham-Kun
    @Subham-Kun Год назад +1

    2:06 Here when I try to console.log(view1), the console returns "null". I thought something was wrong with my code, so I got the project from the provided GitHub link. But still the issue persists. I use an extension/plugin known as Quokka, & it shows "document is not defined" in red (I use the "Prettier" extension). Can anyone help me ?

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

      Same problem, did u fix it?

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

      You do need to link JS with the HTML file in tag like below:

  • @josiahcommey5965
    @josiahcommey5965 2 года назад +1

    Mr Dave sir when I do this
    Const view1 = document.getElementById(“view”);
    Console.log(view1);
    The console returns bill even though I have created a section element with an id “view1” and I have also linked my Js to the html I dot know why please help me

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 года назад +1

      Hello, Josiah - I can only recommend to go back over the video and look for what you might have missed. One little thing can cause an error, and I would only be guessing about your code from here.

    • @josiahcommey5965
      @josiahcommey5965 2 года назад +2

      I just watched your video on top 10 beginner mistakes and thanks to you I just found out I had to add the defer keyword to my script tag thanks a lot

  • @ruslangilyazov7733
    @ruslangilyazov7733 5 месяцев назад +1

    There is a lot of information.

  • @80Vikram
    @80Vikram 2 года назад

    Can you please clarify meaning of "Model" in DOM ? I didn't understand this nomenclature very well.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 года назад +2

      Yes, in programming the term "model" often refers to a data structure. For the DOM, it is referring to the structure of the document. The document is an object with properties and the structure of it all is predetermined by the model.

    • @80Vikram
      @80Vikram 2 года назад

      @@DaveGrayTeachesCode Thanks for quick response

  • @aya2222
    @aya2222 3 года назад

    Thank you! it would be helpful if you can share HTML coding with us!

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  3 года назад +1

      Thanks for the request! 😀

    • @anshultamrakar6210
      @anshultamrakar6210 3 года назад +1

      @@DaveGrayTeachesCode hey dave , Please share the HTML coding as well, it would be really helpful

  • @maxaluta3618
    @maxaluta3618 3 года назад

    Where can I find the HTML and CSS for this lesson? Thanks.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  3 года назад

      While the focus is on the Javascript, I have had this requested a few times - so I just uploaded it to Github 😀 Here is the HTML and CSS (I used SCSS) for the tutorial: github.com/gitdagray/javascript_dom_tut

    • @Abe-Oluwatomisin
      @Abe-Oluwatomisin Год назад

      ​pls I can't access the link

    • @Abe-Oluwatomisin
      @Abe-Oluwatomisin Год назад

      There's nothing in this link pls

  • @Really_riel
    @Really_riel 2 года назад

    when I put this last code
    for (let i = 1; i

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 года назад

      Can you provide a timestamp for where I need to look in the video to refresh my memory? It will help me answer your question.

    • @Really_riel
      @Really_riel 2 года назад

      @@DaveGrayTeachesCode Thanks for the swift reply . 34:02

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 года назад

      @@Really_riel the parent element will control flex-row vs flex-column. Ensure the view2 styles are set as displayed - they start around line 50. Flex direction is row. Also, make your browser window wide enough for 3 columns or a narrow window could result in less.

    • @Really_riel
      @Really_riel 2 года назад +1

      @@DaveGrayTeachesCode I just found out why I had that issue was because I didn't write the styles in camel case
      I wrote this :
      view2.style.flexdirection = "row";
      instead of:
      view2.style.flexDirection = "row";
      Thanks for helping out. keep putting out great videos!!!

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

    34:15 The flex-box isn't working properly for me, can someone please help me out.

  • @shineLouisShine
    @shineLouisShine 2 года назад

    I would have actually feel much much much more comfortable with this video -
    if you would only kindly give us just a small, short, tiny, quick, super fast snap shot -
    On the CSS (/the divs syles).
    However.....
    Thank you.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  2 года назад +1

      Thank you - there is a link in the description for the HTML & CSS code.

    • @shineLouisShine
      @shineLouisShine 2 года назад +1

      Thank you very much indeed! :)

  • @Abe-Oluwatomisin
    @Abe-Oluwatomisin Год назад

    Sir pls link to HTML and css code

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

      Answered on Twitter. For questions, please join my Discord instead of asking on all social media.