getElement
document요소에 속하는 getElement 메서드를 사용하여 요소 객체를 가져올수 있다.
◼️ getElementsByTagName(tag) – 주어진 태그에 해당하는 요소를 찾고, 대응하는 요소를 담은 컬렉션을 반환합니다. 매개변수 tag에 "*"이 들어가면, '모든 태그’가 검색됩니다.
◼️ getElementsByClassName(className) – class 속성값을 기준으로 요소를 찾고, 대응하는 요소를 담은 컬렉션을 반환합니다.
◼️ document.getElementsByName(name) – 아주 드물게 쓰이는 메서드로, 문서 전체를 대상으로 검색을 수행합니다. 검색 기준은 name 속성값이고, 이 메서드 역시 검색 결과를 담은 컬렉션을 반환합니다.
getElementById
document.getElementById는 전달받은 인수를 id 속성의 값으로 가지고 있는 HTML요소 객체를 반환한다.
<div id="elem">Element</div>
<script>
// 요소 얻기
let elem = document.getElementById('elem');
// 배경색 변경하기
elem.style.background = 'red';
</script>id='elem' 요소를 변수 elem에 저장하여 배경색을 바꾼다.
<div id="elem">
<div id="elem-content">Element</div>
</div>
<script>
// 변수 elem은 id가 'elem'인 요소를 참조한다.
elem.style.background = 'red';
</script>document.getElementById을 쓰지 않고 요소를 참조하여 쓸 수 있다.
getElementsByTagName
// 문서 내 모든 div를 얻습니다.
let spans = document.getElementsByTagName('span');span 을 위에 코드와 같이 가져오면 코드내 모든 span태그를 전부 가져온다. 원하는 span만 가져오려면 span[n]으로 써야 n번째 span태그를 가져온다. 이런식으로 태그를 가져오면 가독성도 떨어지고 복잡해진다. 그래서 이런 메서드를 보편적으로 잘 쓰진 않지만 경우에 따라 쓰는 경우도 있다.
getElementsByClassName, getElementsByName
<form name="my-form">
<div class="article">글</div>
<div class="long article">내용이 긴 글</div>
</form>
<script>
// name 속성을 이용해 검색
let form = document.getElementsByName('my-form')[0];
// form 내에서 클래스 이름을 이용해 검색
let articles = form.getElementsByClassName('article');
alert(articles.length); // 2. 클래스 속성값이 'article'인 요소는 2개다.
</script>getElementsByName은 코드 전체에서 name값을 가진 요소를 반환한다.(잘 사용하지 않음)
getElementsByClassName은 코드 class 속성값을 기준으로 요소를 찾고 반환한다.
querySelector, querySelectorAll
querySelector(css)는 주어진 CSS 선택자에 대응하는 요소 중 첫 번째 요소를 반환한다.
querySelector는 해당하는 요소를 찾으면 검색을 멈춘다. 즉, 첫번째 요소만 반환한다.(uerySelectorAll(css)[0]과 같음)
querySelectorAll은 원하는 요소 전부다 갖고오며 원하는 경우uerySelectorAll(css)[n]으로 가져올 수 있다. querySelectorAll에는 :hover나 :active 같은 CSS 선택자도 사용할 수 있다. document.querySelectorAll(':hover')을 사용하면 마우스 포인터가 위에 있는(hover 상태인) 요소 모두를 담은 컬렉션이 반환된다.
Case1
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<script>
let jb = document.querySelectorAll( '.abc' );
jb[1].style.color = 'red';
</script>
</body>
</html>두번째 클래스abc만 빨간색으로 지정한다.
Case2
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<script>
let jb = document.querySelectorAll( '.abc' );
for ( let i = 0; i < jb.length; i++ ) {
jb[i].style.color = 'red';
}
</script>
</body>
</html>abc값을 가진 클래스를 전부를 반복문을 사용하여 빨간색으로 지정한다.
Case3
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="def">Lorem Ipsum Dolor</p>
<p>Lorem Ipsum Dolor</p>
<script>
var jb = document.querySelectorAll( '.abc, .def' );
for ( var i = 0; i < jb.length; i++ ) {
jb[i].style.color = 'red';
}
</script>
</body>
</html>클래스 값이 abc 또는 def인 요소의 색을 빨간색으로 만듭니다.
getElement보다 querySelector가 더 범용적으로 사용할 수 있기에 더 높은 빈도로 사용된다.
