<center>![Advanced-Javascript-define-objects.png](https://files.peakd.com/file/peakd-hive/albro/23viR9N3ZeBeruC27BPvW6HJg5pGRw2SJrhes2EADYSUHHPAXFaLx2jeYxDR8EfLnGYqa.png)</center>

<p>
    We can change the HTML content of a page using JavaScript and DOM. To create something that doesn't exist in HTML, the <code>document.write()</code> statement is usually used. This statement directly inserts what we want into the HTML document. For example:
</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;script&gt;
document.write(Date());
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>
    <code><i><strong>Warning</strong></i></code>: Never use <code>document.write()</code> after the page is fully loaded! If the page is loaded, <code>document.write()</code> overwrites the entire page; This means that all your content will be deleted and only the new content you gave to <code>document.write()</code> will be displayed!
</p>
<p>
    Although this statement is powerful, it's rarely used because it sometimes causes problems. Most of the time our intention is to change the existing content. The easiest way to do this is to use <code>innerHTML</code>.
</p>
<p>
    To change the content of HTML elements by <code>innerHTML</code>, you must follow the following structure:
</p>
<pre><code class="language-javascript">document.getElementById(id).innerHTML = new HTML</code></pre>
<p>
    In the following example I want to change the <code>&lt;p&gt;</code> element:
</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;JavaScript can Change HTML&lt;/h2&gt;
&lt;p id="p1"&gt;Hello World!&lt;/p&gt;
&lt;script&gt;
document.getElementById("p1").innerHTML = "This paragraph has been modified by JavaScript codes!";
&lt;/script&gt;
&lt;p&gt;The original text of this paragraph has been modified by JavaScript codes!!!!&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![JavaScript can Change HTML](https://files.peakd.com/file/peakd-hive/albro/23tmmXSvSZNw3bxsVdUo71TYhyBxvQ9yrpwNYBD5tPfgWg5Bgh42DMvUJcgDe4qrGbG8f.png)</center>

<p>
    If you pay attention to the code of the example above, you will notice that the content of the paragraph was originally <code>Hello World!</code>, but nothing like that is displayed for us anymore. The reason is to use JavaScript code to change this content. I used <code>id="p1"</code> to get the element in DOM. Then I changed its content using <code>innerHTML</code>.
</p>
<p>
    <code><i><strong>Note</strong></i></code>: Many times when working with the DOM (like the example above), the HTML source code does not change and the change is visible in the output, so if you encounter such cases, don't assume that your program has a problem.
</p>
<p>
    What if you want to change the value of an attribute? There is a simple structure for this as well:
</p>
<pre><code class="language-javascript">document.getElementById(id).attribute = new value</code></pre>
<p>
    For example, in the following code I want to change the <code>src</code> for <code>&lt;img&gt;</code>:
</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;img id="image" src="https://ecency.com/static/media/logo-circle.2df6f251.svg" width="160" height="120"&gt;
&lt;script&gt;
document.getElementById("image").src = "https://peakd.com/static/img/peakd_logo_white.0091ccd4.svg";
&lt;/script&gt;
&lt;p&gt;The original image that you see in the source code was the ecency logo, but in the new image, the Peakd logo is placed.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Peakd logo](https://files.peakd.com/file/peakd-hive/albro/EopwmoFmAXg8Robqxfqb8Cj2Uu547qXv4WnMFDD4aCfAfWNkmgo1yqVkFPMTgRdyDtx.png)</center>

<p>
    First, I got <code>image</code>, which was the id of our element, through the <code>getElementById</code> statement. Then I have changed the value of the attribute called <code>src</code> to another image.
</p>
<h3>
    Modifying CSS content
</h3>
<p>
    When we say that CSS content is modified by JavaScript, we mean a CSS type:
</p>
<ul>
    <li>
        CSS that is written inline.
    </li>
</ul>
<p>
    Therefore, JavaScript can modify the CSS codes that are inside the HTML document.
</p>
<p>
    To create new styles, we can use this structure:
</p>
<pre><code class="language-javascript">document.getElementById(id).style.property = new style</code></pre>
<p>
    For example, in the following code I want to style the <code>&lt;p&gt;</code> element:
</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;p id="p1"&gt;Hello World!&lt;/p&gt;
&lt;p id="p2"&gt;Hello World!&lt;/p&gt;
&lt;script&gt;
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
&lt;/script&gt;
&lt;p&gt;The paragraph above was changed by a script.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Modifying CSS Content](https://files.peakd.com/file/peakd-hive/albro/23twAKVff8aWyCNKosMJMK2ZnFEaCPyiJyc88JKHWoh9mYzVdYFHB6A6DyZ3SdkAqJ7BL.png)</center>

<p>
    JavaScript can define events. Events are events that are executed when a certain event occurs. For example, clicking on a certain part of the page, loading the page, changing a file, moving the user's mouse over a certain element, etc. All of these are an event. Now we can use events in the context of CSS:
</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h1 id="id1"&gt;My Heading 1&lt;/h1&gt;
&lt;button type="button" 
onclick="document.getElementById('id1').style.color = 'red'"&gt;
Click Me!&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

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

<p>
    In the code above, I received an element with the ID <code>id1</code> (<code>getElementById</code> statement) and then I said that if the user clicks on a certain button (<code>onclick</code>), change the color of our text in <code>h1</code>! You can go to the above code output and see this change by clicking this <code>button</code>.
</p>
<p>
    A more advanced example is to show and hide text:
</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;p id="p1"&gt;
This is a text.&lt;br /&gt;
This is a text.&lt;br /&gt;
This is a text.&lt;br /&gt;
This is a text.&lt;br /&gt;
&lt;/p&gt;
&lt;input type="button" value="Hide Text" onclick="document.getElementById('p1').style.visibility='hidden'"&gt;
&lt;input type="button" value="Display Text" onclick="document.getElementById('p1').style.visibility='visible'"&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>
    Working with DOM is very easy and with a little practice you can master it. I hope you enjoyed this post.
</p>