Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 10, 2022 07:41 pm GMT

Start Using JS with the DOM

If you are a beginner programmer who has been learning Javascript then you might only use it with node and want to see how you can add actual functionality to a website with it, well, I'm gonna explain that in this post.

Accessing the DOM

Part of the popularity of Javascript is due to the fact that it is executed directly in the browser, so to access an HTML document from our scripts we will need 2 tools: the element and the Document Object Model (DOM).<br></p><div class="highlight"><pre class="highlight html"><code><span class="nt">&lt;</span><span class="err">!</span><span class="na">DOCTYPEhtml</span><span class="nt">&gt;</span><span class="nt">&lt;html&gt;</span><span class="nt">&lt;head&gt;</span><span class="nt">&lt;title&gt;</span>My first page<span class="nt">&lt;/title&gt;</span><span class="nt">&lt;script&gt;</span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Hello world</span><span class="dl">"</span><span class="p">)</span><span class="nt">&lt;/script&gt;</span><span class="nt">&lt;/head&gt;</span><span class="nt">&lt;body&gt;</span><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"./example1.js"</span> <span class="na">async</span><span class="nt">&gt;&lt;/script&gt;</span><span class="nt">&lt;h1&gt;</span>Hello people<span class="nt">&lt;/h1&gt;</span><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"./example2.js"</span> <span class="na">defer</span><span class="nt">&gt;&lt;/script&gt;</span><span class="nt">&lt;/body&gt;</span><span class="nt">&lt;/html&gt;</span></code></pre></div><p></p><p>Now we will be explaining the code above:<br>The script element can be used like the CSS <style> element and usually goes inside the <head> tag, with our JS going inside the tag, it is by default parsed like a normal HTML tag, which can lead to problems when accessing elements later in the document.</p><p><strong>Script element attributes:</strong></p><ul><li>src: Allows us to attach an external JS file so we don&#39;t have to write the scripts directly on the page. Some names for JS files are app.js and main.js.</li><li>defer: Changes the way in which the JS loads, going from being loaded by order in the document to being downloaded and finally executed at the end of the parsing (read by the browser) of the rest of the document.</li><li>async: Changes the way in which the JS loads, going from being loaded by order in the document to being downloaded while the rest of the elements continue to be parsed and to be executed as soon as possible.</li></ul><p><strong>DOM:</strong> The Document Object Model forms the HTML into a tree structure and allows JS access to it. To access an element you can use css selectors with the querySelector method, id names with getElementByID and obtain an array of elements and classes respectively with getElementsByTagName getElementsByClassName, all these methods accompanied by the prefix document that means what we call in css :root (<html>).<br></p><div class="highlight"><pre class="highlight javascript"><code><span class="kd">let</span> <span class="nx">myButtons</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">'</span><span class="s1">button</span><span class="dl">'</span><span class="p">);</span><span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">button</span> <span class="k">of</span> <span class="nx">myButtons</span><span class="p">)</span> <span class="p">{</span> <span class="nx">button</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span><span class="s2">`This is a button`</span><span class="p">;</span><span class="p">}</span><span class="nx">myDropdown</span> <span class="o">=</span> <span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">dropdown</span><span class="dl">'</span><span class="p">);</span><span class="nx">myDropdown</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">background</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">blue</span><span class="dl">'</span><span class="p">;</span></code></pre></div><p></p><p>The elements have their own properties, being treated as objects, this allows us to access their css as well with the style property.<br>To access any CSS properties with JS you must use your property name and convert it to camel case, for example display stays the same but background-color or grid-template-areas become backgroundColor and gridTemplateAreas.</p>


Original Link: https://dev.to/chabulsqu/start-using-js-with-the-dom-4acd

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To