Back to feed
Renewal·서른의 생활코딩

Sample Source 5) JavaScript Basic Document Structure: DOM (2)

NS
normalstory
cover image



Sample Source 5) JavaScript Basic Document Structure: DOM (2)






Example 1)

typeof to display alert windows for each item in the shopping list. 





<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>dom test</title>

</head>


<body>

<h1> Shopping list</h1>

<p title="mustHave">Things to definitely buy..</p>

<ul id="buy">

<li>Milk </li>

<li>Cheese </li>

<li>Juice </li>

</ul>

<script type="text/javascript">

//<![CDATA[

var lis =document.getElementById("buy").getElementsByTagName("li");

for(var i=0;i<lis.length;i++)

{

alert(typeof lis[i]);

}

//]]>

</script>

</body>

</html>







예제 2 )

Let's modify attributes inside the document and show their values in an alert window. 





<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>dom test</title>

</head>


<body>

<h1> Shopping list</h1>

<p title="mustHave">Things to definitely buy..</p>

<ul id="buy">

<li>Milk </li>

<li>Cheese </li>

<li>Juice </li>

</ul>

<script type="text/javascript">

//<![CDATA[

/*

Example 1) 

var lis =document.getElementById("buy").getElementsByTagName("li");

for(var i=0;i<lis.length;i++)

{

alert(typeof lis[i]);

}*/

var ps=document.getElementsByTagName("p");   //p테그에 접

alert(ps[0].getAttribute("title"));   // Read the first

's title attribute value 

ps[0].setAttribute("title","a list of item");    // Change the first

's title value 

alert(ps[0].getAttribute("title"));   // Verify the changed value 

//]]>

</script>

</body>

</html> 

This English version was translated by Claude.

친절한 찰쓰씨
Written by
친절한 찰쓰씨

Pleasant Charles — UI/UX researcher at AIT. Keeping notes on design, planning, and slow days here since 2010.

More on the author's page

Keep reading

Renewal

Why You Should Use .html Instead of .md Seeing Is Believing

Jul 25, 2026·1 min
Renewal

The Most Important Thing About AX

Jul 17, 2026·2 min
Renewal

디지털 기술과 혁신에 대한 논고(지탱하는 힘)

Jul 17, 2026·5 min