LearningJavaScript

14. The DOM(Document Object Model)

jyshimmy 2020. 8. 11. 17:50

다시 DOM 을 만남!

이게 있어서 JavaScript가 html에 접근(엘리먼트의 속성값을 얻어내거나, 변경)이 가능해지고, 웹페이지가 작동이 가능해지는! --> DOM을 활용하면 html을 조작할 수 있다.

 

The Document Object Model (DOM) is a programming interface for HTML and XML documents.

 

DOM은 자바크립트 객체와 비슷한 트리 구조를 갖고 있다. 나뭇가지로 잘 표현될 수 있는 부모-자식 관계를 떠올리면 쉽다. 예를 들어 한 부모 아래 여러 자식이 있는 것은 가능하지만, 그 반대는 없는 경우를 말한다. 이런 하나인 부모가 자식을 여러개 갖는 구조가 계속 반복되는 것이다.

 

console.log는 html 형태로 보여주지만, console.dir로 입력하면 객체형태로 볼 수 있음

ie. DOM을 대표하는 document 객체를 두 가지 방법으로 볼 수 있다

 

Elements창에 있는 $0를 이용해 해당 엘리먼트를 콘솔창에서 객체형태로 볼 수 있다. "console.dir($0)"

 

속성 속성 이름 설명
태그 이름 tagName  
id id  
class 목록 classList classList - 유사배열로 나오기때문에 배열처럼(index를 이용해) 사용할 수 있다 classList와 관련된 메소드들 검색!!!
class 문자열 className className - 텍스트 형태로 나옴
속성 객체 attributes 속성을 의미함
스타일 객체 style  
엘리먼트에 담긴 내용 innerHTML,
textContent,
innerText		 innerHTML - html통째로 내용을 바꿀 때 사용하면 편리함. 혹은 링크 넣을 때 사용. 실제 내용 변경이 가능함
textContent - 공백까지 포함해서 보여짐, 실제 내용 변경이 가능함
(innerText - 위의 둘과 비슷하나, 잘 사용하지 않음.)
form 입력 값 value 유저가 입령창에 입력하는 내용을 말함. <input> <password>안의 내용을 받아 올 수 있는 방법
자식 엘리먼트 children  
부모 엘리먼트 parentElement  
자식 노드 childNodes  
data-*속성에 담긴 값 dataset  
이벤트 onclick, onmouseover, onkeyup 등  
죄표 정보(기준점에 딸라 다름)    
크기 정보(기준점에 딸라 다름)    

node vs. element: https://opentutorials.org/course/1375/6698 참고하기

node - 엘리먼트 안의 내용까지 볼 수 있음

element - span까지만 볼 수 있음. 따라서 Node에 속해있음.

**text는 Node 이나, Element는 아니다.

parent node vs. parent element

 

위에서 DOM? 속성들에 대해 알아보았다. 이제 자바스크립트로 특정 html엘리먼트를 선택하고 가져오는 법을 배워보자.

reference method name example
tagName getElementsByTagName document.getElementsByTagName
id getElementById document.getElementById('new-tweet')
className getElementsByClassName  
selector querySelector,
querySelectorAll		 document.querySelectorAll('.comment') 이름에서 유추할 수 있듯이 selector를 이용한 메소드이므로, 설렉터 이름을 안에 써주면 된다. id, class를 구분해서 # 또는 .을 앞에 붙여주면 되겠다. 이 예는 class="comment"라는 아이를 찾는 경우

 

 

append vs. prepand method

append를 보면 그나마 떠오르는 연관단어가 appendix(책의 부록: 추가 설명)다. 즉, "추가한다"를 의미한다.

div, span, 텍스트노드를 각각 append 한다면,

document.body.append(document.createElement('div'),('span'),"Good Morning!");

append method를 이용해 자바스크립트에 위처럼 원하는 전달인자(argument)가 다수 일 때 유용하다. 위의 결과는 아래와 같다.

<body>

  .....(이미 존재하고 있는 요소들)
  <div></div>
  <span></span>
  "Good Morning!"
  
</body>

이미 존재하고 있는 요소들 "뒤에" 추가되는 것을 볼 수 있다.

 

(그렇다면, prepand는 앞으로 붙여지겠군이란 생각이 절로 든다. 앞뒤로 붙이고 빼주는 메소드들을 배열에서 좀 접해본 결과. 이 정도의 감이 생겼다. 깔깔)

