JavaScript - DOM (2)

1. querySelector

ID, class, 이름, 요소 타입, 속성, CSS 스타일 등의 원하는 선택자를 선택할 수 있다.

기본형태

document.querySelector('');

//소괄호 안에는 CSS에서 쓰는 것과 같은 부류의 선택자를 전달시킨다.

document.querySelector('#id선택자')
document.querySelector('.class선택자')
document.querySelector('요소 이름')

이처럼 CSS에서 선택하는 선택자의 형태와 동일해야 하며, 무조건 가장 해당 선택자의 가장 첫번째 값을 나타내준다.

2. querySelectorAll

querySelector와 동일한 원리로 작동하지만 차이점은 일치하는 모든 요소를 반환한다는 것이다.
앞선 querySelector에선 첫 번째 요소를 반환했었다.

3. innerText

innerText는 요소 안의 항목과 관련이 있다.
innerText는 Element 내에서 사용자에게 보여지는 '텍스트' 값을 읽어오고 설정할 수 있다.
<열린태그> </닫힌 태그>

// h1에 대한 innerText는?  = 철수네 모임
<h1>철수네 모임</li>

document.querySelector('h1').innerText = '철수 이사감'

//innerText 예시
<h1>철수 이사감</li>

3 - 1 innerHTML

innerText와 동작 원리는 정말 비슷하다.
하지만 innerHTML은 해당 Element의 HTML, XML등을 읽어오거나 설정이 가능하다.

innerHTML은 innerText와 달리 HTML 전체 내용을 가져오게 된다.

3 - 2 textContent

textContent는 Node의 속성을 가지고 있다.
또한 해당 노드가 가지고 있는 텍스트 값을 그대로 읽기 떄문에 CSS, JavaScript의 영향을 거의 받지 않는다.

예시)

<div id ='firstThing'>
	안녕? 나는 철수야
	<span style = 'display: none'>날 아니?
</span>
</div>

만약 화면에 출력하게 된다면 날 아니?라는 말까지 화면에 모두 출력되게 된다.

즉, 일반적인 Text 값에 대해서는 큰 차이가 존재하지 않으나, Element가 가지고 있는 컨텐츠 내용에 따라 차이가 있는 편이다.