반응형
DOM 노드 클래스
DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원한다.
계층 구조 최상위에는 EventTarget 이 있다.
속성과 프로퍼티
속성
- HTML 에서 쓰인다.
- HTML 에서 태그는 여러개의 속성을 가질 수 있다.
프로퍼티
- DOM 객체 안에서 쓰인다.
- 브라우저는 HTML을 파싱해서 DOM 객체를 만든다.
- HTML 표준 속성을 인식하고 이를 DOM 프로퍼티로 만든다.
- 표준이 아닌 속성은 메서드를 이용해 접근이 가능하다.
- 표준이 아닌 속성에는 사용자가 지정한 속성이 있다.
<!-- 이름(name) 정보를 보여주는 div라고 표시 -->
<div show-info="name"></div>
<!-- 나이(age) 정보를 보여주는 div라고 표시 -->
<div show-info="age"></div>
<script>
// 표시한 요소를 찾고, 그 자리에 원하는 정보를 보여주는 코드
let user = {
name: "Pete",
age: 25
};
for(let div of document.querySelectorAll('[show-info]')) {
// 원하는 정보를 필드 값에 입력해 줌
let field = div.getAttribute('show-info');
div.innerHTML = user[field]; // Pete가 'name'에, 25가 'age'에 삽입됨
}
</script>
| 프로퍼티 | 속성 | |
| 타입 | 모든 타입 가능, 각 표준 프로퍼티의 타입은 명세서에 설명되어 있음 | 문자열 |
| 이름 | 대·소문자 구분 | 대·소문자 구분하지 않음 |
속성과 함께 쓰이는 메서드:
- elem.hasAttribute(name) – 속성 존재 여부 확인
- elem.getAttribute(name) – 속성값을 가져옴
- elem.setAttribute(name, value) – 속성값을 변경함
- elem.removeAttribute(name) – 속성값을 지움
- elem.attributes – 속성의 컬렉션을 반환함
주요 노드 프로퍼티
innerHTML
- 요소 안의 HTML을 문자열 형태로 받아오고, 수정할 수 있다.
- 페이지를 수정할 때 유용하게 사용하는 방법 중 하나이다.
- 요소 노드에만 사용할 수 있다.
<body>
<p>p 태그</p>
<div>div 태그</div>
<script>
alert( document.body.innerHTML ); // 내용 읽기
document.body.innerHTML = '새로운 BODY!'; // 교체
</script>
</body>nodeValue / data
- 요소 노드를 제외한 텍스트 같은 다른 타입의 노드에서 노드의 내용을 변경할 때 사용할 수 있다.
<body>
안녕하세요.
<!-- 주석 -->
<script>
let text = document.body.firstChild;
alert(text.data); // 안녕하세요.
let comment = text.nextSibling;
alert(comment.data); // 주석
</script>
</body>textContent
- HTML에서 모든 태그를 제외한 텍스트만 추출 할 수 있다.
- 값을 할당할 때는 태그를 포함한 특수문자를 문자열로 처리하기 때문에 쓰기용으로 유용하게 사용할 수 있다.
<div id="elem1"></div>
<div id="elem2"></div>
<script>
let name = prompt("이름을 알려주세요.", "<b>이보라</b>");
elem1.innerHTML = name; // 이보라
elem2.textContent = name; //"<b>이보라</b>"
</script>- innerHTML과 textContent 를 비교해보면 첫번째 div 에는 입력한 태그가 태그로 해석되어 굵은 글씨로 출력되고,
- 두번째 div 에는 이름이 택스트 형태로 저장되어 태그가 그대로 출력된다.
- 사용자의 입력값을 받아서 처리할 때, 예상치 못한 HTML이 입력되는 것을 막기 위해서 textContent를 사용할 수 있다.
hidden
- 속성을 보여줄지 말지 지정할 수 있다.
- true 일 때, style="display:none" 와 동일한 기능을 한다.
<div id="elem">깜빡이는 요소</div>
<script>
setInterval(() => elem.hidden = !elem.hidden, 1000);
</script>
예제) li 노드 안에 있는 텍스트 출력하기
<!DOCTYPE HTML>
<html>
<body>
<ul>
<li>육상 동물
<ul>
<li>포유류
<ul>
<li>소</li>
<li>당나귀</li>
<li>개</li>
<li>호랑이</li>
</ul>
</li>
<li>비 포유류
<ul>
<li>뱀</li>
<li>새</li>
<li>도마뱀</li>
</ul>
</li>
</ul>
</li>
<li>수생 동물
<ul>
<li>담수 동물
<ul>
<li>붕어</li>
<li>메기</li>
</ul>
</li>
<li>해양 동물
<ul>
<li>해마</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
for (let li of document.querySelectorAll('li')) {
let title = li.firstChild.data;
}
</script>
</body>
</html>반응형
'Study > JavaScript' 카테고리의 다른 글
| JavaScript 미니 프로젝트 Todo List (0) | 2023.09.12 |
|---|---|
| JavaScript 미니 프로젝트 _ 숫자 맞추기 게임 (1) | 2023.09.11 |
| 문서 객체 모델 DOM (0) | 2023.08.29 |
| 자바 스크립트 기본 (0) | 2023.08.28 |
