< getElement, querySelector로 요소 검색하기 >
➪ Searching methods
DOM 탐색 property
: 붙어있는 요소 노드들을 타고타고 가야함. 상대적 위치 탐색.
1_document.getElementById(id)
: 요소(태그)에 Id 값을 부여하여 절대적 위치값을 주어 원하는 요소 노드에 바로 접근하는 방법.
<body>
<div id="elem">
elem
<div id="elem-content">Element</div>
</div>
<script>
//요소 받아오기
let elem = document.getElementById('elem');
//이 과정 안해도 자동으로 id이름과 같은 전역 변수가 선언되어 아래가 작동함
elem.style.background = 'red';
window['elem-content'].style.color = 'white';
//but, 동일한 이름의 변수가 선언되면 무시됨
let elem = 5;
alert(elem);
</script>
</body>1. getElementById 매소드를 이용하여 접근하기
document.getElementById('elem’).style.color = ‘blue’;
2. 변수에 요소를 받아 접근하기
2-1. 요소 받아오기
let elem = document.getElementById('elem');
2-2. 변수를 이용해 접근(or 자동 선언된 전역변수 이용)
elem.style.color = ‘blue’;
elem.style.background = ‘red’;But!
- 동일한 이름을 가진 변수가 선언되는 등 충돌할 가능성
- 코드상에서 변수의 출처 파악의 어려움
➪ 실무에선 document.getElementById를 사용하기⭐️
📍비슷한 친구들
- getElementsByTagName(tagName)
- getElementsByClassName(className)
- getElementsByName(name)//잘 사용하지 않음
➪ 여러개인 경우가 많아 배열과 비슷한(하지만 배열은 아닌;유사배열) Node List의 형태로 반환됨.
✓ CHK!
id는 1개라 getElement
나머지는 여러개라 getElements
2-1_querySelectorAll(css)
: css 선택자를 이용하여 대응하는 요소를 모두 반환.
➪ 여러개인 경우가 많아 배열과 비슷한(하지만 배열은 아닌;유사배열) HTML Collection의 형태로 반환됨.
<body>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>//red
<p class="abc">Lorem Ipsum Dolor</p>
<script>
let jb = document.querySelectorAll( '.abc' );
jb[1].style.color = 'red’;//class abc 중 두번째만 red로
</script>
</body>💡 :hover나 :active 같은 CSS 선택자의 가상 클래스(pseudo-class)도 사용 가능
2-2_querySelector(css)
: css 선택자를 이용하여 대응하는 요소 중 첫 번째 요소를 반환.
즉, = elem.querySelectorAll(css)[0]
요소를 찾으면 거기서 멈춘다
3_Matches(css)
: Boolean method / 선택한 요소가 주어진 css 선택자와 일치하는지 여부 판단
if문에 주로 쓰임.
4_closest(css)
: 자신을 포함하여 css선택자와 일치하는 가장 가까운 조상요소를 찾아줌.
5_contains()
: elemA.contains(elemB)는 elemB가 elemA에 속하거나(elemB가 elemA의 후손인 경우) elemA==elemB일 때, 참을 반환.
✓ CHK!
- getElementsByTagName(tagName)
- getElementsByClassName(className)
- getElementsByName(name)
- querySelectorAll
등등 여러개(컬렉션)를 반환하기 때문에
document.getElementsByTagName('input').value = 5; 는 틀린 코드.
반복문 등을 이용해 컬렉션 내 각 요소마다 값을 할당해주어야 함.
✓ CHK!
getElementByTagName, getElementByClassName, getElementByname
= HTML collection
= 동적인(Live) 컬렉션
= 변경사항 실시간 반영 🅾️
=> ‘참조’의 느낌
querySelectorAll
= Node List
= 정적인(Static) 컬렉션
= 변경사항 실시간 반영 ❌
=> ‘복사’하여 담는 느낌
