서론
select 태그로 선택되는 값에 따라 다른 DOM 조작을 하던 중 element 객체에 각각 다른 프로퍼티를 사용하는 예를 보고 세 프로퍼티의 차이가 무엇인지 궁금해 알아보기로 했다.
예제 코드
쿠키가 3개 남았을 때, 형이 몇 개의 쿠키를 먹을지 select 태그로 선택하면 그에 따라 p태그의 값이 달라지는 예제였다.
<script>
window.onload = function (){
const selectButton = document.getElementById('cookie');
const cokieResult = document.getElementById('result');
selectButton.addEventListener('change', setResult);
function setResult() {
const choice = selectButton.value;
console.log(choice); // console.log(typeof choice); //string
if (choice === 'one') {
cokieResult.innerText = '동생이 기뻐합니다.';
} else if (choice === 'two') {
cokieResult.innerHTML = '동생은 이 일을 기억할것입니다.';
} else if (choice === 'random') {
cokieResult.textContent = '안돼.';
}
}
}
</script>
<body>
<div style="text-align: center;">
<label for="cookie">몇 개 먹을지 선택하자.</label>
<select id="cookie">
<option value="">-- 선택지 --</option>
<option value="one">하나 밖에 없는 동생을 위해 한 개만 먹자.</option>
<option value="two">헉.. 실수로 다 먹어버렸다..(실수 맞아?)</option>
<option value="random">쿠키를 다 먹어도 될까요?</option>
</select>
<hr>
결과 : <p id="result"></p>
</div>
</body>@kim_unknown님의 벨로그에 좋은 예제와 함께 잘 정리되어 있다.
아래는 내가 적용해보면서 이해한 대로 작성해보았다.
innerHTML
자기 자신 태그 내부의 태그를 읽고 변경할 때 사용한다.
<h1 id="first">H1
<div>DIV</div>
<span style='display:none'>invisibleSPAN</span>
</h1>이 코드에서 h1 태그의 innerHTML은
H1
<div>DIV</div>
<span style="display:none">invisibleSPAN</span>가 된다. 인덴트도 그대로 가져오고
그대로 사용하면 태그 요소를 가져오기 때문에 속성도 똑같이 적용된다.
문자열이라 배열처럼 접근도 가능하다.
console.log(h1.innerText[0]);//H
console.log(h1.innerText[1]);//1
console.log(h1.innerText[2]);// 2~n : indent space
console.log(h1.innerText[3]);//
console.log(h1.innerText[4]);//
console.log(h1.innerText[n]);//
console.log(h1.innerText[n+1]);//DinnerText
자기 자신 태그내부의 텍스트를 읽고 변경할 때 사용한다.
<h1 id="first">H1
<div>DIV</div>
<span style='display:none'>invisibleSPAN</span>
</h1>이 코드에서 h1 태그의 innerHTML은 문자열 'H1 DIV'가 된다.
사용자에게 보이지 않는 태그는 가져오지 않는다.
문자열이라 배열처럼 접근도 가능하다.
console.log(h1.innerText[0]);//H
console.log(h1.innerText[1]);//1
console.log(h1.innerText[2]);//
console.log(h1.innerText[3]);//D
console.log(h1.innerText[4]);//I
console.log(h1.innerText[5]);//V
console.log(h1.innerText[6]);//undefinedtextContent
태그 내부의 텍스트를 읽고 변경할 때 사용한다.
<h1 id="first">H1
<div>DIV</div>
<span style='display:none'>invisibleSPAN</span>
</h1>이 코드에서 h1 태그의 textContent는 문자열
H1
DIV
invisibleSPAN
가 된다.
마무리
- 태그 요소의 프로퍼티 innerHTML, innerText, textContent를 비교해보았다.
- 인덴트까지 가져올지는 몰랐는데 콘솔에 출력해보니 생각해보지 못한 부분을 발견한것 같아 작성해보길 잘한 것 같았다.
여담 : 처음엔 예시 코드를 작성하면서 h1 태그 안에 h2 태그를 작성했었는데, 예상과는 달리 모든 프로퍼티에 대해서 h2태그 바깥의 h1태그 내부만 선택됐었다. 다른 성질의 태그가 아닌 내용을 담는 div와 span태그까지만 읽히는 것 같아 코드를 바꾼건 안비밀 💖🔥
풀스택 연습생. 끈기있는 삽질로 무대에서 화려하게 데뷔할 예정 ❤️🔥