choice blog

식별자 (==Access Attribute (접근 속성))

id : 고유한 식별을 목적으로 하는 경우, javascript에서 접근하기, 검사용, html 파일당 한 개만 유효(중복 불가)

class : 재사용을 목적으로 하는 경우, CSS에서 디자인적인 요소, 다중 설정이 가능(중복 허용) 

name :  form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성, 다중 설정 가능(중복 허용)

 

※ 동일한 id명은 불가하지만, id=name명이 같은 경우는 허용된다.

---

id 사용예제 1

<p id="pid">p tag id pid</p>
<p id="pid">p tag id pid</p>

<script type="text/javascript">
	document.getElementById("pid").innerHTML = 'p태그 입니다';
</script>

 

실행화면

 

 

p tag id pid

p tag id pid

 

설명

동일한 id로 두 개의 태그에 사용할 경우 처음 설정된 p태그만 변경된 것을 볼 수 있다.

id는 고유하기 때문에 한 페이지당 1개만 사용 가능! 중복이 불가하다.

 

---

id 사용예제 2

<div id="demo" style="background-color: #ffffff">Hello JS CSS</div>
<button type="button" onclick="func()">적용</button>
<script type="text/javascript">
function func() {
	// div태그의 통째를 가져온다(인스턴스)
	let obj = document.getElementById("demo");
	// div태그에 모든 요소에 접근 할 수 있다.
	obj.style.color = "white";
	obj.style.backgroundColor = "blue";
	obj.style.textAlign = 'center';
	obj.style.borderStyle = 'double';
	obj.style.borderColor = "red";
	obj.style.fontFamily = "MS PGothic";
	obj.style.fontStyle = 'italic';
	obj.style.fontSize = '24pt';
}
</script>

실행화면

 

적용

 

설명

div태그에 id값 설정 후 JS 함수 안에서 div태그의 id를 불러오면 div태그의 모든 요소에 접근이 가능하다.

 

 

class 사용예제

<p class="cls"> p tag class cls</p>
<p class="cls"> p tag class cls</p>
<h2 class="cls"> h2 tag class cls</h2>
<script type="text/javascript">
	document.getElementsByClassName('cls')[0].innerHTML = 'class는 cls입니다';
	document.getElementsByClassName('cls')[1].innerHTML = 'class는 cls입니다';
</script>

 

실행화면

 

 

p tag class cls

p tag class cls

h2 tag class cls

 

설명

class는 index 번호로 접근을 할 수 있다. 모든 index에 접근하고 싶다면 for문을 사용하면 된다. 중복 사용 가능!

 

 

name 사용 예제

<p name="name">p tag name name</p>
<h2 name="name">p tag name name</h2>
<script type="text/javascript">
document.getElementsByName('name')[1].innerHTML = "name 입니다";	
</script>

실행화면

 

 

p tag name name

p tag name name

 

설명

name는 index 번호로 접근을 할 수 있다. 모든 index에 접근하고 싶다면 for문을 사용하면 된다. 중복 사용 가능!