HTML Element Selectors In JavaScript | JavaScript Tutorial In Hindi #14

Поделиться
HTML-код
  • Опубликовано: 7 сен 2024
  • ►JavaScript Tutorial For Beginners In Hindi Playlist - • JavaScript Tutorials I...
    ►Source Code + Other Material - codewithharry....
    This video is a part of my JavaScript In Hindi Course. JavaScript is a high-level, interpreted programming language that conforms to the ECMAScript specification. JavaScript has dynamic typing, prototype-based object-orientation, and first-class functions.
    Alongside HTML and CSS, JavaScript is one of the best and most demanded technologies of the World Wide Web. JavaScript enables interactive web pages and is a crucial part of web applications. The vast majority of sites use it, and major web browsers have a dedicated JavaScript engine in order to execute it.
    As a multi-paradigm language, it supports event-driven, functional, and imperative programming fashion. It has APIs for dealing with text, arrays, regular expressions, and the DOM, but the language itself does not include any I/O, such as networking, storage, or graphics facilities. It relies upon the host machine environment in which it is embedded to provide these features.
    ►Click here to subscribe - / @codewithharry
    Best Hindi Videos For Learning Programming:
    ►Learn Python In One Video - • Learn Python In Hindi ...
    ►Learn JavaScript in One Video - • JavaScript Tutorial
    ►Learn PHP In One Video - • Learn Php In One Video...
    ►Machine Learning Using Python - • Machine Learning Tutor...
    ►Creating & Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Developmen...
    ►Advanced Python Tutorials - • Intermediate/Advanced ...
    ►Object Oriented Programming In Python - • Object Oriented Progra...
    ►Python Data Science and Big Data Tutorials - • Python Data Science an...
    Follow Me On Social Media
    ►Website (created using Flask) - www.codewithha...
    ►Facebook - / codewithharry
    ►Instagram - / codewithharry
    ►Personal Facebook A/c - / geekyharis
    Twitter - / haris_is_here

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

  • @shresthaa8005
    @shresthaa8005 2 года назад +17

    I have completed C, Html, CSS, and Js in one video as well. you have cleared all my doubts. Thankyou.

  • @danishrajvala9684
    @danishrajvala9684 3 года назад +18

    I must say that this JavaScript playlist is the best, we are really lucky that we are having this content for free, and from the great dev like you sir, I have tried many courses and institutes like Aptech but what you are teaching is more advanced and understandable just because of your teaching styles and hard work, I'm thanking you from the bottom of my heart for everything you have given to us, highly grateful to you and I appreciate your efforts, may God always keep you in his shelter where you keep achieving the success and may your good dreams and wishes come true.
    Kinds regards
    Danishraj
    love from Pakistan
    love you : )

  • @rishabhdarji6818
    @rishabhdarji6818 3 года назад +17

    4:00 if anyone is getting their result as null, just to one simple thing. Cut this from header and past it just above . Your problem will be solved ;). Because when we put in the header the JS code gets loaded pretty quickly it may be not ready at that time, and by keeping it just above the JS code will get pretty much time to get proper load and our problem will get resolved.

  • @sushilprajapati2234
    @sushilprajapati2234 4 года назад +7

    great explanation of the element selector ....

  • @adigul8264
    @adigul8264 4 года назад +4

    May you live long i love your teaching style. Love you😘😘😘😙😙

  • @tushar2627
    @tushar2627 3 года назад +6

    harry you are really amazing man your teaching style is soo nice thanqq for teaching us :-)

  • @mdmatiurrahman7373
    @mdmatiurrahman7373 4 года назад +3

    best teacher ever.....

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

    For Future Reference:
    let element = document.getElementById("myfirst");
    element.className;
    element.childNodes;
    element.parentNode;
    element.style.color="red";
    element.innerText="Harry is a good boy";
    element.innerHTML="Harry is a good boy";
    let sel = document.querySelector('#myfirst');
    document.querySelector('.child');
    document.querySelector('div');
    let elems = document.getElementsByClassName('child');
    console.log(elems[0].getElementsByClassName('child'));
    getElementsByTagName('div');
    13:35 - converting HTML collection into Array

  • @passiveBhai
    @passiveBhai 4 года назад +3

    for style multiple element at once
    let a;
    a = document.querySelectorAll('.child');
    Array.from(a).forEach(function (element) {
    element.style.backgroundColor = 'black';
    element.style.color = 'white';
    })

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

      Console.log bhul gye 😂😂😂

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

    harry bhai it would be more better if have practice sheet in the tutorial as well

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

    Thank you so much sir. your videos are really helpful, well explained and understandable .

  • @ashishkaramchandani4247
    @ashishkaramchandani4247 5 лет назад +3

    Best teacher
    Bhai please java ke tutorial le aao
    Like jisko java ke tutorial chahiye

  • @rahultirkey7950
    @rahultirkey7950 5 лет назад +3

    *Thanks.*
    you cleared my doubts. You deserve more subscribers. Don't stop making tutorials.

  • @manojpatil2457
    @manojpatil2457 3 года назад +8

    When I select 'div' by queryselector('div') and then style it styles the entire texts in the 'div class =container' and it turns green and not just ' Welcome to code with harry'

    • @FlashGaming2018
      @FlashGaming2018 3 года назад +12

      That is because if you notice carefully, the html that harry created in the video has one div inside the body which the first div. All the h1 and other contents are inside that div. Now since document.querySelector('div') targets the first div in the document, therefore all other items also turn green because they are all contained inside the first div.
      Hope this helped!
      Happy Coding!

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

      @@FlashGaming2018
      Thank you yeah I got it after rewatching video ..
      Thanks for your response..

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

    In the line number 23 --- "When you enter sel.style.color ='green' " not only heading is green childs are also green but why ? as we are reading single line selector

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

    thank you sir... love uh..

  • @arindamdutta7369
    @arindamdutta7369 4 года назад +3

    sir how to make money step by step after seeing your videos . thoda roadmap dijie Please

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

    Thanks sir

  • @maheshsonsale1241
    @maheshsonsale1241 4 года назад +7

    Uncaught TypeError: Cannot read property 'style' of undefined

    • @shrimannarayan6494
      @shrimannarayan6494 3 года назад +2

      Bro use ` this symbol and work only on div

    • @AnitaGupta-zs2el
      @AnitaGupta-zs2el 3 года назад +1

      Can uh plz explain properly its still showing uncaught error

    • @ShubhamKumar-og5tm
      @ShubhamKumar-og5tm 3 года назад

      cut the script tag and paste it just above the closing body tag. It will work

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

    I am truly saying that you are the best !!!!

  • @parthapaul4306
    @parthapaul4306 3 года назад +2

    we can use loops to print the elements

  • @sumansaha9824
    @sumansaha9824 5 лет назад +1

    Harry Bro please python Django API's ke uppar video series banao please and thanks for this wonderful tutorials.....
    Ho sake to please reply karna ....

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

    Really you made it easy man !

  • @vinayaksharma-ys3ip
    @vinayaksharma-ys3ip 2 года назад

    Thank You Harry Bhai!!!

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

    Failed to load resource: the server responded with a status of 404 (Not Found)
    pls help me with this error i have my files connected properly.

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

    Thanks, bro..

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

    What is the difference between document.getElementById and document.write
    I am having different outputs when using this on loops

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

    Thanx Harry

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

    just masterpiece

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

    hatts off harry bhai..... keepit up
    love from pakistan

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

    Excellent explanation, big fan!!

  • @megawatt6699
    @megawatt6699 4 года назад +1

    you are great bro

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

    need help,
    I am creating a table, I want to show the table, and from each row, there will be a edit button, so how to use that edit button in each row, for different person's data.
    how to do undefined table's getElement, I mean please help

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

    Very interesting video...thanks Harry Bhai

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

    keep selected dependent dropdown by database after submit

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

    document.querySelector('.someid') giving me null in console but if i am using class name after dot it is giving me that element in console and getting same result with #someClsName

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

    What is the difference between parentElement and parentNode?
    console.log(document.getElementById("child1").parentNode, "parent node");
    console.log(document.getElementById("child1").parentElement, "parent element");

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

    Array.from(document.body.getElementsByTagName("p")).forEach(function(ele){console.log(ele.innerText)})

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

    Harry is very GOOD boy

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

    05:16 sir why you had same div with two ids first id = 'myfirst' and then id = 'first' its confusing.

  • @shahmirnazir1902
    @shahmirnazir1902 4 года назад +2

    Sir koe website bta dein jahan sy humein sare properties mil jaen you told in this video.

  • @Karthik-kt24
    @Karthik-kt24 3 года назад

    Thank you very much bhai

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

    hi harrybhai
    Uncaught TypeError: Cannot read properties of null (reading 'style')

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

    Very helpful video 👍

  • @satishbaghel7678
    @satishbaghel7678 4 года назад +1

    Sir please node is ke bhi tutorial banaiye please

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

    I have only one script tag in my html file. But document.scripts is consoling that I have 2 scripts ? Why ?

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

    Thank you bhai ❤️

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

    My Method is Different. I found it when i spend hours so please chech it out -
    // This will Give me link which contains text "Abhishek" inside 'href' attribute in 'anchor tag'.
    let myText = "Abhishek";
    for (let i = 0; i < document.links.length; i++) {
    let myLink = document.getElementsByTagName("a")[i].getAttribute("href");
    let boolVar = a.includes(myText);
    if (boolVar) {
    console.log(myLink);
    };
    };
    During finding solutions i found difference between .innerHTML and .outerHTML-
    1)innerHTML : HTML inside the selected element. Only content inside tag.
    2)outerHTML : HTML inside the selected Element + HTML of the selected element. Including Tags and Attributes.

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

    Sir when i use let it gives unexpected identifier error and when i use const it doesn't give ??

  • @Babarkhan-qo1jx
    @Babarkhan-qo1jx 2 года назад

    any one can explain me why we use JavaScript to change things in our css? we can change it directly from our css?? why we use this selector to change our css??

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

    thank you so much sir

  • @VikasKumar-fw2fo
    @VikasKumar-fw2fo 2 года назад

    Sir mere laptop may query. Selector nahi chll raha baar baar error show krr raha hai can you tell me about problem of solution

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

    Great hai Sir

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

    thank you brother

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

    Amazing explanation

  • @muhammadhamza1073
    @muhammadhamza1073 4 года назад +1

    sir g yha tak ham chezen dakhi but ye smjh nai arha k ye web main inak kia use ha

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

    Why i get this error [HTTP/1.1 404 Not Found 0ms]??

  • @sagarhaldar7559
    @sagarhaldar7559 4 года назад

    Thank you 💝

  • @engineerbhai7642
    @engineerbhai7642 5 лет назад

    Excellent video

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

    let element =document.getElementById("print").innerText="Email format is matched";
    element.style.color="pink";
    css is not working why???color of text is no changed when i used above code

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

    You are the best teacher
    Harry Sir

  • @ShivaSingh-gg1yx
    @ShivaSingh-gg1yx 2 года назад

    i am not getting output in console after writing
    let element = document.getElementById('myfirst');
    console.log(element);
    O/p in console is 'null'
    why is this happening?
    if you know please let me know

    • @ShivaSingh-gg1yx
      @ShivaSingh-gg1yx 2 года назад

      yes i have already created 'myfirst' id in html file

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

      Use myFirst instead of myfirst.

  • @user-pd1bq6qv9b
    @user-pd1bq6qv9b 5 лет назад +2

    Luv uh bruh😘😍

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

    document.querySelectorAll(); yeeh wala bhi toha hae nah ??

  • @countryball-orgn.
    @countryball-orgn. 5 месяцев назад

    How to use childnodes

  • @maheshsonsale1241
    @maheshsonsale1241 4 года назад +1

    Uncaught TypeError: Cannot read property 'style' of undefined
    please tell about this

    • @enthoharsh7403
      @enthoharsh7403 4 года назад +1

      same problem with me !

    • @ujjwalkumar9216
      @ujjwalkumar9216 4 года назад +2

      Use window.onload= function() {
      Your code
      }
      This will solve your problem. It was happening with me too.

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

      put , before tag

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

    *Thanks *

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

    Done done again

  • @ishtiaqahmad4118
    @ishtiaqahmad4118 4 года назад

    Good explained I.A.Siddiqui Karachi

  • @hemantagrahari4298
    @hemantagrahari4298 4 года назад

    Useful lecture

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

    let element = document .getElementById("myfirst");
    ->>> it returning null value. why?

    • @akash-lz2dq
      @akash-lz2dq 3 года назад

      mila bhai solution ?? mera bhi yhi aaa rha hai

  • @creationofislam
    @creationofislam 5 лет назад

    Please make a video about bash ...sehll language

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

    thankuu. Meoww

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

    Hiii sirr I am getting this error while running the javascript code in the console
    Tut16.js:41 Uncaught TypeError: Cannot read property 'getElementsByClassName' of undefined
    at Tut16.js:41

  • @shubhamsharma-ro2gr
    @shubhamsharma-ro2gr 3 года назад

    Awesome video

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

    I would like to see you on Sundeep maheshwari stage..

  • @RoshanKumar-xs9yx
    @RoshanKumar-xs9yx 5 лет назад

    Tq sir...

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

    now getting interested

  • @lovelife-xm2xj
    @lovelife-xm2xj 2 года назад

    How to change inner html content dynamicaly

  • @dilipsunar99
    @dilipsunar99 4 года назад +1

    Why is mine showing undefined in the console .. please reply

    • @sagarhaldar7559
      @sagarhaldar7559 4 года назад

      show me the code

    • @dilipsunar99
      @dilipsunar99 4 года назад +1

      @@sagarhaldar7559 done bhai 😊 but I need to using the console itself and not the text editor 😊Thanks for the concern

  • @milanbehera509
    @milanbehera509 4 года назад +1

    bhai...jab v mein document.getelementbyId(myfirst); likhta hun tab console mein *null* show kyun kqr raha h?

    • @nishantprajapati9974
      @nishantprajapati9974 4 года назад

      myfirst ko quotes m likho

    • @godupliftsyou5426
      @godupliftsyou5426 4 года назад +3

      Sometimes application need some time interval to load webpage,
      Please follow below code,
      setTimeout(function(){
      let element = document.getElementById('myfirst');
      console.log(element);
      }, 2000);
      Hope it should work for all !!

    • @sohilpathan7168
      @sohilpathan7168 4 года назад +1

      @@godupliftsyou5426 it worked bro thank you so much!!!

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

      @@godupliftsyou5426 But Why Bro ? Why we can not use only document.getElementById('something');

  • @artistnahiart3728
    @artistnahiart3728 4 года назад +1

    solution vdo kahan hai?

  • @JustForProgrammers
    @JustForProgrammers 4 года назад

    Best Bro

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

    as a non css user, it was really hard to understand this tutorial.

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

    Harry bhai getelementbyid ki output null aa raha hai
    Plz solution 🙏🙏
    Btw video is fantastic

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

      script ko head m add maat kro body m kro nhi ayega null

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

    Bhaii live server nahi chal Raha hai .js file mein

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

    love to learn

  • @Jadon09
    @Jadon09 5 лет назад

    Nice video

  • @life2hell7503
    @life2hell7503 5 лет назад

    Sir xampp use nhi ho pa rha h uski vjah se mai aage Ka kaam nhi kr pa rha hu kya kru

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

    Sir what do u mean from access the playlist?

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

    kehna kya chahte ho

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

    where can i find practice questions?

  • @nishantprajapati9974
    @nishantprajapati9974 4 года назад +1

    harry bhai itni language ati h apko or apse syntex bhi mix nhi hote kyu?

  • @kushjaiswal9364
    @kushjaiswal9364 5 лет назад

    Sir plz make c++

  • @RohanDasRD
    @RohanDasRD 5 лет назад +2

    Jo bhi bolo Bhai thumbnail har series ka mast banate hi

  • @sohilpathan7168
    @sohilpathan7168 4 года назад

    sir whenever i am typing let element = document.getElementById("myfirst"); it showing null in console why????

    • @jenilgandhi9941
      @jenilgandhi9941 4 года назад

      koi problem hoga typing me
      id me myfirst ka synatx check kar lo

    • @soumitrosaha8793
      @soumitrosaha8793 4 года назад

      I also faced the same problem and could not get what is the problem is. And I’m gonna make sure that there were no typing or syntax errors but the problem is not fixed. Does anyone have any suggestions regarding THIS issue?

    • @desmondmiles8474
      @desmondmiles8474 4 года назад

      "myfirst" ko "myFirst" try...reply if it solves the problem...
      let element = document.getElementById("myFirst");

    • @sagarhaldar7559
      @sagarhaldar7559 4 года назад

      console.log(element);
      ye karlo , fir ayega sab kuch..

    • @pawankohad6702
      @pawankohad6702 3 года назад +2

      put , before tag

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

    nice

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

    sel= document.querySelector('div');
    sel.style.color= 'cyan';
    console.log(sel);
    aisa krne pe mere baki div ke v color change ho rhe hain.

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

      sir please meko thoda clear kre qki jb aap v kr rhe ho toh usme v baki div ke v color change ho rhe hain .

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

      @@anjalimoon619 exactly same question here, did you get the answer please reply.

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

      All turns green

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

      @@bhavingadhiya3844 becoz all the div is inside the

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

      @@anjalimoon619 becoz all the div is inside the

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

    document.getelementbyclassname and queryselector me kya diffrence hai ?

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

    when i am use element selector it show null in console what is this error can you help me

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

      Hey Bro Same problem with me if you have any solution then please tell me ?

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

      @@jaydesai1176 I found this solution use Javascript tag in bottom line before head element