Step by Step

DOM(Node, Element, 생성 , 검색, 수정)-(1) 본문

Javascript Study

DOM(Node, Element, 생성 , 검색, 수정)-(1)

짤진이 2023. 9. 6. 23:29
반응형

DOM(document object model)

DOM이란 HTML문서를 객체로 표현한 것으로 JS에서 HTML을 제어할 수 있게한다.

 

아래 코드는 h1 태그의 텍스트 값을 콘솔창에서 보여주는 코드이다.

 

const element = document.querySelector("h1");
console.log(element.textContent);

 

DOM API

 

Node vs Element

Node : HTML요소, 텍스트, 주석 등 모든 것을 의미

Element : HTML 요소를 의미

 

이제부터 나오는 js 코드들은 아래 index.html을 바탕으로 적용된다.

 

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <script type="module" defer src="./main.js"></script>
</head>
<body>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
  </div>
</body>
</html>

 

console.log(parent.childNodes)는 자식 노드를 확인하므로 5개의 값을 가진다.

console.log(parent.children)은 자식 요소를 확인하므로 노드보다 적은 2개의 값을 가진다.

 

const parent = document.querySelector(".parent");

// 부모 요소의 모든 자식 노드 확인
console.log(parent.childNodes);

// 부모 요소에 모든 자식 요소 확인
console.log(parent.children);

console.dir(parent);

//노드가 요소의 상위 개념
class N {}
class E extends N {}

console.dir(E); //class E
console.dir(N); // class N
console.dir(E.__proto__); //.__proto__ 상위 개념 호출 //class N

console.dir(Element); f Element()
console.dir(Node); // f Node()
console.dir(Element.__proto__); // f Node()

 

getElementById()는 id값을 불러오는 것이기 때문에 #을 사용하지 않는 것이 특징이다.

 

// document.getElementById()

// id 속성 값으로 검색한 요소
// 여러 요소가 검색되면 가장 먼저 찾은 요소 반환

const el = document.getElementById("child2"); //# 작성 x
console.log(el);

 

//document.querySelector()

// CSS 선택자로 검색한 요소를 하나 반환
//여러 요소가 검색되면 가장 먼저 찾은 요소만 반환

const el = document.querySelector(".child");
console.log(el);

 

아래 코드는 모든 .child 값을 nodeList로 반환하고 forEach를 통해 텍스트 값을 하나씩 콘솔창에 나타낸다.

 

//document.querySelectorAll()

// Css 선택자로 검색한 모든 요소를 NodeList로 반환

const nodeList = document.querySelectorAll(".child");
console.log(nodeList);
nodeList.forEach((el) => console.log(el.textContent));

console.log(Array.from(nodeList).reverse());
//Array.from() 배열요소 반환

 

 

// N.parentElement

// 노드의 부모요소 반환

const el = document.querySelector(".child");
console.log(el.parentElement);

 // E.closest()

//자신을 포함한 조상요소 중 CSS선택자와 일치하는 가장 가까운 요소 반환

const el = document.querySelector(".child");

console.log(el.closest("div")); // <div></div>
console.log(el.closest("body")); // <body></body>
console.log(el.closest(".hello")); // null

// N.previousSibling / N.nextSibling

// 노드의 이전 형제 혹은 다음 형제 노드를 반환

const el = document.querySelector(".child");
console.log(el.previousSibling);
console.log(el.nextSibling);

// N.children

//요소의 모든 자식요소 반환

const el = document.querySelector(".parent");
console.log(el.children);

console.log(Array.from(el.children)); //배열 요소 반환

 

 

반응형

'Javascript Study' 카테고리의 다른 글

모던자바스크립트 Deep Dive - 4장(변수)  (0) 2024.02.08
Javascript - Web API  (1) 2023.11.21
Javascript 이벤트(addEventListener)  (0) 2023.11.18
Javascript 이벤트(추가, 삭제, 객체, 옵션, 버블링, 위임)  (2) 2023.09.09
비동기(Callback, Promise, Await, Async)  (2) 2023.09.04
'Javascript Study' Related Articles more