Help in Learning

1

Hi everyone,
Few days back i started learning javascript but when i see code there is lot things like (document.queryselector),(onclick) etc i havent learn this sort of things i learnt, class, object, function etc i need help what we call this part of javascript
which has (document.queryselectorall) type of things and where i can learn them?
help shall be highly appreciated.

2

What you learned was the basics of JavaScript. How to create variables, functions. What you saw is the DOM(Document Object Model) Manipulation for HTML. JavaScript was intended for use with HTML. That’s why it has all of these:

document.getElementById();
document.getElementsByClassName();
document.querySelector();
document.querySelectorAll();
document.body;
document.getElementByTagName();
//and much more

So what it essentially does is grab the HTML element using the selector above, and you can store it in a variable, or modify it.
Here’s an example of how it works:
HTML

<p id="change-me">Change Me</p>

This will display Change Me on the page. then this is where JavaScript comes in.

var paragraph = document.getElementById("change-me");
paragraph.innerHTML("Hello There, I changed the text");

Now, the text will be changed to Hello There, I changed the text.
This is also where the library jQuery comes in, but don’t focus on that yet. Learn more about vanilla JavaScript First.

This is an event listener. You can give an element an event listener, you can do this using the .addEventListener(); function. Here’s how you do it.

<p id="just-a-paragraph">Click-Me</p>

JavaScript

var paragraph = document.getElementById("just-a-paragraph");
paragraph.addEventListener("click")

OR

var paragraph = document.getElementById("just-a-paragraph");
paragraph.onclick = function() {//codes here}

So when the paragraph is clicked, it will run the code. There are more event listeners in JS.

As of learning it, I know FreeCodeCamp have a course for jQuery, but I don’t know if it has JavaScript DOM Api. I learned how to use the DOM Api on KhanAcademy. Here’s the link:

https://www.khanacademy.org/computing/computer-programming/html-css-js

3 Likes