#22 JS: HTML DOM Fundamentals

2021 iThome 鐵人賽

DAY 22

Modern Web

Learn & Play JavaScript -- Entry-Level Front-End Web Development系列第 22 篇

13th鐵人賽 front-end frontend javascript dom

Vida Lin

2021-09-22 09:08:29

956 瀏覽

分享至

What is the HTML DOM?

"The HTML DOM is a standard object model and programming interface for HTML. It defines:

The HTML elements as objects
The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements." by W3C School

Further intro: click here.

Example

Before

After we click the Lucky Draw button

The way I coded it:

<!DOCTYPE html>
<html>
<head>
<title>JS - HTML DOM</title>
<script type="text/javascript">
function LuckyDraw() {
    var spanObj=window.document.getElementById("reward"); 
    /*
    This syntax changes the content of an HTML element when it’s needed. 
    "window" can be omitted. 
    We name an id, reward, to revise the body easily. 
    spanObj is a tag Object. It is related with <span id="reward">pineapple cheese</span>. 
    */
 
    spanObj.innerHTML="lemon"; //innerHTML is a property for us to easily modify the content of an HTML element.
    spanObj.style.color="green";
    spanObj.style.fontFamily="Arial"; //When CSS transfers to JS, the second word should be written in capital letter. 
    spanObj.style.fontWeight="bold";
    spanObj.style.display=none;
}
 
</script>
</head>
<body style="font-family:Arial">
    <div>
        Congratulations! You won a piece of <span id="reward">pineapple cheese</span> cake!
    </div>
    <button onclick="LuckyDraw();">Lucky Draw</button>
</body>
</html>

Music of Today: Lover Boy by Phum Viphurit

Like/Share/Follow

Feel free to comment and share your ideas below to learn together!
If you guys find this article helpful, please kindly do the writer a favor — LIKE this article.