23.04.18 자바스크립트 DOM 트리 이해

1. 모든 HTML 태그는 요소 노드가 된다. => HTML 태그 = 요소 = 노드

2. HTML 태그에서 사용하는 텍스트 내용은 자녀 노드가 된다.

3. HTML 태그에서 속성은 자녀 노드가 된다.

4. 노드 리스트 란?

querySelectorAll( ) : 복수의 요소를 선택해 올 수 있다.

=> 복수의 요소는 노드리스트에 저장된다. (배열 객체로 가져온다)

ex) 만약 HTML에 여러개의 P 요소가 있을 경우,

document.querySelectorAll('p');

NodeList(3) [p, p, p]

0 : p

1 : p

2 : p

length : 3

document.querySelectorAll('p')[1];

<p>CSS</p> //콘솔창에 나타나는 결과값.

5. 새로운 노드를 만들어서 추가하고 싶은 경우

createElement( ) : 요소 노드 만들기

createTextnode( ) :텍스트 노드만들기

appendChild( ) : 부모요소에 자식요소 연결하기

createAttribute( ) : 속성 노드 만들기

setAttributeNode( ) : 속성 노드 연결하기

document.createElement(생성하고 싶은 요소명) : 새로운 요소를 생성한다.

document.createTextNode(생성하고 싶은 텍스트) : 새로운 텍스트 노드를 생성한다.

부모노드.appendchile(자식노드) : 부모노드 하위에 자식노드를 추가 시킨다.

let newP = document.createElement("p");

let textNode = document.createTextNode("typescript");

newP.appendchild(textNode);

document.body.appendchild(newP);

<p>typescript</p>

let newImg = document.createElement("img");

undefined

let srcNode = document.createAttribute("src");

undefined

srcNode.value = "/img/iu.jpg";

'/img/iu.jpg'

newImg.setAttributeNode(srcNode);

null

document.body.appendChild(newImg);

6. 주문하기 버튼 클릭시, 주문하기 아래 영역에 상품명을 출력해보자

<body>
  <div id="container">
    <h1>상품설명</h1>
    <h2>2023 신상 에어맥스 풀파워</h2>
    <p>최신 에어폼 탑재</p>
    <p>트렌디한 컬러 및 디자인</p>
    <button id="order">주문하기</button>
  </div>
  <div id="orderInfo"></div>
</body>

//1.주문하기 버튼정의
//2.출력공간 정의
//3.출력공간에 보여줄 컨텐츠 정의

const orderButton = document.querySelector("#order"); //버튼을 정의
const orderInfo = document.querySelector("#orderInfo"); //출력될 공간을 정의
const title = document.querySelector("h2"); // 출력 공간에 보여줄 컨텐츠

orderButton.addEventListener("click", () => { //버튼을 클릭하게 된다면
  let newP = document.createElement("p"); //새로운 요소를 생성
  let textP = document.createTextNode(title.innerText); //요소안에 들어갈 텍스트 노드 생성

  newP.appendChild(textP); //새로운 요소안에 텍스트 노드를 하위요소로 지정
  newP.style.fontSize = "0.8em";
  newP.style.color = "blue";
  orderInfo.appendChild(newP); // 출력공간에 하위요소로 컨텐츠 지정
}, {once : true}); //출력이 한번만 되도록 설정

7. 새로운 노드를 원하는 위치에 추가하고 싶을때

노드를 만들어서 자녀요소로 추가 할때

> 가장 마지막영역에 추가됨

>appendChild: 부모요소에 가장 마지막 위치로 자녀를 편입시킴

기존노드의 앞에 새요소로 추가하고자 할때 사용하는 메서드 함수 !!

insertBefore(추가하고자하는 요소, 기준점이되는 요소) : 기준점이 되는 요소가 정의되어있어야함.

❕ 텍스트 추가 버튼 클릭시 javascript 텍스트 앞에 typescript 단어가 추가되도록 해보자!

