create account

JS Dom & Tricks By albro by albro

View this thread on: hive.blog |  peakd.com |  ecency.com
hive-169321 · @albro ·
$7.48
JS Dom & Tricks By albro
<center>![JS Dom & Tricks](https://files.peakd.com/file/peakd-hive/albro/23viREBHANfvmqJf3ZCcPX1C1JVrSMy43V5i5eskFxJjDg6gTo4VgVBtJYYQ1jAzyypfA.png)</center>

<p>In this post, I'm talking about DOM, the most important and practical topic in JavaScript.</p>
<h3>What is DOM?</h3>
<p>DOM stands for Document Object Model. Using the DOM you can modify, delete or create HTML document elements!</p>
<p>In fact, DOM is one of the World Wide Web Consortium (W3C) standards that defines a standard for document access:</p>
<p><blockquote> The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.</blockquote></p>
<p>This W3C standard is divided into three parts:</p>
<ol>
    <li>Core DOM: Standard model for all types of documents</li>
    <li>XML DOM: Standard model for XML documents</li>
    <li>HTML DOM: The standard model for HTML documents</li>
</ol>
<p>When your web page loads, the browser creates an object-oriented model of the page. In the case of HTML language, this model is made as a tree of different objects. Do not look at the image below:</p>

<center>![HTML Tree](https://files.peakd.com/file/peakd-hive/albro/23twAKVLErbTRLoF8omsomLLor9MNWWDKhWNNc4u21qKo6mNdE4udwzWUCNnooUHoR52A.gif)</center>

<p>Based on this tree, JavaScript can access a variety of HTML elements:</p>
<ul>
    <li>JavaScript can modify all HTML elements on a page</li>
    <li>JavaScript can change all attributes of HTML elements</li>
    <li>JavaScript can change all CSS directives on the page</li>
    <li>JavaScript can remove all attributes and various HTML elements</li>
    <li>JavaScript can create new HTML elements on the page</li>
    <li>JavaScript can react to page events and do various things</li>
    <li>JavaScript can create various events on the page</li>
</ul>
<p>These are functions of DOM and JavaScript!</p>
<h3>Working with the DOM</h3>
<p>When I talk about DOM properties, I mean values that can be set (such as changing the content of HTML elements), and when I talk about DOM methods, I mean actions that I can perform (such as removing or adding elements).</p>
<p>In the example below, I want to change the content (which is <code>innerHTML</code>) of a <code>&lt;p&gt;</code> tag that has <code>"id="demo"</code>:
</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;My First Page&lt;/h2&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
document.getElementById("demo").innerHTML = "Hello World!";
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Change DOM](https://files.peakd.com/file/peakd-hive/albro/23uFwDcUQZ8QHJ8DrqvXV6NYX2MboJQaukZbu8K2pAAnC13WDvnCgdiGCWQ1xCvgPqcdV.png)</center>

<p>In the example above, <code>getElementById</code> is a method, but <code>innerHTML</code> is a property; The <code>getElementById</code> method, as the name suggests, receives an HTML element and passes it to JavaScript, then <code>innerHTML</code> displays its content. We can change this content to change the content of the tag as well.</p>
<p>There are many ways to access HTML elements, and accessing via <code>id</code> is one of the most common ways, as you saw in the example above. You should also know that <code>innerHTML</code> can access the content of all HTML elements, even <code>&lt;html&gt;</code> and <code>&lt;body&gt;</code></p>
<h3>document object</h3>
<p>The document object represents your web page and is the owner of all other objects in the HTML document. So if you want to access an element in HTML, you have to start with the <code>document</code> object.</p>
<p>To find HTML elements:</p>
    <table>
        <thead>
            <tr>
                <th>
                    Method
                </th>
                <th>
                    Description
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    document.getElementById(<i>id</i>)
                </td>
                <td>
                    Find element using id
                </td>
            </tr>
            <tr>
                <td>
                    document.getElementsByTagName(<i>name</i>)
                </td>
                <td>
                    Find element using tag name
                </td>
            </tr>
            <tr>
                <td>
                    document.getElementsByClassName(<i>name</i>)
                </td>
                <td>
                    Find element using class name
                </td>
            </tr>
        </tbody>
    </table>
<p>To modify HTML elements:</p>
    <table>
        <thead>
            <tr>
                <th>
                    property
                </th>
                <th>
                    Description
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <i>element</i>.innerHTML =&nbsp; <i>new html content</i>
                </td>
                <td>
                    Modify the innerHTML (content) of an element
                </td>
            </tr>
            <tr>
                <td>
                    <i>element</i>.<i>attribute = new value</i>
                </td>
                <td>
                    Changing the attribute value of an element
                </td>
            </tr>
            <tr>
                <td>
                    <i>element</i>.style.<i>property = new style</i>
                </td>
                <td>
                    Change the style (CSS) of an element
                </td>
            </tr>
        </tbody>
    </table>
<p></p>
    <table>
        <thead>
            <tr>
                <th>
                    Method
                </th>
                <th>
                    Description
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <i>element</i>.setAttribute<i>(attribute, value)</i>
                </td>
                <td>
                    Changing the attribute value of an element
                </td>
            </tr>
        </tbody>
    </table>
<p>To add or remove HTML elements:</p>
    <table>
        <thead>
            <tr>
                <th>
                    Method
                </th>
                <th>
                    Description
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    document.createElement(<i>element</i>)
                </td>
                <td>
                    Constructing an HTML element
                </td>
            </tr>
            <tr>
                <td>
                    document.removeChild(<i>element</i>)
                </td>
                <td>
                    Remove an HTML element
                </td>
            </tr>
            <tr>
                <td>
                    document.appendChild(<i>element</i>)
                </td>
                <td>
                    Add an HTML element
                </td>
            </tr>
            <tr>
                <td>
                    document.replaceChild(<i>new, old</i>)
                </td>
                <td>
                    Replace an HTML element
                </td>
            </tr>
            <tr>
                <td>
                    document.write(<i>text</i>)
                </td>
                <td>
                    Write to the output of an HTML element
                </td>
            </tr>
        </tbody>
    </table>
<p>To add events:</p>
    <table>
        <thead>
            <tr>
                <th>
                    Method
                </th>
                <th>
                    Description
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    document.getElementById(<i>id</i>).onclick = function(){<i>code</i>}
                </td>
                <td>
                    Add event handler to onclick event
                </td>
            </tr>
        </tbody>
    </table>
<h3>Accessing HTML objects</h3>
<p>When HTML DOM Level 1 was introduced in 1998, only 11 HTML and ... objects were introduced, which are still valid in HTML5, but many more were added later in HTML DOM Level 3. I have provided some of these items for you in the following tables:</p>
    <table>
        <thead>
            <tr>
                <th>
                    property
                </th>
                <th>
                    Description
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    document.anchors
                </td>
                <td>
                    Returns all <code>&lt;a&gt;</code>s that have an attribute named <code>name</code>
                </td>
            </tr>
            <tr>
                <td>
                    document.baseURI
                </td>
                <td>
                    Returns base URI of the document
                </td>
            </tr>
            <tr>
                <td>
                    document.body
                </td>
                <td>
                    Returns us the <code>&lt;body&gt;</code> element
                </td>
            </tr>
            <tr>
                <td>
                    document.cookie
                </td>
                <td>
                    It returns all the cookies in the document
                </td>
            </tr>
            <tr>
                <td>
                    document.doctype
                </td>
                <td>
                    Returns the doctype
                </td>
            </tr>
            <tr>
                <td>
                    document.documentElement
                </td>
                <td>
                    Returns the <code>&lt;html&gt;</code> element
                </td>
            </tr>
            <tr>
                <td>
                    document.documentMode
                </td>
                <td>
                    Returns the mode used by the browser
                </td>
            </tr>
            <tr>
                <td>
                    document.documentURI
                </td>
                <td>
                    Returns the URI of the current document
                </td>
            </tr>
            <tr>
                <td>
                    document.domain
                </td>
                <td>
                    Returns the domain name of the document server
                </td>
            </tr>
            <tr>
                <td>
                    document.embeds
                </td>
                <td>
                    Returns all <code>&lt;embed&gt;</code> elements
                </td>
            </tr>
            <tr>
                <td>
                    document.forms
                </td>
                <td>
                    Returns all <code>&lt;form&gt;</code> elements
                </td>
            </tr>
            <tr>
                <td>
                    document.head
                </td>
                <td>
                    Returns the <code>&lt;head&gt;</code> element
                </td>
            </tr>
            <tr>
                <td>
                    document.images
                </td>
                <td>
                    Returns all <code>&lt;img&gt;</code> elements
                </td>
            </tr>
            <tr>
                <td>
                    document.implementation
                </td>
                <td>
                    Returns all DOM implementations
                </td>
            </tr>
            <tr>
                <td>
                    document.inputEncoding
                </td>
                <td>
                    Returns the encoding (character set) of the document.
                </td>
            </tr>
            <tr>
                <td>
                    document.lastModified
                </td>
                <td>
                    Returns the date and time when the document was last updated
                </td>
            </tr>
            <tr>
                <td>
                    document.links
                </td>
                <td>
                    Returns all <code>&lt;area&gt;</code> and <code>&lt;a&gt;</code> that have <code>href</code>
                </td>
            </tr>
            <tr>
                <td>
                    document.readyState
                </td>
                <td>
                    Returns the loading position of the document
                </td>
            </tr>
            <tr>
                <td>
                    document.referrer
                </td>
                <td>
                    Returns the URI of the linked document (referrer)
                </td>
            </tr>
        </tbody>
    </table>
<p>The main use of the JavaScript language (at least in the web context) is to change HTML elements and their styles, and it does not do much by itself (in the frontend); That is, we try to learn different JavaScript statements so that we can use them later in changing the shape of HTML elements. Of course, the JavaScript language is not limited to the frontend and is used in many cases such as the backend.</p>
<h3>Access to HTML elements</h3>
<p>Using JavaScript, we can access all kinds of HTML tags, but we need to learn how to do this. There are different ways to access these elements, and each way has its own statements and usage; These access ways are:</p>
<ul>
    <li>
        Accessing HTML elements by <code>id</code> (like <code>id="first"</code>)
    </li>
    <li>
        Accessing HTML elements through the tag itself (such as <code>&lt;p&gt;</code>)
    </li>
    <li>
        Accessing HTML elements by class name (eg <code>class="first"</code>)
    </li>
    <li>
        Accessing HTML elements through CSS selectors (such as <code>.first</code>)
    </li>
    <li>
        Accessing HTML elements through collections of HTML objects (such as forms)
    </li>
</ul>
<h3>Access through id</h3>
<p>The easiest way to access HTML tags is through <code>id</code>; For this, you need to use the <code>getElementById()</code> statement:</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;Finding HTML Elements by Id&lt;/h2&gt;
&lt;p id="intro"&gt;Hello World!&lt;/p&gt;
&lt;p&gt;This example demonstrates the &lt;b&gt;getElementsById&lt;/b&gt; method.&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML = 
"The text from the intro paragraph is " + myElement.innerHTML;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![getElementById](https://files.peakd.com/file/peakd-hive/albro/23uRLAvwUHwFud6eNnd3Unf99FZewN36gSg2MdLbycLTaKMQi4GVYD6pmi1p5hLnkDLAB.png)</center>

<p>If the HTML tag is found by our JavaScript statement, it will be returned as an object, but if nothing is found, it will return <code>null</code>.</p>
<h3>Access through the tag itself</h3>
<p>One of the other ways to access HTML elements is through the name of the tag itself; For this, you need to use the <code>getElementsByTagName()</code> statement. In the following example, I want to find all <code>&lt;p&gt;</code> elements:</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;Finding HTML Elements by Tag Name&lt;/h2&gt;
&lt;p&gt;Hello World!&lt;/p&gt;
&lt;p&gt;This example demonstrates the &lt;b&gt;getElementsByTagName&lt;/b&gt; method.&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'The text in first paragraph (index 0) is: ' + x[0].innerHTML;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![getElementsByTagName](https://files.peakd.com/file/peakd-hive/albro/23uFwS9vX4qpwM3akCeSMbiU2cb1g8cNMMh4yyvyitEy1bxeWhC8pEu2TxNV5NpvVCKDa.png)</center>

<p>If you pay attention, in this example, all <code>p</code> tags are returned to us like an array/object, and we deal with them in the same way (using index <code>0</code>).</p>
<p>These examples can be made more advanced; The following code first finds elements that have <code>id="main"</code> and then finds elements that have <code>&lt;p&gt;</code> tags and are inside main:</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;Finding HTML Elements by Tag Name&lt;/h2&gt;
&lt;div id="main"&gt;
&lt;p&gt;The DOM is very useful.&lt;/p&gt;
&lt;p&gt;This example demonstrates the &lt;b&gt;getElementsByTagName&lt;/b&gt; method.&lt;/p&gt;
&lt;/div&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![getElementsByTagName](https://files.peakd.com/file/peakd-hive/albro/23uFwSAz719V9vHHW9C9YfYXoUdBodcmG4RoXTiEnJtpTBucELtBYak95HGJoULuYRUuo.png)</center>

<h3>Access by class</h3>
<p>If you want to find all the HTML elements that belong to the same class, you should use the <code>getElementsByClassName()</code> statement. For example, the following code finds all elements that have <code>class="intro"</code>:</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;Finding HTML Elements by Class Name&lt;/h2&gt;
&lt;p&gt;Hello World!&lt;/p&gt;
&lt;p class="intro"&gt;The DOM is very useful.&lt;/p&gt;
&lt;p class="intro"&gt;This example demonstrates the &lt;b&gt;getElementsByClassName&lt;/b&gt; method.&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![getElementsByClassName](https://files.peakd.com/file/peakd-hive/albro/23viTTuZaT2LJ3oTyfxNYNUsFCask2BXn2h7LBHH7vtwaqvAqmDS2JQ3iYSok6nrQLyGe.png)</center>

<p>Note: This statement does not work in Internet Explorer 8 and earlier versions.</p>
<h3>Access through CSS selectors</h3>
<p>If you want to find all HTML elements that match a specific CSS selector, you can use the <code>querySelectorAll()</code> statement. CSS selectors are things like <code>id</code>, <code>class</code>, <code>attributes</code>, <code>attribute value</code>, etc.</p>
<p>In the following example, we want to find all <code>&lt;p&gt;</code>s that contain <code>class="intro"</code>:</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;Finding HTML Elements by Query Selector&lt;/h2&gt;
&lt;p&gt;Hello World!&lt;/p&gt;
&lt;p class="intro"&gt;The DOM is very useful.&lt;/p&gt;
&lt;p class="intro"&gt;This example demonstrates the &lt;b&gt;querySelectorAll&lt;/b&gt; method.&lt;/p&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3>Access through the HTML objects</h3>
<p>The best way to learn this type of access is by example. In the following example, I want to find the form with <code>id="frm1"</code> among the HTML forms and show its different values:</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;Finding HTML Elements Using document.forms&lt;/h2&gt;
&lt;form id="frm1" action=""&gt;
  First name: &lt;input type="text" name="fname" value="Donald"&gt;&lt;br&gt;
  Last name: &lt;input type="text" name="lname" value="Duck"&gt;&lt;br&gt;&lt;br&gt;
  &lt;input type="submit" value="Submit"&gt;
&lt;/form&gt; 
&lt;p&gt;Click "Try it" to display the value of each element in the form.&lt;/p&gt;
&lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
function myFunction() {
  var x = document.forms["frm1"];
  var text = "";
  var i;
  for (i = 0; i &lt; x.length ;i++) {
    text += x.elements[i].value + "&lt;br&gt;";
  }
  document.getElementById("demo").innerHTML = text;
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Access HTML objects](https://files.peakd.com/file/peakd-hive/albro/23tcNngg3uT86E615Bq3EMGTQXqJsEoXavZx19dwVNhGVDb4KebZgFXXyC1BLtDLXgdkJ.png)</center>

<p>If you go to the output of the above code and then click on the <code>try it</code> button, you will see that the different values of the form (<code>First name</code>, <code>Last name</code> and <code>submit</code>) will be displayed for you. Now enter your name and family in the form and click on the <code>try it</code> button again. This time your name and family will be displayed!</p>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 435 others
properties (23)
authoralbro
permlinkjs-dom-and-tricks-by-albro
categoryhive-169321
json_metadata"{"app":"peakd/2023.11.3","format":"markdown","author":"albro","description":"In this post, I'm talking about DOM, the most important and practical topic in JavaScript.","tags":["development","programming","threads","gosh","neoxian","chessbrothers","stem","tricks","hive-engine","leofinance"],"users":[],"image":["https://files.peakd.com/file/peakd-hive/albro/23viREBHANfvmqJf3ZCcPX1C1JVrSMy43V5i5eskFxJjDg6gTo4VgVBtJYYQ1jAzyypfA.png","https://files.peakd.com/file/peakd-hive/albro/23twAKVLErbTRLoF8omsomLLor9MNWWDKhWNNc4u21qKo6mNdE4udwzWUCNnooUHoR52A.gif","https://files.peakd.com/file/peakd-hive/albro/23uFwDcUQZ8QHJ8DrqvXV6NYX2MboJQaukZbu8K2pAAnC13WDvnCgdiGCWQ1xCvgPqcdV.png","https://files.peakd.com/file/peakd-hive/albro/23uRLAvwUHwFud6eNnd3Unf99FZewN36gSg2MdLbycLTaKMQi4GVYD6pmi1p5hLnkDLAB.png","https://files.peakd.com/file/peakd-hive/albro/23uFwS9vX4qpwM3akCeSMbiU2cb1g8cNMMh4yyvyitEy1bxeWhC8pEu2TxNV5NpvVCKDa.png","https://files.peakd.com/file/peakd-hive/albro/23uFwSAz719V9vHHW9C9YfYXoUdBodcmG4RoXTiEnJtpTBucELtBYak95HGJoULuYRUuo.png","https://files.peakd.com/file/peakd-hive/albro/23viTTuZaT2LJ3oTyfxNYNUsFCask2BXn2h7LBHH7vtwaqvAqmDS2JQ3iYSok6nrQLyGe.png","https://files.peakd.com/file/peakd-hive/albro/23tcNngg3uT86E615Bq3EMGTQXqJsEoXavZx19dwVNhGVDb4KebZgFXXyC1BLtDLXgdkJ.png"]}"
created2024-01-17 06:05:54
last_update2024-01-17 06:05:54
depth0
children7
last_payout2024-01-24 06:05:54
cashout_time1969-12-31 23:59:59
total_payout_value3.739 HBD
curator_payout_value3.744 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length21,287
author_reputation30,477,419,385,789
root_title"JS Dom & Tricks By albro"
beneficiaries
0.
accounthive-169321
weight200
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id130,545,098
net_rshares18,333,612,372,494
author_curate_reward""
vote details (499)
@chessbrotherspro · 
<h3>Congratulations!</h3><hr /><div class="pull-right"><img src="https://files.peakd.com/file/peakd-hive/chessbrotherspro/AJoJKGVARKHFCTHG7ee3GNkn5RMN7wixeJ52ipAgzDZ4QmeTcBdsk8hpi4pgj4e.png" alt="You have obtained a vote from CHESS BROTHERS PROJECT"/></div><div class="text-justify"><h3>✅ Good job. Your post has been appreciated and has received support from <a href="/@chessbrotherspro"><b>CHESS BROTHERS</b></a> ♔ 💪</h3><p><br>♟ We invite you to use our hashtag <b>#chessbrothers</b> and learn more <a href="/@chessbrotherspro/introducing-chess-brothers-project-the-most-innovative-community-combining-chess-fitness-and-more"><b>about us</b></a>.</p><p>♟♟ You can also reach us on our <a href="https://discord.gg/73sK9ZTGqJ" rel="noopener" title="This is going to take you to the Discord of Chess Brothers"><b>Discord server</b></a>  and promote your posts there. </p><p>♟♟♟  Consider <a href="/@chessbrotherspro/teamwork-is-worthwhile-join-the-chess-brothers-healing-trail-supporting-the-work-being-done-and-earning-rewards"><b>joining our curation trail</b></a> so we work as a team and you get rewards automatically.</p><p>♞♟ Check out our <a href="/@chessbrotherspro"><b>@chessbrotherspro</b></a> account to learn about the curation process carried out daily by our team.</p><br>🥇 If you want to earn profits with your HP delegation and support our project, we invite you to join the <i>Master Investor</i> plan. <a href="/@chessbrotherspro/master-investor-plan-or-programa">Here you can learn how to do it.</a></div><div class="text-center"><p><br>Kindly</p><p><strong><em>The CHESS BROTHERS team</em></strong></p></div>
👍  
properties (23)
authorchessbrotherspro
permlinkre-js-dom-and-tricks-by-albro-20240119t051754z
categoryhive-169321
json_metadata"{"app": "beem/0.24.26"}"
created2024-01-19 05:17:54
last_update2024-01-19 05:17:54
depth1
children0
last_payout2024-01-26 05:17:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,628
author_reputation77,589,492,571,269
root_title"JS Dom & Tricks By albro"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id130,597,332
net_rshares42,219,497,928
author_curate_reward""
vote details (1)
@eniolw · 
You can use var when it comes to declaring global variables, and yet the extra features they have compared to let and const are nominal and barely useful.

Congrats!
👍  
properties (23)
authoreniolw
permlinkre-albro-2024118t174247383z
categoryhive-169321
json_metadata{"tags":["development","programming","threads","gosh","neoxian","chessbrothers","stem","tricks","hive-engine","leofinance"],"app":"ecency/3.0.37-vision","format":"markdown+html"}
created2024-01-18 21:42:48
last_update2024-01-18 21:42:48
depth1
children0
last_payout2024-01-25 21:42:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length165
author_reputation253,380,279,630,946
root_title"JS Dom & Tricks By albro"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id130,590,150
net_rshares43,961,061,311
author_curate_reward""
vote details (1)
@gwajnberg · 
That is a good class, when I started to learn front end programming this knowledge was essential and it isn't easy for those used with back end
<center>https://files.peakd.com/file/peakd-hive/dlmmqb/23tkn1F4Yd2BhWigkZ46jQdMmkDRKagirLr5Gh4iMq9TNBiS7anhAE71y9JqRuy1j77qS.png</center>

<center> <b>
Want to Know more about Hivepakistan? 

Ping Us On [Hive Pakistan Discord server](https://discord.gg/3FzxCqFYyG)

To support HivePakistan, delegate Hive Power to hivepakistan and earn 90% curation reward :) 

Here are some handy links for delegation

</b>
</center>

<center>| [50 HP](https://hivesigner.com/sign/delegateVestingShares?delegator=&delegatee=hivepakistan&vesting_shares=50%20HP) | [100 HP](https://hivesigner.com/sign/delegateVestingShares?delegator=&delegatee=hivepakistan&vesting_shares=100%20HP) |[500 HP](https://hivesigner.com/sign/delegateVestingShares?delegator=&delegatee=hivepakistan&vesting_shares=500%20HP) | [1000 HP](https://hivesigner.com/sign/delegateVestingShares?delegator=&delegatee=hivepakistan&vesting_shares=1000%20HP) | [5000 HP](https://hivesigner.com/sign/delegateVestingShares?delegator=&delegatee=hivepakistan&vesting_shares=5000%20HP) | [10000 HP](https://hivesigner.com/sign/delegateVestingShares?delegator=&delegatee=hivepakistan&vesting_shares=10000%20HP) | [20000 HP](https://hivesigner.com/sign/delegateVestingShares?delegator=&delegatee=hivepakistan&vesting_shares=20000%20HP) |

A delegation of 500 or more HP makes you earn Hivepakistan supporter badge.

</center>
👍  , ,
properties (23)
authorgwajnberg
permlinkre-albro-s7ey7u
categoryhive-169321
json_metadata{"tags":["hive-169321"],"app":"peakd/2023.11.3"}
created2024-01-17 16:09:30
last_update2024-01-17 16:09:30
depth1
children0
last_payout2024-01-24 16:09:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,509
author_reputation364,736,081,958,753
root_title"JS Dom & Tricks By albro"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id130,557,083
net_rshares41,462,246,043
author_curate_reward""
vote details (3)
@kushyzee · 
Is there a reason you use var to declare variables? It's generally considered bad practice to do that, it's better you use const and let when declaring variables. Good job by the way
👍  , ,
properties (23)
authorkushyzee
permlinkre-albro-2024117t75452141z
categoryhive-169321
json_metadata{"type":"comment","tags":["hive-169321","development","programming","threads","gosh","neoxian","chessbrothers","stem","tricks","hive-engine","leofinance"],"app":"ecency/3.0.44-mobile","format":"markdown+html"}
created2024-01-17 06:54:54
last_update2024-01-17 06:54:54
depth1
children1
last_payout2024-01-24 06:54:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length183
author_reputation91,879,023,731,471
root_title"JS Dom & Tricks By albro"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id130,545,729
net_rshares41,683,148,913
author_curate_reward""
vote details (3)
@albro · 
You are absolutely right!😮‍💨 This is a bad habit!!!!😪
👍  ,
properties (23)
authoralbro
permlinkre-kushyzee-2024117t153752464z
categoryhive-169321
json_metadata{"tags":["hive-169321","development","programming","threads","gosh","neoxian","chessbrothers","stem","tricks","hive-engine","leofinance"],"app":"ecency/3.0.37-vision","format":"markdown+html"}
created2024-01-17 12:07:54
last_update2024-01-17 12:07:54
depth2
children0
last_payout2024-01-24 12:07:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length53
author_reputation30,477,419,385,789
root_title"JS Dom & Tricks By albro"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id130,550,969
net_rshares86,706,737
author_curate_reward""
vote details (2)
@poshthreads · 
https://inleo.io/threads/albro/re-leothreads-2rq3p5grs
<sub> The rewards earned on this comment will go directly to the people ( albro ) sharing the post on LeoThreads,LikeTu,dBuzz.</sub>
👍  
properties (23)
authorposhthreads
permlinkre-albro-js-dom-and-tricks-by-albro-1181
categoryhive-169321
json_metadata"{"app":"Poshtoken 0.0.2","payoutToUser":["albro"]}"
created2024-01-17 06:17:27
last_update2024-01-17 06:17:27
depth1
children0
last_payout2024-01-24 06:17:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length188
author_reputation415,471,585,053,248
root_title"JS Dom & Tricks By albro"
beneficiaries
0.
accountnomnomnomnom
weight10,000
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id130,545,225
net_rshares43,080,840,085
author_curate_reward""
vote details (1)
@stemsocial ·
re-albro-js-dom-and-tricks-by-albro-20240118t214338743z
<div class='text-justify'> <div class='pull-left'>
 <img src='https://stem.openhive.network/images/stemsocialsupport7.png'> </div>

Thanks for your contribution to the <a href='/trending/hive-196387'>STEMsocial community</a>. Feel free to join us on <a href='https://discord.gg/9c7pKVD'>discord</a> to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.&nbsp;<br />&nbsp;<br />
</div>
👍  
properties (23)
authorstemsocial
permlinkre-albro-js-dom-and-tricks-by-albro-20240118t214338743z
categoryhive-169321
json_metadata{"app":"STEMsocial"}
created2024-01-18 21:43:39
last_update2024-01-18 21:43:39
depth1
children0
last_payout2024-01-25 21:43:39
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length565
author_reputation22,903,676,462,363
root_title"JS Dom & Tricks By albro"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id130,590,175
net_rshares44,859,246,236
author_curate_reward""
vote details (1)
Help/Feedback