Romantic Developer : )

(Web JavaScript) 웹 자바스크립트 DOM (6) 식별자 API 본문

Romantic Developer/Web JavaScript

(Web JavaScript) 웹 자바스크립트 DOM (6) 식별자 API

Romantic_Developer 2018. 8. 4. 17:00

안녕하세요! 영감을 주는 개발자 방민방민입니다.


오늘은 Element 객체에 대하여 집중적으로 알아보고자 합니다. 


Element 객체는 각각의 엘리먼트를 추상화 한 객체입니다. HTMLElement 에 대한 이해를 위해서는 DOM 에 대한 이해가 반드시 있어야 합니다.

DOM 구조에서 Element 의 위치는 아래 그림과 같습니다.(출처 : 생활코딩)


이러한 엘리먼트 객체가 가지는 주요 기능은 아래와 같습니다.

식별자

문서내에서 특정한 엘리먼트를 식별하기 위한 용도로 사용되는 API

  • Element.classList
  • Element.className
  • Element.id
  • Element.tagName

조회

엘리먼트의 하위 엘리먼트를 조회하는 API

  • Element.getElementsByClassName
  • Element.getElementsByTagName
  • Element.querySelector
  • Element.querySelectorAll

속성

엘리먼트의 속성을 알아내고 변경하는 API

  • Element.getAttribute(name)
  • Element.setAttribute(name, value)
  • Element.hasAttribute(name);
  • Element.removeAttribute(name);



오늘은 이러한 엘리먼트의 기능 중, 식별자 기능에 대하여 학습하고자 합니다!

Element 에서는 보통 Id 값이나. class 값을 식별자로 사용합니다. 그 중 식별자 API 는 식별자를 가져오고, 변경하는 역할을 할 수 있습니다.



1. Element.tagName


아래의 코드를 먼져 살펴 보도록 하겠습니다. 

<!DOCTYPE>
<html>
	<head>
		
	</head>
	<body>
		<script src = 'jquery.js'></script>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li id="active" class="important current">JavaScript</li>
		</ul>
		
		<script>
			console.log(document.getElementById('active').tagName)
		</script>
	</body>
</html>


위의 스크립트 코드는, Id가 active 인 엘리먼트를 변수에 저장하고 해당 변수의 테그 네임 'LI' 를 출력합니다.

즉 active 라는 id 를 갖는 엘리먼트 JavaScript 는 LI 엘리먼트라는 것을 의미합니다.


주의해야 할 점은, 이렇게 한번 정해진 엘리먼트의 TagName 은 사용자가 임의로 변경시킬 수 없다는 점입니다. 즉, 변수 var tn = document.getElmentById('active') 를 하여 tn 에 저장시킨 상태에서 tn.tagName = 'a';  와 같이 변경시켜도 li tag는 a tag 로 변경되지 않습니다.



2. Element.id


id 는 단 웹 프로그램 상에서 단 하나만 존재하는 식별자입니다. 이러한 id 식별자는 사용자 임의로 그 값의 변경이 가능합니다. 아래의 코드를 보시겠습니다

<!DOCTYPE>
<html>
	<head>
		
	</head>
	<body>
		<script src = 'jquery.js'></script>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li id="active" class="important current">JavaScript</li>
		</ul>
		
		<script>
			var active = document.getElementById('active');
			console.log(active.id);
			active.id = 'deactive';
			console.log(active.id);
		</script>
	</body>
</html>

위의 코드는 active 라는 id 를 갖는 엘리먼트인 JavaScript 를 가져와 그 active 라는 변수에 저장하고, active.id 즉 기존 'active' 를 'deactive' 로 바꾸는 코드입니다.



3. Element.className


클레스는 여러개의 엘리먼트를 그룹핑할 때 사용합니다.

이러한 클레스는 class 가 아닌 , className 을 통해 조회가 가능합니다.

<!DOCTYPE>
<html>
	<head>
		
	</head>
	<body>
		<script src = 'jquery.js'></script>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li id="active" class="important current">JavaScript</li>
		</ul>
		
		<script>
			var active = document.getElementById('active');
			active.className = "important current";
			console.log(active.className);
			active.className += " readed";
			console.log(active.className);
			active.className = "important";
			console.log(active.className);
		</script>
	</body>
</html>


이는 아래와 같은 결과를 출력합니다.

이렇게 클레스 네임의 문자열은 추가할 수도 있고 변경할 수도 있습니다. 



4. Element.classList


클레스 리스트는 클레스 네임보다 조금더 편리하게 사용할 수 있습니다.

<!DOCTYPE>
<html>
	<head>
		
	</head>
	<body>
		<script src = 'jquery.js'></script>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li id="active" class="important current">JavaScript</li>
		</ul>
		
		<script>
			function loop(){
				for(var i = 0; i<active.classList.length; i++){
					console.log(i,active.classList[i]);
				}
			}
		</script>
		<input type="button" value="DOMTokenList" onclick="console.log(active.classList);" />
		<input type="button" value="조회" onclick="loop();" />
		<input type="button" value="추가" onclick="active.classList.add('marked');" />
		<input type="button" value="제거" onclick="active.classList.remove('important');" />
		<input type="button" value="토글" onclick="active.classList.toggle('current');" />
		 
	</body>
</html>


아래 스크립트 코드를 보시면, 조회, 추가, 제거, 토글이 가능합니다.

조회, 추가, 제거는 명확하나 토글의 경우에는 온오프 스위치 처럼, 있으면 없애고 , 없으면 있게 추가해 주는것이 가능합니다.


클레스를 사용하는 이유는 엘리먼트들의 묶음 들을 한번에 조작하거나, 디자인을 바꾸거나 하는것에 사용합니다.


이는 이후에 실질적으로 엘리먼트 집단을 조작할때 사용합니다.


웹 자바스크립트에서 식별자 API 에 대하여 알아보았습니다.

지금까지 영감을 주는 개발자 방민방민이었습니다. :)

저작자표시

'Romantic Developer > Web JavaScript' 카테고리의 다른 글

(Web JavaScript) 웹 자바스크립트 DOM (8) Element jQuery  (0) 2018.08.06
(Web JavaScript) 웹 자바스크립트 DOM (7) 조회 API  (0) 2018.08.05
(Web JavaScript) 웹 자바스크립트 DOM (5) jQuery객체  (0) 2018.08.03
(Web JavaScript) 웹 자바스크립트 DOM (4) HTML element  (0) 2018.08.02
(Web JavaScript) 웹 자바스크립트 DOM (3) jquery 제어대상 찾기  (0) 2018.08.01
'Romantic Developer/Web JavaScript' Related Articles more