모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록
브라우저 환경과 다양한 명세서
ko.javascript.info
innerHTML로 내용 조작하기
innerHTML 프로퍼티를 사용하면 요소 안의 HTML을 문자열 형태로 받아올 수 있다.
요소 안 HTML을 수정할 수도 있다.
<script> 태그를 삽입하면 해당 태그는 HTML의 리부가 되지만, 스크립트는 실행되지 않음
‘innerHTML +=’ 사용 시 주의점
내용 추가가 아니라 내용을 덮어쓰기 때문에 주의해서 사용해야 한다.
- 기존 내용 삭제
- 기존 내용과 새로운 내용을 합친 새로운 내용
기존 내용이 완전히 삭제된 후 밑바닥부터 다시 내용이 쓰여지기 때문에 이미지 등의 리소스 전부가 다시 로딩된다.
→ 버벅임 존재
또한 여러 부작용이 존재한다.
- 드래그 해제
- 사용자 입력 값이 사라짐
innerHTML 말고 HTML을 추가하는 방법을 사용하면 부작용 없이 원하는 HTML 추가 가능
outerHTML로 요소의 전체 HTML 보기
outerHTML 프로퍼티엔 요소 전체 HTML이 담겨있다.
outerHTML = innerHTML + 요소
<div id="elem">Hello <b>World</b></div>
<script>
alert(elem.outerHTML); // <div id="elem">Hello <b>World</b></div>
</script>
innerHTML과 달리 outerHTML을 사용해서 HTML을 쓸 땐 요소 자체가 바뀌지 않음
대신 outerHTML은 DOM안의 요소를 교체
예시를 보면 div 태그는 바뀌지 않음
<div>Hello, world!</div>
<script>
let div = document.querySelector('div');
// div.outerHTML를 사용해 <p>...</p>로 교체
div.outerHTML = '<p>새로운 요소</p>'; // (*)
// 어! div가 그대로네요!
alert(div.outerHTML); // <div>Hello, world!</div> (**)
</script>
바뀌지 않는 이유는?
outerHTML에서 하는 할당 연산이 DOM 요소(div)를 수정하지 않기 때문이다.
할당 연산은 요소를 DOM에서 제거하고 새로운 HTML 조각을 넣는다.
- ‘document’에서 div를 삭제
- 새로운 HTML 조각인 <p>A new element</p>을 삭제 후 생긴 공간에 삽입
- div엔 여전히 기존 값이 저장되어 있고 새로운 HTML 조각은 어디에도 저장되어 있지 않음
elem.outerHTML 에 무언가를 수정할 땐 elem이 수정되지 않는다.
nodeValue/data로 텍스트 노드 내용 조작하기
innerHTML 프로퍼티는 요소 노드에만 사용 가능
텍스트 노드 같은 다른 타입의 노드에는 nodeValue, data를 사용해야 한다.
- ex) 주석 노드
<body>
안녕하세요.
<!-- 주석 -->
<script>
let text = document.body.firstChild;
alert(text.data); // 안녕하세요.
let comment = text.nextSibling;
alert(comment.data); // 주석
</script>
</body>
필요한 경우 주석 노드에 필요한 지시사항을 처리할 때 사용한다.
<!-- if isAdmin -->
<div>관리자로 로그인하였습니다!</div>
<!-- /if -->
textContent로 순수한 텍스트만
textContent를 사용하면 요소 내의 텍스트에 접근할 수 있다.
<태그>는 제외하고 오로지 텍스트만 추출 가능
→ 텍스트를 안전하게 사용할 수 있다.
- 예시)
<div id="news">
<h1>주요 뉴스!</h1>
<p>화성인이 지구를 침공하였습니다!</p>
</div>
<script>
// 주요 뉴스! 화성인이 지구를 침공하였습니다!
alert(news.textContent);
</script>
innerHTML과 textContent 비교
innerHTML: 사용자가 입력한 문자열이 ‘HTML 형태로’ 태그와 함께 저장
textContent: 사용자가 입력한 문자열이 ‘순수 텍스트 형태’로 저장 / 태그를 구성하는 특수문자들이 문자열로 처리된다.
- 예시)
<div id="elem1"></div>
<div id="elem2"></div>
<script>
let name = prompt("이름을 알려주세요.", "<b>이보라</b>");
elem1.innerHTML = name; // 굵은 글씨로 출력
elem2.textContent = name; // <b>이보라</b>로 출력
</script>
hidden 프로퍼티
hidden은 HTML 안에서도 쓸 수 있고, 자바스크립트에서도 쓸 수 있다.
hidden = style=”display: none”
<div>아래 두 div를 숨겨봅시다.</div>
<div hidden>HTML의 hidden 속성 사용하기</div>
<div id="elem">자바스크립트의 hidden 프로퍼티 사용하기</div>
<script>
elem.hidden = true;
</script>
기타 프로퍼티
value
<input>과 <select>, <textarea>의 값이 저장된다.
대응하는 클래스: HTMLInputElement, HTMLSelectElement 등
href
<a href=”…”> 의 href 속성이 저장된다.
대응하는 클래스: HTMLAnchorElement
id
id 속성 값이 저장됨. 모든 요소에서 사용 가능
대응하는 클래스: HTMLElement
- 예시)
<input type="text" id="elem" value="value">
<script>
alert(elem.type); // "text"
alert(elem.id); // "elem"
alert(elem.value); // value
</script>
프로퍼티 항목을 보는 방법
- 특정 클래스에서 지원하는 프로퍼티 전체를 보고 싶다면 명세서를 읽기.
- 예시) HTMLInputElement에서 지원하는 프로퍼티 목록
- https://html.spec.whatwg.org/#htmlinputelement
- 명세서를 읽지 않고 개발자 도구의 콘솔 창에 console.dir(elem)를 입력하면 해당 요소에서 지원하는 프로퍼티 목록을 확인할 수 있다.
- 개발자 도구의 Elements 패널의 하위 패널 중 'Properties’를 선택해도 동일한 목록을 확인할 수 있습니다.
'FE' 카테고리의 다른 글
| 1.7 문서 수정하기 (4) | 2024.11.15 |
|---|---|
| 1.6 속성과 프로퍼티 (0) | 2024.11.14 |
| 1.5 주요 노드 프로퍼티 (1) (0) | 2024.11.12 |
| 1.4 getElement*, querySelector*로 요소 검색하기 (0) | 2024.11.11 |
| 1.3 DOM 탐색하기 (0) | 2024.11.10 |
