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

Steadily, for the long haul, without burning out

Mar 31, 2026·9 min
Renewal

Tech-life balance

Feb 7, 2026·3 min
Renewal

Humanality, by Park Jeong-ryeol

Feb 7, 2026·11 min