📌document.getElement
- document.getElementsByName(이름) 은 object 의 name 을 통해 인식한다.
- id나 name을 이용해서 value 값을 가져오는 건데, 차이점이라면
- getElementById(아이디)로 가져오면 단일값을 가져오고
- getElementsByName(이름)은 해당 이름으로 된 객체를 모두 배열로 받아올 수 있다는 점이다.
<script type="text/javascript">
function chgColor(){
//name 속성값이 "first"인 모든 요소를 선택함.
var selFirstItem = document.getElementsByName("first");
//밑에 li가 name이여서 name인거임 id였으면 Id임
var selId = document.getElementById("kkk");
//선택된 모든 요소의 텍스트 색상을 변경함
for (var i = 0; i < selFirstItem.length; i++){
selFirstItem.item(i).style.color = "red";
} // 한마디로 name을 가진것들의 객체 배열이 selFirstItem에 들어가는 것
// 배열을 변수로 가져오게되면 item이라는 메소드를 사용해야된다.
selId.innerHTML = "이 문장 대체";
}
</script>
</head>
<body>
<h1>dom03</h1>
<h4>name 속성을 이용한 선택</h4>
<p name="first">첫 번째 단락이에요!</p>
<ul>
<li name="first">첫번째 아이템이에요</li>
<li> 두번째 아이템 이에요</li>
<li name="first">세 번째 아이템이에요</li>
<li id="kkk">네 번째 아이템 이에요</li>
<li>다섯 번째 아이템 이에요</li>
</ul>
<button onclick="chgColor()">first색상 Red 변경</button>
</body>
마포구 주민
0개의 댓글
