웹개발 수업/JavaScript
[Day +61 / Java Script]기초(12. 주요 노드 프로퍼티)
Chole Woo
2021. 9. 17. 15:23
210916 목
12) 주요 노드 프로퍼티
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>12_주요노드프로퍼티</title>
</head>
<body>
<h1>주요 노드 프로퍼티</h1>
<h3>1. innerHTML</h3>
<p>
요소 안 HTML을 문자열 형태로 받아올 수 있음<br>
요소 안 HTML을 수정하는 것도 가능함
</p>
<script>
// 내용 읽기 방법
console.log(document.body.innerHTML);
// 내용 변경 방법
// document.body.innerHTML = '새로운 BODY!';
// 답 : 화면 상의 출력되는 곳에(바디 안에) 새로운 값이 설정됨
// 주요 노드 프로퍼티 ~ 가능함 부분이 새로운 BODY!로 값이 변경됨
</script>
<div id="area1">
자바스크립트에서 태그 앨리먼트의 값을 읽거나, 변경할 때 innerHTML 속성을 사용함
</div>
<button onclick="checkValue();">innerHTML 확인</button>
<script>
function checkValue() {
// 아이디를 이용하여 요소 선택
let divEl = document.getElementById('area1');
// alert(divEl.innerHTML);
// 답
// 자바스크립트에서 태그 앨리먼트의 값을 읽거나, 변경할 때 innerHTML 속성을 사용함
// 이라는 출력물이 alert로 출력됨
// 요소의 내부 HTML 값 변경
divEl.innerHTML = 'innerHTML 속성으로 값 변경함';
// 답 : 화면상에서의 내용이 <div id = "area1">안의 값에서 현재 입력한 값으로 변경됨
}
</script>
<h3>2. outerHTML</h3>
<p>
outerHTML 속성에는 요소 전체 HTML이 담김<br>
outerHTML은 innerHTML에 요소 자체를 더한 것<br>
innerHTML은 요소 값을 수정하지만 outerHTML은 요소 값을 수정할 수 없음
</p>
<div id="area2">
area2 영역입니다.
</div>
<script>
let area2 = document.getElementById('area2');
console.log(area2.outerHTML);
// 답
// <div id="area2">
// area2 영역입니다.
// </div>
</script>
<p>
*추가 내용<br>
innerHTML<br>
innerHTML에서 지정한 요소 태그를 제외한 안쪽 태그만 값을 가져온다<br>
자기자신 미포함<br><br>
outerHTML<br>
outerHTML에서 지정한 요소 태그도 포함하여 값을 가져오고
선택한 엘리먼트를 포함해서 처리<br>
자기자신 포함
</p>
<h3>3. textContent</h3>
<p>
요소 내의 텍스트에 접근할 수 있으며 태그는 제외하고 오로지 텍스트만 추출함<br>
사용자의 입력 값을 받아 처리해야 하는 경우 사용자가 입력한 값은 텍스트로 처리되어야 함<br>
예상치 못한 HTML이 사이트에 침투하는 것을 막기 위해 사용함
</p>
<div id="area3">
<p>area3 영역입니다.</p>
<p>문단을 나눠봅니다.</p>
</div>
<div id="area4"></div>
<div id="area5"></div>
<script>
let area3 = document.getElementById('area3');
console.log(area3.textContent);
// 답
// area3 영역입니다.
// 문단을 나눠봅니다.
// => p태그는 제외하고 텍스트만 불러왔음
let input = prompt('값을 입력하세요', '<p><b>강조할거예요</b></p>');
// 일부러 태그가 포함된 문자열을 만들어 봄
document.getElementById('area4').innerHTML = input;
// 답 : 강조할거예요(자동 bold처리 됨)
document.getElementById('area5').textContent = input;
// 답 : <p><b>강조할거예요</b></p>(태그 모두 출력)
</script>
<h3>4. hidden</h3>
<p>
hidden은 요소를 보여줄지 말지 지정할 때 사용<br>
HTML 안에서 쓸 수도 있고 자바 스크립트에서도 쓸 수 있음<br>
기술적으로 style = "display:none"과 동일함
</p>
<div hidden>숨겨진 div</div>
<div id="area6">area6 영역도 숨기기</div>
<script>
document.getElementById('area6').hidden = true;
// 화면에는 안나오나 elements 창에서는 확인 가능
</script>
<h3>5. value</h3>
<p>
input, select, textarea의 값이 저장되는 속성
</p>
<form>
이름 : <input type="text" name="username" id="username">
<input type="button" onclick="readValue();" value="이름 값 확인">
</form>
<div id="area7"></div>
<script>
function readValue() {
let username = document.getElementById('username');
if (username.value == "") {
alert('이름을 입력하세요');
username.focus();
// 의미 : input 태그 안에 마우스 커서 넣기
} else {
document.getElementById('area7').innerHTML = username.value;
// 답 : 화면상에 부승관이라는 글자가 출력됨
}
}
</script>
<h3>6. DOM프로퍼티와 HTML속성</h3>
<p>
HTML에서 태그는 복수의 속성을 가질 수 있음<br>
브라우저는 HTML을 파싱해 DOM객체를 만들 때 HTML 표준 속성을 인식하고,
이 표준 속성을 사용해 DOM프로퍼티를 만듦<br>
비표준 속성은 DOM 프로퍼티로 전환되지 않음<br>
따라서 밑의 4가지는 비표준 속성에게도 활용할 수 있는 메소드이다<br>
element.hasAttribute(name) : 속성 존재 여부 확인<br>
element.getAttribute(name) : 속성 값을 가져옴<br>
element.setAttribute(name, value) : 속성 값을 변경함<br>
element.removeAttribute(name) : 속성 값을 지움<br><br>
*파싱 : 구문분석<br>
*프로퍼티 : 객체 내부의 속성<br>s
</p>
<div id="area8" something="non-standard"></div>
<script>
let area8 = document.querySelector('#area8');
console.log(area8.id);
// 답 : area8
// 표준 속성은 DOM의 프로퍼티로 변환
console.log(area8.something);
// undefined 출력
// 비표준 속성은 DOM의 프로퍼티로 변환되지 않음
console.log(area8.hasAttribute('something'));
// 의미 : something이라는 속성이 있나요?
// 답 : true
console.log(area8.getAttribute('something'));
// 의미 : something이라는 속성값을 가져오세요
// 답 : non-standard
area8.setAttribute('something', 'modify');
// 의미 : 속성값을 변경할게요
console.log(area8.getAttribute('something'));
// 답 : modify
area8.removeAttribute('something');
// 의미 : 속성 값을 지워주세요
console.log(area8.hasAttribute('something'));
// 답 : false
</script>
</body>
</html>