DEV Community

Deepak Poojary
Deepak Poojary

Posted on

DOM basics(The why and the what)

Note:

Please note that I am a beginner in this and I found that sharing what I learn keeps me motivated in learning to code and helps me learn better and you can read about this technique called learning in public here

If you're an expert and you did find some mistake please comment it below as they say when you point the mistake the person never forgets that😂. Also note that I will keep updating it as and when I learn new things.

Introduction

Rules: Just listen: below you will get the complete article on it then you have to teach it to somebody else.
DOM= document object model.

Know that it's built due to pain in something [[business#Pain points]] as everything else:

Okay so suppose you're on Instagram.com and it does give you personalised notifications right and instagram doesn't keep changing their websites to just help you

THis is where [[DOM]] comes into play they break your html website into objects and just change the the small object which needs to be changed.

Let's say somebody spills milk on your socks, do you change the entire dress or only the socks?

You can change the change

Every object has a property and methods.

Property: colour, nos of shoes and doors.

methods: break(), stop,

How to download or start using java Script

Inline

Inline basically means we are using opening up a html tag and basically changing the attributes of it.
<body> </body = Normal html docs

<body onload="alert('hello');" = inline boys.

Internal

Basically puting all your websites java code between the script tag like this. And this is inside the <body> tag.

<script type="text/javascript">
alert("hello");
</script>

External

<script src="index.js" charset="utf-8"></script>
"

Positioning

Now where will you position or place the above code?

Unlike [CSS] you have to place this at the end after all your content is displayed cause you computer should run the elements like <h1> first before doing any changes to the behaviour.

It makes sence right you can't make the dog stand if you don't have a dog in the first place.😂

Changing text with JS

document.querySelector("input").click();

How to select any document and provide a hands off free

document.firstElementChild.lastElementChild.etc;

document.element

What are selectors

In [[CSS]] you probably know the syntax i.e
h1{color:red} here the h1 is the selector.

Popular

document.QuerySelectorALL("#list .item)"

Top comments (1)

Collapse
 
johlun99 profile image
johlun99 • Edited

Well first of all, welcome to the wonderful world of webdev! Secondly, there actually was a few small things i noticed I thought I might share.

  1. I noticed under the javascript -> internal section where you mention that you put your "java" code between script tags. What I think you mean here is javascript right? Java and javascript are two vastly different languages and if you're interested in reading more on that subject as well I'll post a link below, but basically javascript tried to get on the hype of java when they launched so they named it quite similarly. :)

geeksforgeeks.org/difference-betwe...

  1. Javascript -> positioning: Well, there are no rules that you have to put your javascript in the end and can be put elsewhere in your code. The thing there that's important is to make sure they're in the right order, for an example if you use JQuery, then Jquery should be included first in order for the code to be "visible" for your own code who uses it later. Although it's preffered to have the javascript at the end of the body tag, this is mostly because of performance reasons. Since when a page is renderd and let's say the browser sees a script tag, it will run it on the spot creating a bit of lag before it can continue loading in the page. Therefore if you load the javascript last it will make the page seem to load faster.

hackinbits.com/interview-questions...

Hope I could help out a bit, and just like the original post if you find any inaccuracies/possibilities for improvement. Let me know! :)

But in the meantime, hope I could help and happy coding!