DEV Community

Cover image for Play With DOM (querySelector) – JavaScript Series – Part 26
Muhammad Ali (Nerdjfpb)
Muhammad Ali (Nerdjfpb)

Posted on • Edited on • Originally published at blog.nerdjfpb.com

Play With DOM (querySelector) – JavaScript Series – Part 26

In last tutorial we worked with the dom for change the styles, now we are going to work with the dom for changing some html.

To change html before we use write. Now we are going to use innerHTML which is going to change the whole text with tag

Example –

Alt Text

Up until now we’ve just used querySelector. If we use this on li then it will just give us first list of the item, so we need to call All of it by querySelectorAll

Alt Text

Can you remember the array? Using index now we can select a element from li and can change it.

Alt Text

Now we can get the parent from a li item by just using parentElement

Alt Text

Like in this way we can use children too

Alt Text

Finally we can use variable to store the selector, so that it will be easy to write something

Alt Text

Can you play with the dom now? If not follow & DM me part you didn’t understand about it!

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

You can see the graphical version here

Source Codes - { Check commits }

GitHub logo nerdjfpb / javaScript-Series

A tutorial for JavaScript Beginners

javaScript-Series

A tutorial for Absolute Beginners of JavaScript.

You can find the total pdf in - Here

You can check the commits to find the part by part codes.

Blogs

Day 1
  • Day 1 - What is JavaScript?
Day 2
  • Day 2 - JavaScript Types?
Day 3
  • Day 3 - Javascript Types Cont.
Day 4
  • Day 4 - Javascript Types Cont.
Day 5
  • Day 5 - Javascript Comparisons
Day 6
  • Day 6 - Javascript Variables
Day 7
  • Day 7 - More About Variables
Day 8
  • Day 8 - Conditional Statement
Day 9
  • Day 9 - More Conditional Statement
Day 10
Day 11
Day 12
Day 13
Day 14
Day 15
Day 16
Day 17

Originally it published on nerdjfpbblog. You can connect with me in twitter or linkedin!

Top comments (0)