Languages/Java Script

[Js] DOM | DOM 제어대상 찾기 | Javascript DOM

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다.

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다. 초급 웹 개발 프로그래밍 언어 JavaScript 온라인 강의 자바스크립트 강좌

www.inflearn.com

위 강의 중 기초적인 내용이나, 필요 지식 등의 내용은 따로 포스팅 하지 않겠습니다. (html, css, 실습 환경 등..)

DOM을 통해 문서를 제어하기 위해서는 제어 대상을 찾을 수 있어야 한다. 찾은 후 작업을 하는 것이다.

우리는 브라우저가 만들어놓은 객체를 찾을 수 있어야 한다.

제어 대상을 찾기

Document Object Model로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다.

window 객체의 document 프로퍼티를 통해서 사용할 수 있다. Window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다. DOM의 하위 수업에서는 문서를 제어하는 방법에 대한 내용을 다룬다.

document.getElementsByTagName

문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다. getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다.

NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다.

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

위 예시는 마치 <li style="color:red"> 와 동일한 의미를 지닌다.

이렇게 되면, document객체가 이 문서 전체를 의미한다고 했을 때, 태그의 이름이 li인 엘리먼트들을 가져와서 그 결과를 리턴하는 것이고, 리턴하는 값은 결국 li의 해당하는 각각의 태그들의 객체를 담은 유사 배열이 되는 것이다.

(유사 배열은 배열은 아니지만 비슷하게 동작하기 때문에 이렇게 명칭한다)

위와 같이 작성할 경우 문서 전체를 의미하는 것이고, 조회 대상을 좁히고 싶다면 아래와 같이 특정 객체를 지정하면 된다. 이러한 특성은 다른 메소드에서도 모두 적용된다.

<!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에 해당하는 객체를 찾는다.
    var lis = ul.getElementsByTagName('li'); //ul하위의 엘리먼트만 조회한다.
    for(var i=0; lis.length; i++){
        lis[i].style.color='red';   
    }
</script>
</body>
</html>

이중에서 ul뒤 [0]이라는 배열은 무엇을 의미하는 걸까?

저 배열이 의미하는 것은 ul이라는 객체 중에 해당하는 순서를 의미한다. 즉 0이라고 하면 ul태그로 묶은 묶음 중 첫번째 묶음을 의미하고, 1이라고 한다면 위와 같이 두번째의 해당하는 ul태그를 담아오는 것이다.

document.getElementsByClassName

다른 방법으로 태그를 조회하는 방법도 있다. 바로 classname을 기준으로 하여 조회하는 방법인 것이다.

아래 코드를 보면 html에서는 class라 명칭하지만, javascript에서는 ClassName으로 칭한다.

<!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>

인자로 전달할 때, 클래스 네임을 가진 엘리먼트를 조회하여 유사배열의 담게 되는 것이다.

이렇게 되면 클래스 값이 동일한 태그만 바뀌게 되는 것이다.

document.getElementById

위의 메소드는 복수(s)가 붙지 않는다. 즉 조회결과가 하나만 해당한다는 것이다. html 태그 속성 중 id값을 기준으로 조회하고, 성능은 가장 좋다.

<!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라는 것은 유일무일 식별자이기 때문에 id로 조회하는 것의 리턴 값은 단 하나이다.

즉 배열이 아니고 바로 객체에서 접근이 가능하다.

document.querySelector

css 선택자의 문법을 이용해서 객체를 조회할수도 있다. 즉 선택자를 인자로 받아 리턴해주는 것이다.

<!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태그를 선택하는 선택자
    li.style.color='red';
    var li = document.querySelector('.active'); // .은 어떤 엘리먼트이건, class의 속성 값이 active이면 된다.
    li.style.color='blue';
</script>
</body>
</html>

하지만 위에 Selector를 쓰면 하나만 리턴을 해준다. 즉 모든 객체를 조회하지 않고 단일적으로 조회한다는 것이다.

그렇기 때문에 결과는 아래와 같다.

document.querySelectorAll

querySelector과 기본적인 동작방법은 같지만 모든 객체를 조회한다는 점이 다르다.(유사배열의 모두 담음)

<!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 lis = document.querySelectorAll('li');
    for(var name in lis){
        lis[name].style.color = 'blue';
    }
</script>
</body>
</html>

위 코드를 실행시키면, 모든 코드의 색상이 파란색으로 변경된다. 만약 아래와 같이 출력시키고 싶다면 어떻게 코드를 수정해야 할까?

<!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 lis = document.querySelectorAll('li'); //모든 li태그를 선택하는 선택자
    var li = document.querySelector('.active')
	for(var name in lis){
		lis[name].style.color = 'red';
		if(li.style.color == 'red'){
			li.style.color = 'blue';
		}
	}  
</script>
</body>
</html>

이렇게 대상을 제어하며, 객체를 사용하는 방법을 알아보았다.

'Languages > Java Script' 카테고리의 다른 글

[Js] jQuery 제어 대상찾기 \| jQuery \| javascript (0)	2021.02.08
[Js] jQuery \| 라이브러리 \| DOM base jQuery (0)	2021.02.07
★ [Js] 창 제어 \| 새 창의 접근 \| 팝업 차단 (0)	2021.02.07
[Js] Navigator 객체 \| 크로스브라우징 \| (0)	2021.02.07

Contents

새소식

인기 검색어