DOM & Events are too hard to understand in JavaScript.

Answer 1

What is your question?

Answer 2

You have to practice.

Try practicing with a mini-projects, such as To-do List.

Here is my unfinished To-do List tutorial series, the first lesson explains event associated with input element:

https://www.youtube.com/playlist?list=PLkqwj9vc20pUitqvZrLPk-hTNv63EJqwg

Don't give up. Keep practicing.

Answer 3

Someone Nice answer Roopesh!

Answer 4

Basic Javascript without any library or framework.

Basic Javascript is called vanilla Javascript

Answer 5

document.createElements create elements or tags in this case it is <p> tag or element.

document.createTextNode create texts. In this case “some new text” is going to create.

p.appendChild(node) means node will be inside p. like <p> node </p>. Here node is created text which is “some new text”. So, p tag will be like this <p> some new text</p>

lastly p tag is appended to div.

So, it will be <div id="demo"> <p> some new text</p></div>.

I hope you understand.

https://code.sololearn.com/WDllo92Bxa85/?ref=app

Answer 6

What are your questions about it? You need to be more clear si we can help you. Just drop any question by me and I'll try to answer, although I'm not the best coder lol

Answer 7

First try to select elements like :

HTML:
<p id="MyPara">this is a paragraph</p>

JS:
var myPara = document.getElementById("MyPara");

Output:
this is a paragraph

Then try to access the text/content in it :
var text_in_para = myPara.innerText;
var html_in_para = myPara.innerHTML;

And manipulate content in it:
myPara.innerText = "changed content"

Output:
changed content

I also faced problem in DOM but I slowly became comfortable with it .You will be also become comfortable with it...(events are continued)

Answer 8

Have you watched lesson 1 of the tutorial I linked above?

Answer 9

Now add some events , eg: when one click show how many times one clicked on paragraph:
JS:
var count = 0;
myPara.addEventListener("click", function showClickCount () {
count++;
myPara.innerText = "you clicked this " + count + " times";
});

addEventListener add an listener to the paragraph element which calls a given function (in this example it is showClickCount) . When we click on paragraph the count variable increases by 1
And second line displays how many times we clicked on the paragraph.

Our callback function showClickCount can have a event argument, something like :
function showClickCount (event){…}

Putting everything together: https://code.sololearn.com/WEpAK7jTyI6w/?ref=app

For click events event attribute provide you information about the state at which the event was occurred (like when occurred, where occurred, etc.)
But that are little complex and there are dozens of events. But you can start from simple programs and projects like one by Gordon .

Answer 10

Cover all concepts in DOM and Events and understand and implement them, I'm sure if you focus in it, you will become master in DOM and Events. We sololearners are here to help you. Always share your questions (before posting your question search it in sololearn, you will get best answers) to us 🙂

Answer 11

🇮🇳Vivek🇮🇳 this dom & event lesson has very typical words in it. How to inculcate them?

Answer 12

Deepak Sanjaykumar More can you give examples of typical words?

Answer 13

Gordon what is vanilla JavaScript

Answer 14

🇮🇳Vivek🇮🇳
window.onload = function() {
var p = document.createElement("p");
var node = document.createTextNode("Some new text");
p.appendChild(node);

var div = document.getElementById("demo");
div.appendChild(p);
};.
This are the words than I'm not understanding how to use.

Answer 15

AquA217 That whole lesson & relationship between HTML & JavaScript all hard to inculcate.
This are giving headache to understand.

Answer 16

Deepak Sanjaykumar More I try to explain.

Did you understand that part?