본문으로 건너뛰기
실습하기

HTML 요소 선택법 - 1

getElementById​

document.getElementById()는 HTML에서 특정 id 속성을 가진 요소를 선택하는 메서드입니다.

코드 예시:​

HTML: intro id를 가진 p 요소
<!-- id를 가진 HTML p 요소 -->
<p id="intro">안녕하세요</p>
JavaScript: getElementById로 요소 선택
// JavaScript로 해당 요소 선택하고 내용 변경
const introElement = document.getElementById('intro');
introElement.textContent = '반갑습니다';

getElementsByTagName​

document.getElementsByTagName()는 HTML에서 특정 태그를 가진 모든 요소들을 선택하는 메서드입니다.

코드 예시:​

HTML: 여러 p 요소
<!-- HTML 내 여러 <p> 요소 -->
<p>첫 번째 단락입니다.</p>
<p>두 번째 단락입니다.</p>
<p>세 번째 단락입니다.</p>
JavaScript: getElementsByTagName로 요소 선택
// JavaScript로 <p> 태그를 가진 모든 요소 선택
const paragraphs = document.getElementsByTagName('p');

for (let para of paragraphs) {
  para.style.color = '';
}

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!