2024.08.14. JS - document 객체 : querySelector(), innerText, innerHTML

 < 2. document.querySelector() 또는 querySelectorAll() 메서드 활용 >

* querySelector() 

- 요소가 1개인 대상에 접근(주로 id 선택자) , 

  단, 요소가 복수개인 대상(class 또는 태그 선택자)도 접근 가능하나 1개의 요소(첫번째 요소)만 리턴됨
* querySelectorAll()

- 요소가 복수개인 대상에 접근(주로 class 또는 태그 선택자),  복수개의 요소가 NodeList 타입으로 리턴됨(배열처럼 사용)
- 두 메서드에 전달하는 파라미터(선택자)에 따라 전달하는 전달인자 형태가 달라짐
  1) id 선택자 : 선택자명 앞에 # 기호 붙임(ex. querySelector("#name"))
  2) class 선택자 : 선택자명 앞에 . 기호 붙임(ex. querySelectorAll(".names"))
  3) 태그 선택자 : 선택자명을 태그명으로 그대로 지정(ex. querySelectorAll("h1"))
- getElementXXX() 메서드보다 더 다양한 작업 수행 가능

// ------- querySelector --------
// id 선택자가 "name"인 요소에 입력된 텍스트 값 출력하기
console.log(document.querySelector("#name").value); // 주의! id 앞에 # 붙이기.
// 주의!! 선택자 지정을 위한 기호가 포함되지 않으면 태그 선택자로 인시되고
// 해당 태그가 존재하지 않을 경우 객체가 리턴되지 않으므로(=null) 객체를 통한 요소 접근시 오류 발생
// console.log(document.querySelector("name").value);
// =>TypeError: Cannot read properties of null (reading 'value')

// id 선택자 name 요소에 접근하여 value 속성값(텍스트박스 입력값)을 "변경된 값"으로 변경
let nameElement = document.querySelector("#name");
nameElement.value = "변경된 값";

// 문자열이 저장된 변수의 length 속성을 통해 문자열 길이 확인 가능.
// => 문자열이 존재하지 않을 경우 널스트링("")이며 널스트링의 길이 (length 속성값)은 0이다
let name2Element = document.querySelector("#name2");
console.log(name2Element.value.length);  // 입력한 text의 길이(length) 확인됨.
// => 문자열이 존재하지 않을 경우 널스트링("")이며 널스트링의 길이 (length 속성값)은 0이다

// class 선택자 "header5" 요소에 접근하여 배경색을 노란색으로 변경
// =>class 선택자는 선택자명 앞에 기호 . 붙임
let selectClass = document.querySelector(".header5");
//for(let sc of selectClass){
selectClass.style.background = "yellow";
//}
// => 단, class 선택자가 "header5"인 요소가 복수개일 경우
// 맨 처음 객체(요소)만 리턴하므로 첫번째 <h3> 태그(Header - 5_1)만 배경색이 변경됨.

// ------- querySelectorAll --------
selectClass = document.querySelectorAll(".header5");
for(let sc of selectClass){
    sc.style.background = "green";
}

 

* 오늘의 퀴즈 *

<input type="button" value="하트표시" onclick="show_heart()">
<div id="heart"></div>
<div id="heart2">
    <img src="images/heart(empty).png" class="heart_empty" onclick="change_heart()">
</div>

1. show_heart() 함수를 완성하시오.

- 하트표시 버튼을 누르면 heart(full).png 이미지를 보이도록 완성하시오.

function show_heart(){
	console.log("value ");
	heart.innerHTML = "<img src='images/heart(full).png'>"	
}

2. change_heart() 함수를 완성하시오.

- 현재 비어있는 하트(heart(empty).png)를 누르면 꽉찬하트(heart(full).png) 이미지로 바뀌도록 하시오.

function change_heart(){
	heart2.innerHTML = "<img src='images/heart(full).png'>"
}

 

 

---

[ innerText vs innerHTML ]

- 대상 요소(객체)의 내용(태그 사이에 작성된 항목)을 확인하거나 변경하는 용도로 사용하는 속성
- innerText 는 대상 요소의 내용 중 텍스트만 취급하지만(사용자에게 실제 보여지는 텍스트, 주석은 제외)
  innerHTML 은 대상 요소의 내용을 HTML 태그요소 및 텍스트요소까지 모두 취급(숨은 태그 및 주석도 포함)
  또한, textContent는 대상 요소의 내용 중 실제 텍스트 요소들만 취급함(숨은 태그 포함, 주석은 제외)
