JavaScript_8강_2_웹 문서의 특정한 선택자에 접근하는 방법(querySelector())

열라뽕따히·2024년 3월 11일

JavaScript

목록 보기

30/37

웹 문서의 특정한 선택자에 접근하는 방법

1. querySelector()

: 선택자 하나에 접근하는 방법
형식) document.querySelector(선택자)

2. querySelectorAll()

: 여러 개의 선택자에 접근하는 방법
형식) document.querySelectorAll(선택자)

3. querySelector(선택자).innerText

: 웹 브라우저 창에 보이는 내용을 가져오는 속성

4. querySelector(선택자).innerHTML

: 선택자 안에 있는 태그와 내용을 함께 가져오는 속성

5. querySelector(선택자).textContent

: 선택자 안에 있는 내용을 가져오되, 소스에 있는대로 가져오는 속성

3 ~ 5번의 경우

웹 요소의 내용을 가져올 경우에는 innerText나 textContent 속성을 사용하고,
요소 안에 있는 태그까지 같이 가져올 경우에는 innerHTML 속성을 사용하면 됨

=============================코드=============================

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/style.css">
</head>
<body>

		<h1 id = "title">My Profile</h1>
		
		<div id = "profile">
				<img src = "../images/pf.png" alt = "도레미">
			<div id = "desc">
					<p class = "user">이름 : 도레미</p>
					<p class = "user">주소 : 서울시 구로구</p>
					<p class = "user">연락처 : 02)123-1234</p>
			</div>
		</div>

		<script type="text/javascript" src = "../js/ex02.js"></script>

</body>
</html>

위 파일과 연동된 자바스크립트 파일 생성

=============================코드=============================

/* 웹 문서의 특정 요소를 가져오는 작업 */
  // 자바스크립트에서는 태그도 변수로 저장 가능 
  let title = document.querySelector("#title");  // id가 title이라는 것을 가져와라! 
  
  let userName = document.querySelectorAll(".user")[0];  // class가 user인 "이름" 영역만 가져오겠다! 
  
  let userImage = document.querySelector("#profile img");
  
  
  /* 가져온 요소에 변경 작업 진행 */
  /*
  	   자바스크립트에서 스타일 변경하는 방법
  	   형식) 요소.style.속성명 = "값";
  */
  title.onclick = () => {
	  	title.innerText = "프로필";    // My Profile 글자를 클릭하면 "프로필"로 바껴라! 
	  	title.style.backgroundColor = "black";
	  	title.style.color = "white";
  }
  
  userName.onclick = () => {  // function() 생략 한 것임 
	  	userName.innerHTML = `이 름 : <b><i>홍길동</i></b>`;  // '이름 : 도레미' 에 '홍길동'으로 이름을 바꾸겠다! 
	  	// innerHTML 은 태그도 넣을 수 있다!! innertext는 글자만 가능!
  }
  
  userImage.onclick = () => {
	  	userImage.src = `../images/pf2.png`;
  }