document.body.prepend(document.createElement('div'),('span'),"Good Morning!");
<body>
  
  <div></div>
  <span></span>
  "Good Morning!"
  .....(이미 존재하고 있는 요소들)
  
</body>

 

appendChild vs. append

위에서 언급된 바처럼, append는 다수의 전달인자를 받을 수 있지만, appendChild는 단수형으로 쓰여진 child에서 힌트를 얻을 수 있듯, 하나씩 밖에 추가할 수 없다. 메소드 이름을 볼 땐 단수형, 복수형을 눈여겨 볼 필요가 있다.

 

querySelector("#world")

id로 찾을 때

class로 찾을 때

 

querySelectorAll

 

위에서 배운 내용 활용해보기

요소 하나 추가하기

들어가며..... 그 동안 늘 "Console"만 보며, 보기힘든 알 수 없는 문자들로 이루어진 "Elements"페이지는 무엇쓰는 것인지 궁금했지만, 찾아볼 정도는 아닌 궁금한 정도.. 오늘에서야 알게 된 사실은 웹페이지를 볼 때, Elements에서는 html코드를, Console에서는 자바스크립트 코드를 볼 수 있다. Console창에서 무언가를 작업하면 Elements창에 있는 html이 변하는 것을 볼 수 있다.

 

tag, id, class만 잘 볼 수 있다면, 이 호랑이 굴에서 빠져나올 수 있다.

 

1. 파악하기 (어디에 무엇이 있는지 구조 알아보기)

Tweet List아래 네 개의 요소가 있다. 그리고 앞으로 이 아래 하나의 요소를 더 추가할 것이다. 먼저 추가시킬 요소가 속할 클래스가 무엇인지 보았다. 이미 존재하는 네 개의 요소들의 클래스는 "tweet"이다. 그리고 이 요소들의 부모노드를 찾아보았더니, id로 "container"를 갖고 있다.

"tweet 클래스의 마지막 요소인 states아래 dev라는 아이를 추가해야한다. tweet클래스 요소들은 id를 container로 하는 부모노드의 자식들이다." 일단 이정도로 1번 클리어!!

 

2. 순서 정하기 (무엇부터 어떻게 할지 정리하기 이게 pseudo code인가봉가?)

A. 기존 4개의 요소들은 각각 <div>안에 있으므로, 먼저 새 요소를 담을 div를 만든다.

B. 이 div안에 담을 내용 넣기. "dev"라고 넣기로 했다.

잠깐! <div>dev</div>가 만들어 졌다면, 여기에 빠진 것은?

C. <div> 안에 class="tweet"이라고 클래스 추가하기.

D. div를 "container"안에 넣어주기. (부모-자식 연결해주기)

 

3. 방법찾기 (좀 더 구체적으로 방법을 제시한다 feat. JS)

A. document.createElement('div') // <div></div> 이건.. 그냥 이렇다.. 이렇게 만드는 것이다.

B. .textContent메소드로 'dev'를 넣을것이다 // div 안에 "문자/텍스트"로 된 "내용"을 넣는다.

C. .classList.add('tweet') // <div>안에 클래스가 들어갈 것이다.

D. .append()로 마지막으로 연결 작업. 연결을 해야 이게 웹 화면에서 보일 것이다.

 

4. DOM으로 마무리

DOM으로 위에서 정리한 내용을 이제 완성시켜줄 것이다. 이 모든건 DOM이 있어야 가능하다. 이 말이 뜬금포 같이 들리신다면 "스크롤 업"해주세요!

이제 위에서 찾은 메소드를 사용할 "대상"이 필요하다. 자바스크립에서 제일 먼저 배운게 "변수"였다. 변수를 만들어 각 메소드를 쓸 것이다.

 

A. document.createElement('div') 변수 하나를 선언+할당

const oneDiv = document.createElement('div'); // <div></div>

B. .textContent 위에서 선언된 변수에 작업

oneDiv.textContent = 'dev'; // <div>dev</div>

C. .classList.add('tweet')

oneDiv.classList.add('tweet');

D. .append() 위에서 요소에 대한 변수를 만들어줬다면, 이번엔 부모노드를 대변하는 변수가 필요했기 때문에 변수를 하나 더 선언했다.

const container = document.querySelector('#container');
container.append(oneDiv);

 

.remove()

--> document.querySelector(".world").remove();

node.remove()