- 주의! innerHTML 에서 HTML 은 대문자로 표기!
  
< 기본 문법 >
1. 확인 : document.getElementXXX().innerText 또는 document.getElementXXX().innerHTML
   => 또는 document.queryXXX() 으로 대체 가능
2. 변경 : innerText = 내용 또는 innerHTML = 내용

 

* innerText 버튼 실습

<input type="button" value="innerText" onclick="funcInnerText()">
<div id="divInnerText">
    <h3>divInnerText의 기본 텍스트</h3>
    <!-- span 태그 영역은 style="display:none" 속성에의해 화면에 나타나지 않는다. -->
    <span style="display:none">이 내용이 보일까?</span>
</div>

function funcInnerText(){
	//div 태그 중 id 선택자 "divInnerText"인 요소(객체) 가져와서 변수에 저장
	let innerTextElm = document.querySelector("#divInnerText");
	console.log(innerTextElm.innerText); // 결과 : divInnerText의 기본 텍스트
	// divInnerText 에 저장된 요소(div 태그) innerText 속성을 통해 텍스트 요소 출력
	// =><div> 태그 내의 <h3>divInnerText의 기본 텍스트</h3>요소 내용 중에서 텍스트 요소만 추출함.
	//	 즉, 텍스트 요소 바깥의 태그 (<h3></h3>)부분은 벗겨내고 텍스트만 출력됨.

	// innerText 속성을 활용하여 해당 div 태그 내의 내용 변경하ㅣ
	// = 텍스트 내용만 변경 = 태그도 단순 텍스트로 취급함.
	innerTextElm.innerText = "innerText에 변경한 텍스트 저장";
}

* innerHTML 버튼 실습

<div id="divInnerHTML">
    <h3>divInnerHTML의 기본 텍스트</h3>
    <!-- span 태그 영역은 style="display:none" 속성에의해 화면에 나타나지 않는다. -->
    <span style="display:none">이 내용이 보일까?</span>
</div>	

function funcInnerHTML(){
	//div 태그 중 id 선택자 "divInnerHTML"인 요소(객체) 가져와서 변수에 저장
	let innerHTMLElm = document.querySelector("#divInnerHTML");
	console.log(innerHTMLElm.innerHTML); // 주석까지 모든내용이 출력됨.
	// =><div> 태그 내의 <h3>기본 텍스트</h3>요소 내용 중에서 태그와 텍스트 요소 모두 추출함.
	//	즉, <h3>기본 텍스트</h3> 그대로 출력됨.
	
	// innerHTML속성으로 변경 가능한 요소에는 제한 없음 => 모든 태그 사용가능.
	divInnerHTML.innerHTML += "<input type='button' value='확인' onclick='check()'>";
	// => div 태그 내에 버튼 요소가 생성되며 클릭 이벤트도 실제로 동작가능하다. 
	// => 누적을 하여 사용하면 앞에서 쓴 다른 태그까지도 표현 가능함.
}

- innerHTML요소로 만든 확인 버튼.

- innerHTML 은 주석까지 모두 출력된다.

 

 

* divTextContent 버튼 실습

<div id="divTextContent">
    <h3>divTextContent의 기본 텍스트</h3>
    <!-- span 태그 영역은 style="display:none" 속성에의해 화면에 나타나지 않는다. -->
    <span style="display:none">이 내용이 보일까?</span>
</div>

function functextContent(){
	//div 태그 중 id 선택자 "divInnerHTML"인 요소(객체) 가져와서 변수에 저장
	let divTextContent = 	document.querySelector("#divTextContent");
	console.log(divTextContent);
	
	// divInnerHTML 에 저장된 요소(div 태그) innerHTML 속성을 통해 태그요소 및 텍스트 요소 출력
	console.log("divTextContent.textContent" + divTextContent.textContent);
	// =><div> 태그 내의 <h3>기본 텍스트</h3>요소 내용 중에서 태그와 텍스트 요소 모두 추출함.
	//	즉, <h3>기본 텍스트</h3> 그대로 출력됨.
}

- h3태그와 span 태그 내의 내용은 보이지만 주석의 내용은 보이지 않는다.