목차
- 주요 노드 프로퍼티
1-1. innerHTML 읽기 가능, 변경 가능
1-2. outerHTML 읽기 가능
1-3. textContent 태그 제외 텍스트만 추출, 일반 텍스트 취급
1-4. hidden 숨김 처리
1-5. value input, select, textarea 값 저장 - DOM 프로퍼티와 HTML 속성
2-1. 비표준 속성 메소드
2-2. 사용 예시
1. 주요 노드 프로퍼티
| innerHTML | 요소 안 HTML을 문자열 형태로 반환 또는 요소 안 HTML을 수정 |
| outerHTML | 요소 전체 HTML을 문자열 형태로 반환 ※ innerHTML에 요소 자체를 더한 것 |
| textContent | 요소 안 태그 제외 텍스트만 추출하여 반환 또는 요소 안 텍스트만 추출하여 설정 |
| hidden | 요소를 보여줄지 말지 지정 ※ style="display: none;"과 동일 |
| value | 요소 값이 저장되는 속성 ※ input, select, textarea 등 |
1-1. innerHTML 읽기 가능, 변경 가능
// 내용 읽기
console.log(document.body.innerHTML);
// 내용 변경
document.body.innerHTML = '새로운 Body!';- innerHTML 통해 요소 안 HTML을 문자열 형태로 받아오거나(get), 수정하는 것(set)이 가능하다.
- 예시처럼 새로운 내용이 대입되거든 기존에 작성했던 것은 모두 사라지고 대체된다.
<body>
<div id="area">
area 영역
</div>
<button onclick="checkValue();">innerHTML 확인</button>
<script>
function checkValue() {
// 아이디를 이용하여 요소 접근
let divEl = document.getElementById('area');
// 읽어온 요소가 가지는 값 alert 출력
alert(divEl.innerHTML);
// 값 변경하기
divEl.innerHTML = "innerHTML 속성으로 값 변경함"; //버튼 바깥에 작성한 글 내용이 바뀜
}
</script>
</body>- 태그 요소가 가진 값을 읽거나 변경하기 위해 innerHTML 속성을 쓴다.
1-2. outerHTML 읽기 가능
- outerHTML 속성에는 요소 전체 HTML이 담긴다.
- 즉 innerHTML에 요소 자체를 더한 개념이다.
<body>
<div id="area">
area 영역
</div>
<script>
let area = document.querySelector("#area");
console.log(area.outerHTML);
</script>
</body>- innerHTML의 경우 요소 값을 수정하지만, outerHTML은 요소 값을 수정하지 못하고 읽기만 가능하다.
1-3. textContent 태그 제외 텍스트만 추출, 일반 텍스트 취급
<body>
<div id="areaA">
<p>areaA 영역</p>
<p>문단 나누기</p>
</div>
<div id="areaB"></div>
<div id="areaC"></div>
<script>
// 태그 제외하고 텍스트만 추출
let areaA = document.getElementById('areaA');
//console.log(areaA.textContent); //p태그 안에 적었지만 textContent 속성 통해 가져왔기에 텍스트만 보여짐
let input = prompt("값을 입력하세요", "<p><b>강조</b></p>");
let areaB = document.querySelector("#areaB");
let areaC = document.querySelector("#areaC");
//areaB.innerHTML = input; //HTML로 해석돼 굵게 처리된 글씨로 노출됨...
//areaC.textContent = input; //텍스트로 해석돼 코드 그대로 노출됨
</script>
</body>- 요소 내 텍스트에 접근하는 속성으로, 태그는 제외하고 오직 텍스트만 추출한다.
- 사용자의 입력값을 받아 처리해야 하는 경우에 예상치 못한 HTML이 입력 및 침투되는 것을 막기 위해 쓰인다.
- 위 예시에서 <b>강조</b> 문구를 어떻게 해석하는지 여부에 따라 innerHTML/textContent간 차이를 살펴볼 수 있다. innerHTML은 HTML로 받아들여 굵게 처리된 글씨를 보인다. 반면 textContent는 텍스트와 똑같이 읽어 코드를 반영시키지 않고 그대로 노출시킨다.
- 이처럼 사용자가 입력할 알 수 없는 값을 일반 텍스트로 취급하도록 하기 위해서는 textContent로 받아주는 것이 바람직하다.
1-4. hidden 숨김 처리
<body>
<div hidden>숨겨진 div</div>
<div id="area">area 영역도 숨기기</div>
<script>
let area = document.getElementById('area');
area6.hidden = true;
</script>
</body>- 요소를 보여줄지 말지 지정할 때 사용되는 속성이다.
- HTML 안에 쓰일 수도 있고, 자바스크립트에서 사용될 수도 있다.
- 기술적으로 style="display: none"과 동일하다.
1-5. value input, select, textarea 값 저장
<body>
<form>
이름 : <input type="text" name="username" id="username">
<input type="button" onclick="readValue();" value="input 값 확인">
</form>
<div id="area" class="area"></div>
<script>
function readValue() {
let input = document.querySelector('#username');
if(input.value == '') { //아무 것도 입력하지 않은 상태면
alert('이름을 입력하세요');
input.focus(); //커서가 깜빡이게 만듦
} else {
document.querySelector("#area").innerHTML = input.value + "라고 입력되었습니다."; //입력 받은 값을 div 내부문자로 저장
}
}
</script>
</body>- input, select, textarea의 값이 저장되는 속성이다.
- 여닫는 태그의 내부문자는 innerHTML에 작성할 수 있지만, 그렇지 않은 태그에 대해서는 value 속성을 통해 지정할 수 있다.
2. DOM 프로퍼티와 HTML 속성
❗ 표준 속성 : 정의된 속성, id, class, style 등등
❗ 비표준 속성 : 지어낸 속성, something 등등
- 브라우저는 HTML을 파싱해 DOM 객체를 만들 때 HTML 표준 속성을 인식하고, 이 표준 속성 통해 DOM 프로퍼티를 만든다.
- 반면 비표준 속성의 경우는 DOM 프로퍼티로 자동 전환되지 못한다. 따라서 비표준 속성으로 프로퍼티 설정이 필요하다면 별도 메소드 사용이 요구된다.
2-1. 비표준 속성 메소드
| element .hasAttribute(name) |
속성 존재 여부 확인 |
| element .getAttribute(name) |
속성값 호출 |
| element .setAttribute(name, value) |
속성값을 value로 변경 |
| element .removeAttribute(name) |
속성값일 삭제 |
2-2. 사용 예시
❗ 비표준 속성은 DOM 프로퍼티로 자동 전환되지 않아아이디명.속성명으로 조회해도 undefined로 출력된다. 이를 개선하기 위해 사용하는 것이 바로 비표준 속성용 메소드이다.
<body>
<div id="area" something="non-standard"></div>
<script>
let area = document.querySelector('#area');
console.log(area.id); //표준값 -- area id값 출력됨
console.log(area.something); //비표준값 -- undefined 인식되지 않음
console.log(area.hasAttribute('something')); //true -- 해당 속성 있음
console.log(area8.getAttribute('something')); //현재 속성값 -- none-standard
area8.setAttribute('something', 'modify');
console.log(area8.getAttribute('something')); //현재 속성값 -- modify
area8.removeAttribute('something');
console.log(area8.hasAttribute('something')); //false -- 해당 속성 없음
</script>
</body>'Frontend > JavaScript' 카테고리의 다른 글
| [JavaScript] BOM | window | setInterval | 타이머 메소드 (0) | 2022.02.22 |
|---|---|
| [JavaScript] 문서 수정 | 노드 메소드 | insertAdjacentHTML | classList (0) | 2022.02.22 |
| [JavaScript] 요소 검색 메소드 | querySelector | NodeList (0) | 2022.02.21 |
| [JavaScript] DOM | 요소 노드 | 텍스트 노드 | 문서 객체 (1) | 2022.02.20 |
| [JavaScript] 숫자 | 문자 | 날짜 | 객체 메소드 (0) | 2022.02.20 |
