JQuery - Node , Element

쁘냥·2024년 2월 1일

jquery

Html / css / Jquery

목록 보기

4/5

🪄Node

👉 DOM : HTML 마크업이 각각의 노드로 변환된다.
👉 DOM문서는 node의 계층 구조로 이루어져 있다.

💫 계층구조

출처 : https://velog.io/@yangareum1818/JS-node-element-%EC%B0%A8%EC%9D%B4

<html>
  <body>
    <div id="text">Hello</div>
    <ol>
      <li>안녕</li>
      <!--주석-->
      <li>잘가</li>
    </ol>
  </body>
</html>

html
├── HEAD
└── BODY
	├── #text -> Hello
    ├── ol
    	├──  #text
    	├── li
    	└── 안녕
    ├── #text
    ├── 주석
    ├── #text
		├── li
    	└── 잘가
	└── #text
└── #text
//위와 같이 node는 주석,태그,텍스트 등 모두 포함하고 있다.

💫nodeType 속성

nodeType은 node의 type을 상수로 리턴합니다.

👉 1(Node.ELEMENT_NODE) -> Element <div></div> or <p></p>
👉 3(Node.TEXT_NODE) -> 텍스트 text
👉 8(Node.COMMENT_NODE) -> 주석  주석
👉 9(Node.DOCUMENT_NODE) -> Document document
👉 10(Node.DOCUMENT_TYPE_NODE) -> DOCTYPE DocumentType node <!DOCTYPE html>
👉 11(Node.DOCUMENT_FRAGMENT_NODE) -> Document Fragment DoucumentFragment node