getElementBy 메소드

신윤주·2023년 7월 12일

document.getElementById()

<BODY>
	<div id="item_id">item_id</div>
    <div class="item_class">item_class</div>
    <div class="item_class item2">item_class 2</div>
</BODY>

이러한 html이 있을때 파라미터로 찾으려는 id를 전달하여, 해당 element를 찾을수 있고 id는 유일한 값이므로, 하나의 element만 리턴한다.

let itemId = document.getElementById("item_id");
console.log(itemId); //<div id="item_id">item_id</div> 가 출력된다.

document.getElementsByClassName()

<BODY>
	<div id="item_id">item_id</div>
    <div class="item_class">item_class</div>
    <div class="item_class item2">item_class 2</div>
</BODY>

해당 class 이름을 가진 요소를 HTMLCollection 오브젝트로 리턴한다.

let itemClass = document.getElementsByClassName("item_class");
let itemClass2 = document.getElementsByClassName("item_class item2"); //()안에 띄어쓰기를 하면 여러개의 클래스 명을 적을 수 있다.
console.log(itemClass);
console.log(itemClass2);

document.getElementsByTagName()

<BODY>
	<div id="item_id">item_id</div>
    <div class="item_class">item_class</div>
    <div class="item_class item2">item_class 2</div>
</BODY>

해당 태그 이름을 가진 요소를 HTMLCollection 오브젝트로 리턴한다.
getElementsByClassName와 마찬가지로 다수의 element를 불러온다.

let itemTag = document.getElementsByTagName("div");
console.log(itemTag);

document.querySelector()

querySelector는 tag와 class와 id를 모두 불러올수 있다.
element를 찾기 위해서 TagName or .className or #idName을 적어줘야하고 css에서 불러오는 것처럼 clsaa는 .을 id는 #을 앞에 붙혀줘야한다.

<BODY>
	<div id="item_id">item_id</div>
    <div class="item_class">item_class</div>
    <div class="item_class item2">item_class 2</div>
</BODY>

let itemQuery = document.querySelector(".item_class");
console.log(itemQuery);

document.querySelectorAll()

querySelector와 같지만 해당하는 element를 전부 불러온다.
*무조건 배열에 담겨져서 불러와진다.

<BODY>
	<div id="item_id">item_id</div>
    <div class="item_class">item_class</div>
    <div class="item_class item2">item_class 2</div>
</BODY>

let itemQueryAll = document.querySelectorAll(".item_class");
console.log(itemQueryAll);

신윤주

js를 부수는 그날까지

이전 포스트

배열 내장함수

다음 포스트