const button = document.querySelector("button"); //버튼을 정의

let newP = document.createElement("p"); //새로운 요소 만들기

let textNode = document.createTextNode("Typescript"); // 텍스트 노드 만들기

newP.appendChild(textNode); //새로운요소안에 텍스트 노드를 하위요소로 넣기

let basisNode = document.querySelectorAll("p")[2]; //기준점이 되는 요소를 정의

button.addEventListener("click", () => { //버튼을 클릭하면

document.body.insertBefore(newP, basisNode); //기준점 요소 앞에 새로운 요소를 추가한다.

newP.style.color = "blue";

})

8. 노드를 삭제하는 메서드

✔ remove( ) : 선택된 요소 및 노드 자체를 삭제.

삭제하고자 하는요소.remove( )

const title = document.querySelector("h1");

title.addEventListener("click", () => {

title.remove();

});

✔ removeChild( ) : 선택된 요소 및 노드의 자녀 노드를 삭제합니다.

부모노드를 찾는 프로퍼티 : 자식노드.parentNode

부모노드.removeChild(자녀노드);

9. 선택한 요소를 삭제해보는 코드를 짜보자!

HTML 바디영역

<body>
  <h1>Web Programming</h1>
  <ul id="items">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
  </ul>
</body>

li 태그 중 하나를 클릭했을때, 클릭한 해당 태그만 지워지도록 해보기.

Javascript

const items = document.querySelectorAll("li");

for(let item of items) {
  item.addEventListener("click", function() { //화살표함수를 쓰면 작동안됨.
    this.parentNode.removeChild(this);
  });
};
// 화살표함수가 만능은아니다.. this 가 화살표함수에 들어오게 되면 Window 객체를 가르킴.. 
// this객체를 사용해야할땐 화살표함수를 쓸 수 없다.

중요! 화살표 함수가 만능은 아니라는 것.

화살표 함수안에 this 객체가 들어오게되면 선택된 요소를 가리키는게 아닌, window 객체를 가르키게 된다.

9-1. 선택한 요소 삭제하기.

HTML 바디영역

<body>
  <div id="cart">
    <h1>학습언어</h1>
    <div id="products">
      <p><span>&cross;</span> HTML5+CSS3+Javascript</p>
      <p><span>&cross;</span> React</p>
      <p><span>&cross;</span> Typescript</p>
    </div>
  </div>

CSS 스타일

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#cart {
  margin: 50px auto;
  width: 600px;
  padding: 10px 20px;
}
#cart h1 {
  margin-bottom: 20px;
}
#products p {
  font-size: 1.2em;
  line-height: 3;
}
#products p span {
  color: #ccc;
  margin-right: 0.8em;
  font-weight: bold;
}
#products p span:hover {
  color:  crimson;
  cursor: pointer;
}

Javascript

const del = document.querySelectorAll("span"); //배열객체로가져온다.

for(let e of del) {  //배열객체에서 각각의 값을 가져와 어떠한 이벤트를 주고 싶을때.
  e.addEventListener("click", function() {
    this.parentNode.remove();
  });
};

'Javascript > GMA(2302~)' 카테고리의 다른 글

23.04.18 자바스크립트 북리스트 저장하기 (0)	2023.04.18
23.04.18 시간(오전,오후)에 따라 바뀌는 이미지 (0)	2023.04.18
23.04.17 오른쪽 사이드 메뉴 만들어보기 (0)	2023.04.17
23.04.17 자바스크립트 이미지 슬라이더 만들어보기 (0)	2023.04.17
23.04.17 자바스크립트 이벤트 - 2 (0)	2023.04.17

<h1>Hyerin's Develop Note</h1>

23.04.18 자바스크립트 DOM 트리 이해

'Javascript > GMA(2302~)' 카테고리의 다른 글

티스토리툴바

23.04.18 자바스크립트 DOM 트리 이해

'Javascript > GMA(2302~)' 카테고리의 다른 글

관련글

티스토리툴바