MLP) [JavaScript] 제어 대상 찾기 - getElement, querySelector

채개바라 2024. 1. 19. 23:26

2024. 1. 19. 23:26

DOM (Document Object Model)

'문서 객체 모델'이라 하며 document 객체를 의미한다.
HTML 요소(element)를 제어(생성, 삭제 등)하기 위해 사용된다.

자바스크립트에서 DOM에 대한 작업을 하려면 먼저 요소를 선택할 수 있어야 한다. 그때 사용하는 것이 getElement이다. getElement를 사용하면 요소를 직접 선택할 수 있다.

getElement

HTML 태그를 자바스크립트로 제어하려면 자바스크립트가 알 수 있는 Object형으로 만들어야 한다.
getElement를 사용하면 요소를 직접 선택하여 객체를 담을 수 있다.
getElement 메서드는 객체를 담은 유사배열을 리턴한다.
※ 유사배열: 정확히는 배열은 아니지만 배열과 유사하게 작동함

1. getElementsByTagName

특정 태그를 가지고 있는 엘리먼트들을 가져올 수 있다.

[HTML 태그]

<body>
    <h3>getElementsByTagName 예시</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>

[Script 태그]

var lis = document.getElementsByTagName("li");

문서 전체(document)에서 태그의 이름이 li인 엘리먼트들을 가져와서 그 결과를 리턴하는 메서드

getElementsByTagName에서 "-s"(복수형)가 붙은 이유는 태그의 이름이 동일한 태그가 여러 개이기 때문이다.

이 메서드를 실행하면 <li>에 해당되는 각각의 태그들의 객체를 담은 유사배열을 리턴하여 변수 lis에 담는다.

for(var i = 0; i < lis.length; i++){
        lis[i].style.color="red";
}

<li>가 3개이므로 lis.length = 3이다.

lis[0] = <li>HTML</li>

lis[1] = <li>CSS</li>

lis[2] = <li>JavaScript</li>

3개의 객체를 선택해서 글자색을 빨간색으로 바꿨다.

See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.

2. getElementsByClassName

특정 class를 가지고 있는 엘리먼트들을 가져올 수 있다.

[HTML 태그]

<body>
    <h3>getElementsByClassName 예시</h3>
    <ul>
        <li>HTML</li>
        <li class="active">CSS</li>
        <li class="active">Javascript</li>
    </ul>
</body>

[Script 태그]

var lis = document.getElementsByClassName("active");

문서 전체(document)에서 클래스의 이름이 active인 엘리먼트들을 가져와서 그 결과를 리턴하는 메서드

getElementsByClassName에서 "-s"(복수형)가 붙은 이유는 클래스의 이름이 동일한 태그가 여러 개이기 때문이다.

이 메서드를 실행하면 클래스가 active에 해당되는 각각의 태그들의 객체를 담은 유사배열을 리턴하여 변수 lis에 담는다.

for(var i = 0; i < lis.length; i++){
	lis[i].style.color="green";
}

클래스가 active인 태그가 2개이므로 lis.length = 2이다.

lis[0] = <li>CSS</li>

lis[1] = <li>JavaScript</li>

2개의 객체를 선택해서 글자색을 초록색으로 바꿨다.

See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.

3. getElementById

특정 id를 가지고 있는 엘리먼트를 가져올 수 있다.

[HTML 태그]

<body>
    <h3>getElementsById 예시</h3>
<ul>
    <li>HTML</li>
    <li id="active">CSS</li>
    <li>JavaScript</li>
</ul>
</body>

[Script 태그]

var li = document.getElementById("active");

문서 전체(document)에서 id가 active인 엘리먼트를 가져와서 그 결과를 리턴하는 메서드

getElementById에서 "-s"(복수형)가 붙지 않은 이유는 id는 유일한 값이기 때문이다.

이 메서드를 실행하면 id가 active에 해당되는 태그의 객체를 리턴하여 변수 lis에 담는다.

li.style.color="pink";

객체가 하나이기 때문에 for문을 사용하지 않고, 리턴값 또한 배열이 아니다.

id가 active인 객체 하나를 선택해서 글자색을 분홍색으로 바꿨다.

See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.

querySelector

HTML 태그를 자바스크립트로 제어하려면 자바스크립트가 알 수 있는 Object형으로 만들어야 한다.
CSS에서는 선택자를 이용해서 꾸며주고자 하는 element를 디자인할 수 있는 기능이 있다. 바로 그 선택자를 인자로 받아서 선택자에 해당되는 element들의 객체를 찾아 리턴해주는 메서드가 querySelector이다.
querySelector와 querySelectorAll의 차이: querySelector는 선택자들 중 가장 먼저 등장하는 하나의 엘리먼트만 리턴하는 반면, querySelectorAll는 선택자에 해당되는 엘리먼트들을 모두 담은 유사배열을 리턴한다.

1. querySelector

querySelector는 document 내의 요소를 검색하고 여러 결과를 찾았다면 첫 번째 요소만 리턴해주는 메서드이다.

CSS 선택자 또는 선택자 그룹과 일치하는 요소를 찾고, 일치하는 요소를 찾지 못한 경우 null을 리턴한다.

[HTML 태그]

<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 liObj = document.querySelector("li");
var liObj2 = document.querySelector(".active");

첫 번째 줄: 문서 전체(document)에서 선택자가 li인 엘리먼트를 가져와서 그 결과를 리턴하는 메서드

이 메서드를 실행하면 li 태그들 중 첫 번째 li 태그의 객체를 리턴하여 변수 liObj에 담는다.

두 번째 줄: 문서 전체(document)에서 선택자가 .active인 엘리먼트를 가져와서 그 결과를 리턴하는 메서드

이 메서드를 실행하면 class가 "active"인 element들 중 첫 번째 엘리먼트의 객체를 리턴하여 변수 liObj2에 담는다.

liObj.style.color = "red";
liObj2.style.color = "blue";

객체가 하나이기 때문에 for문을 사용하지 않고, 리턴값 또한 배열이 아니다.

li 태그들 중 첫 번째 li 태그의 객체 하나를 선택해서 글자색을 빨간색으로 바꿨다.

class가 "active"인 태그의 객체 하나를 선택해서 글자색을 파란색으로 바꿨다.

See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.

2. querySelectorAll

querySelector는 document 내의 요소들을 검색하여 여러 결과를 찾고, 해당되는 요소들을 모두 리턴해주는 메서드이다.

CSS 선택자 또는 선택자 그룹과 일치하는 요소들을 찾고, 일치하는 요소를 찾지 못한 경우 null을 리턴한다.

[HTML 태그]

<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 태그]

<script>
    let lis = document.querySelectorAll("li");
    for(let i = 0; i < lis.length; i++) {
    	lis[i].style.color = "blue";
    }
</script>

li 선택자에 해당되는 엘리먼트들을 담은 유사배열을 변수 lis에 담았다.

태그가 li인 태그가 총 6개이므로 lis.length = 6이다.

6개의 객체를 선택해서 글자색을 파란색으로 바꿨다.

See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.

저작자표시 비영리 변경금지

StartCode