[Web/JS] 자바스크립트 - DOM 요소 접근 및 속성
✏️ DOM에 접근 - getElementById() 메서드
document.getElementById("heading")
// getElementById() 메서드를 사용하면 특정한 id가 포함된 DOM 요소에 접근할 수 있습니다.
// 기본형 => 요소명.getElementById("id명")
✏️ DOM에 접근 - getElementsByClassName() 메서드
document.getElementByClassName("bright")
// getElementsByClassName() 메서드는 지정한 class 선택자 이름이 들어 있는 DOM 요소에 접근할 수 있습니다. class 선택자는 웹 문서 안의 여러 요소에서 사용할 수 있으므로 getElementsByClassName() 메서드를 사용하면 반환 요소가 2개 이상일 수 있습니다. 그래서 element에 s가 붙어있습니다. 추가로 클래스 이름이 같은 DOM 요소들이 HTML Collection 객체로 저장됩니다. 배열과 비슷하여 배열처럼 사용할 수는 있지만 배열은 아닙니다.
// 기본형 => 요소명.getElementsByClassName("class명")
✏️ DOM에 접근 - getElementsByTagName() 메서드
document.getElementsByTagName("p")
// class나 id를 지정하지 않은 DOM 요소에 접근하려면 태그를 이용해야 합니다. 웹 문서 안에서 같은 태그를 사용하는 요소가 2개 이상일 수 있으므로 getElementsByTagName() 메서드도 반환값이 HTML Collection 객체로 저장됩니다.
// 기본형 => 요소명.getElementsByTagName("태그명")
✏️ DOM에 접근 - querySelector(), querySelectorAll() 메서드
위에서 알아보았던 3개의 메서드는 모두 반환값이 HTML 객체입니다. 여기에는 HTML 요소 ('p'나 'a'같은 형태)만 저장됩니다. DOM 트리의 텍스트, 속성 노드까지 자유롭게 제어하기 위해서는 querySelector(), querySelectorAll() 메서드를 사용해야 합니다. id같이 반환값이 하나라면 querySelector() 메서드를, 반환값이 여러 개인 경우에는 querySelectorAll() 메서드를 사용합니다. 그리고 이 두 개의 메서드는 반환값이 노드이거나 노드 리스트입니다.
기본형 => 노드.querySelector() / 노드.querySelectorAll()
document.querySelector("#heading")
document.querySelectorAll(".bright")
✏️ 웹 요소 내용 수정 - innerText, innerHTML 프로퍼티
자바스크립트는 웹 요소의 내용도 수정이 가능합니다. 가장 쉬운 방법은 innerText 프로퍼티나 innerHTML 프로퍼티를 이용하는 것입니다. innerText 프로퍼티는 텍스트 내용을 표시하고 innerHTML 프로퍼티는 HTML 태그까지 반영하여 표시합니다. 기본형 => 요소명.innerText = 내용 / 요소명.innerHTML = 내용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>innerText, innerHTML 프로퍼티</title>
</head>
<body>
<button onclick="inntext()">innerText로 표시하기</button>
<button onclick="innhtml()">innerHTML로 표시하기</button>
<h1>현재 시각: </h1>
<div id="current"></div>
<script>
var now = new Date();
function inntext(){
document.getElementById("current").innerText = now;
}
function innhtml() {
document.getElementById("current").innerHTML = "<em>" + now + "</em>";
}
</script>
</body>
</html>
위 코드는 Date 객체를 사용해서 현재 날짜와 시간을 나타내는 예제입니다. 날짜와 시간을 변화 없이 innerText로 표시할 때와 em태그를 추가한 innerHTML 코드를 보시면 될 것 같습니다.
✏️ 속성 가져오기 및 수정 - getAttribute(), setAttribute() 메서드
웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장됩니다. 이때 속성값에 접근하기 위해서는 getAttribute() 메서드를 사용하고, 접근한 속성값을 바꿀려면 setAttribute() 메서드를 사용합니다. 기본형 => getAttribute("속성명") / setAttribute("속성명", "값")
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM</title>
<link rel="stylesheet" href="css/product.css">
</head>
<body>
<div id="container">
<h1 id="heading">에디오피아 게뎁</h1>
<div id="prod-pic">
<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200" onclick="displaySrc()">
<div id="small-pic">
<img src="images/coffee-pink.jpg" class="small">
<img src="images/coffee-blue.jpg" class="small">
<img src="images/coffee-gray.jpg" class="small">
</div>
</div>
<div id="desc">
<ul>
<li>상품명 : 에디오피아 게뎁</li>
<li class="bluetext">판매가 : 9,000원</li>
<li>배송비 : 3,000원<br>(50,000원 이상 구매시 무료)</li>
<li>적립금 : 180원(2%)</li>
<li>로스팅 : 2019.06.17</li>
<button>장바구니 담기</button>
</ul>
<a href="#" id="view">상세 설명 보기</a>
</div>
<div id="detail">
<hr>
<h2>상품 상세 정보</h2>
<ul>
<li>원산지 : 에디오피아</li>
<li>지 역 : 이르가체프 코체레</li>
<li>농 장 : 게뎁</li>
<li>고 도 : 1,950 ~ 2,000 m</li>
<li>품 종 : 지역 토착종</li>
<li>가공법 : 워시드</li>
</ul>
<h3>Information</h3>
<p>2차 세계대전 이후 설립된 게뎁농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티커피를 생산합니다.</p>
<h3>Flavor Note</h3>
<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
</div>
<script>
function displaySrc() {
var cup = document.querySelector("#cup");
alert("이미지 소스 : " + cup.getAttribute("src"));
}
</script>
</body>
</html>
위 코드는 getAttribute() 메서드를 사용하여 id="cup"인 이미지 src 속성값을 가져오는 예제입니다. 이미지를 클릭하면 사진과 같이 알람창이 뜹니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM</title>
<link rel="stylesheet" href="css/product.css">
</head>
<body>
<div id="container">
<h1 id="heading">에디오피아 게뎁</h1>
<div id="prod-pic">
<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200">
<div id="small-pic">
<img src="images/coffee-pink.jpg" class="small">
<img src="images/coffee-blue.jpg" class="small">
<img src="images/coffee-gray.jpg" class="small">
</div>
</div>
<div id="desc">
<ul>
<li>상품명 : 에디오피아 게뎁</li>
<li class="bluetext">판매가 : 9,000원</li>
<li>배송비 : 3,000원<br>(50,000원 이상 구매시 무료)</li>
<li>적립금 : 180원(2%)</li>
<li>로스팅 : 2019.06.17</li>
<button>장바구니 담기</button>
</ul>
<a href="#" id="view">상세 설명 보기</a>
</div>
<div id="detail">
<hr>
<h2>상품 상세 정보</h2>
<ul>
<li>원산지 : 에디오피아</li>
<li>지 역 : 이르가체프 코체레</li>
<li>농 장 : 게뎁</li>
<li>고 도 : 1,950 ~ 2,000 m</li>
<li>품 종 : 지역 토착종</li>
<li>가공법 : 워시드</li>
</ul>
<h3>Information</h3>
<p>2차 세계대전 이후 설립된 게뎁농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티커피를 생산합니다.</p>
<h3>Flavor Note</h3>
<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
</div>
</div>
<script>
var cup = document.querySelector("#cup");
var smallPics = document.querySelectorAll(".small");
for(let i = 0; i < smallPics.length; i++) {
smallPics[i].addEventListener("click", changePic);
}
function changePic() {
var newPic = this.src;
cup.setAttribute("src", newPic);
}
</script>
</body>
</html>
위 코드는 작은 사진들을 클릭하면 큰 이미지가 화면에 출력하도록 하는 setAttribute() 메서드를 사용한 예제입니다.
이 게시물에 언급된 예제 코드들은 모두 Do it! HTML+CSS+자바스크립트 책에 담겨있는 코드들입니다!