엘리스 SW 엔지니어링 🐰 - DOM과 Node 객체
사진 및 정보 출처: 엘리스 sw 엔지니어링
🤔 Node 객체?
🌲 노드 트리
:HTML DOM에서 정보를 저장하는 계층적 단위
-
노드 트리는 노드들의 집합으로 노드간 관계를 표현
-
자바스크립트에서는 dom을 이용해 노드 트리에 포함된 모든 노드에 접근 가능함
<html>
<head>
<title>자바스크립트 기초</title>
</head>
<body>
<article>
<header>header</header>
<section>
<header>header 1</header>
section1
</section>
</article>
</body>
</html>🪜 노드의 종류
- 문서 노드: HTML 문서 전체를 나타내는 노드
- 요소 노드: 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드
- 주석 노드: HTML 문서의모든 주석은 주석 노드
- 속성 노드: 모든 HTML 요소의 속성은 속성 노드, 요소 노드에 관한 정보를 가짐, 하지만 해당 요소 노드의 자식 노드에는 포함되지 않음
head노드가 가진 속성
/ \
title h1 여기에는 포함 ㄴㄴ- 텍스트 노드: HTML문서의 모든 텍스트는 텍스트 노드
<p>텍스트 노드</p>❕ 노드 값
: 노드에 대한 정보를 다음과 같은 프로퍼티를 통해 접근할 수 있다
nodeName, nodeValue, nodeType
document.childNodes[0].nodeName;
:html 문서의 모든 자식 노드 중 첫 번째 노드의 이름
document.getElementById("id").firstChild.nodeValue;
:아이디가 id인 요소의 첫 번째 자식 노드의 노드 값
document.getElementById("id").firstChild.nodyType;
:아이디가 id인 요소의 첫 번째 자식 노드의 노드 타입
Author And Source
이 문제에 관하여(엘리스 SW 엔지니어링 🐰 - DOM과 Node 객체), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@zaman17/DOM-DOM과-Node-객체저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
