[DOM_Document] JS - getElementById() 메서드 ★★★ - 아이디선택자 (= 아이디로 요소얻기 = 아이디로 요소찾기 = id selector = getElementById메서드 = 겟엘러먼트바이아이디메서드)

1. getElementById() 예제 - id 선택자 얻기
2. getElementById() 정의
3. getElementById() 구문
4. getElementById() 이슈 - id 경우 단독 사용 가능

getElementById() 예제 - id 선택자 얻기 

 

<p id="demo">(홈페이지 제작관리 + 서버관리) BEST 사이트는 어디?</p>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";

}

</script>

 

결과보기

getElementById() 정의

 

지정 아이디 속성값을 갖는 요소 객체 반환.

 

---

 

1.

문서 내 요소의 내용을 설정/반환할 때 사용.

 

2.

ID는 페이지 내에서 고유해야 하며, 

만약, 2개 이상 존재 시, 첫 번째 것만 선택됨.

 

3.

모든 브라우저 지원.

 

4.

핑크색 부분은 대문자로 표기하며, Element 부분은 단수로 표기. (즉, s 안 붙음.)

getElementById()

 

5.

id 경우 유일하기 때문에 getElementById() 없이 단독 사용 가능.

(예제) idName 또는 this['idName']  (※ 아래 예제 참고)

 

getElementById() 구문

 

document.getElementById(elementID)

 

---

[매개변수]

 

elementID

필수. 요소 아이디. (즉, 요소의 아이디 속성의 값을 나타내는 문자열.)

 

---

[반환값]

 

지정 ID를 가진 요소 존재 O 경우, 해당 요소를 나타내는 요소 객체 반환.

지정 ID를 가진 요소 존재 X 경우,  NULL 반환.

 

getElementById() 이슈 - id 경우 단독 사용 가능

[예제1] - 문자열의 각 문자를 <span> 태그로 묶기

 

<style>

span:nth-child(1) {color:red;}

span:nth-child(2) {color:blue;}

span:nth-child(3) {color:green;}

span:nth-child(4) {color:magenta;}

</style>

 

<p id="hz">홈짱닷컴</p>

 

<script>

hz.innerHTML = "<span>" + hz.innerText.split("").join("</span><span>") + "</span>";

</script>

 

결과보기

---

[예제2] 아이디 hz1~hz4 모두 너비를 100px 설정

 

<style>

div {border:1px solid red; padding:5px;}

</style>

 

<div id="hz1">홈</div>

<div id="hz2">짱</div>

<div id="hz3">닷</div>

<div id="hz4">컴</div>

 

<script>

for(i=1; i<=4; i++) {

  this['hz' + i].style.width = '100px';

}  

</script>

 

결과보기

---

[예제3] 아이디 h3 ~ hz4 숨기기

 

<div id="hz1">홈</div>

<div id="hz2">짱</div>

<div id="hz3">담</div>

<div id="hz4">컴</div>

 

<script>

for (i=3; i<=4; i++) {

    this["hz"+i].style.display = "none";

}

</script>

 

결과보기 

비타주리 님 (210727) https://sir.kr/qa/423958