Romantic Developer : )

(Web JavaScript) 웹 자바스크립트 DOM (1) 제어대상 찾기 본문

Romantic Developer/Web JavaScript

(Web JavaScript) 웹 자바스크립트 DOM (1) 제어대상 찾기

Romantic_Developer 2018. 7. 30. 16:38

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


오늘은 드디어 DOM 에서의 첫번째 시간입니다.


DOM 은 Document Object Model 입니다. 이 DOM 은 자바스크립트로 웹페이지를 제어하기 위한 객체이며 전역객체 window 중에서 document 객체를 통해 접근이 가능합니다.

Document 객체는 윈도우 위에 로드된 문서를 의미합니다. 


오늘은 윈도우 위에 로드된 document 문서에서  제어의 대상을 찾는 방법에 대하여 실습하도록 하겠습니다.

그럼 바로 시작합니다.


1. getElementByTagName


아래 예제를 보겠습니다.

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
<script>
    var ul = document.getElementsByTagName('ul')[0];//첫번째 ul목록 을 변수 ul에 저장
    var lis = ul.getElementsByTagName('li');//ul 중에 li 태그를 갖는 객체들을 lis 리스트에 저장
    for(var i=0; lis.length; i++){//각 li 객체들의 색상을 red 로 변경
        lis[i].style.color='red';   
    }
</script>
</body>
</html>


script 코드를 보면 ul 태그를 가지는 Elements 중에 ul[0] 즉, 첫번째 ul 목록을 변수 'ul'에 저장합니다.

그리고 lis 라는 리스트에 ul.getElementsByTagName 을 통해 li 리스트를 받아옵니다.

그리고 해당 lis 리스트를 돌며 그 색상을 red 로 변경시킵니다. 결과는 아래와 같습니다.


첫번째 ul 리스트는 빨간색으로 변화된 반면

두번쨰 ol 리스트는 빨간색으로 변화되지 않았습니다.


객체의 개념을 잘 이해하고 있다면 위의 내용을 이해하는데에 큰 무리가 없을 것입니다!


2.getElementsByClassName


아래의 경우는 li 리스트중 CSS 와 JavaScript 에만 active 라는 클래스를 주고 

li list 중에 active 라는 클레스를 가지는 목록만을 조회한 뒤 이를 빨간색으로 변환시킵니다.

<!DOCTYPE html>
<html>
<body>
	<ul>
		<li>HTML</li>
		<li class="active">CSS</li>
		<li class="active">JavaScript</li>
	</ul>
	<script>
		var lis = document.getElementsByClassName('active');
		for(var i = 0; i<lis.length; i++){
			lis[i].style.color = 'red';
		}
	</script>
</body>
</html>

실행 결과는 아래와 같습니다

HTML 을 제외한 나머지 두 목록만 빨간색이 되었습니다.




3. getElementById


ID 값을 이용하여 조회하는 경우가 가장 성능이 좋습니다. 이 경우에는 반드시 element 즉, 하나의 결과값만을 조회할 수 있습니다.

<html>

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li id="active">CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    var li = document.getElementById('active');
    li.style.color='red';
</script>
</body>
</html>


위의 경우에는 id값이 active 를 가지는 CSS 객체만이 그 색상을 red 로 변경합니다.



4. document.querySelector / document.querySelectorAll


단하나의 엘리먼트 혹은 엘리먼트 전체를 선택하고자 할때는 쿼리셀렉터를 사용합니다.

<!DOCTYPE html>
<html>
<body>
	<ul>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
	<ol>
		<li>HTML</li>
		<li class="active">CSS</li>
		<li>JavaScript</li>
	</ol>

	<script>
		var li = document.querySelector('li');
		li.style.color='red';

		// var lis = document.querySelectorAll('li');
		// for(var i = 0; i<lis.length; i++){
		// 	lis[i].style.color = 'blue';
		// }

		var li = document.querySelector('.active');
		li.style.color='blue';
	</script>
</body>
</html>

li 를 querySelector 로 잡아오는 경우에는 아래의 출력결과를 갖습니다.


즉, li 리스트중에 첫번째 값만을 받아옵니다.

반면, querySelectorAll 응 사용하는 경우에는 아래의 출력값을 갖습니다.


즉 전체 li 객체를 가져와 그 내용을 모두 블루로 변경시킵니다. 

코드에서 주석처리된 부분을 참고하시기 바랍니다.


자 이렇게 오늘은 조금 길게 DOM 을 통해서 제어객체 대상을 찾는 방법에 대하여 확인하였습니다.

JS 를 통해 객체를 컨트롤 하기 위해서는 그 객체를 먼저 찾아내는 것이 중요할 것입니다.


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

감사합니다 :)

저작자표시

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

(Web JavaScript) 웹 자바스크립트 DOM (3) jquery 제어대상 찾기  (0) 2018.08.01
(Web JavaScript) 웹 자바스크립트 DOM (2) jquery 사용  (0) 2018.07.31
(Web JavaScript) 웹 자바스크립트 BOM (4) 창제어  (0) 2018.07.29
(Web JavaScript) 웹 자바스크립트 BOM (3) Navigator 객체  (0) 2018.07.28
(Web JavaScript) 웹 자바스크립트 BOM (2) Location 객체  (0) 2018.07.28
'Romantic Developer/Web JavaScript' Related Articles more