Dom Selector – JavaScript Series – Part 24

In last tutorial we started the magic dom manipulation. Today we are going to learn about the dom selector so that we can select a dom part and change it as we want. Let’s start

I made a new html for us to edit. Have a look, code available in github

Now go to console and type document.get it will bring the autocomplete other options

So there is lot of different selector write ? We can use them to select something and edit that. We’re going to start from the tag select.

Now by just writing document.getElementsByTagName("h1") we can grab the h1. see

We got and HTMLCollection and in 0 we can see see the classname also. So how can get the value ?

Just using document.getElementsByTagName("h1")[0]

To avoid writing this big thing we can just write document.querySelector("h1") which is goint to give the same thing for use

So can you select the elements you have in your html ?

Other posts of this series can be found here – https://blog.nerdjfpb.com/tag/javascript/

View this post on Instagram

I've started this tutorial for the people who wanted to start javaScript. But there are so many long long tutorials for them. Also it need time to finish. So I tried to make this small and just one part in one day. Easy to take and within some days, you'll atleast able to understand the js and work with it. I'm not hoping that you'll learn advance topics, but atleast you'll learn the basics and it will help you in long run. We are going to learn about the DOM SELECTOR today. This is going to give us the power to select any part in the dom 😎 Lets do it. Also Check the git codes, if you need to check any — https://github.com/nerdjfpb/javaScript-Series . . . #Webdevloper #freelancewebdeveloper #freelancedeveloper #codinginspiration #responsivewebdesign #python3 #freecodecamp #uidesigners #learnprograming #buildupdevs #ecommercestartup #programmersday #javascriptdeveloper #appdesigner #startupusa #peoplewhocode #fullstackdevloper #fullstack #pythonprogramming #uiuxdesign #codelife #devlife #developerlife #programmerlife #coderlife #learntocode #Worldcode #codinglife #nerdjfpb

A post shared by Nerdjfpb : Tech Santoryu (@nerd_jfpb) on Feb 18, 2020 at 1:13am PST

See the codes – https://github.com/nerdjfpb/javaScript-Series

Find me on social media – twitter, linkedin