[TIL] Dom

따봉도치 개발자·2023년 3월 7일

자식요소 속성 찾기!!

아래 html에 의 자식요소를 찾아보자.
body의 자식요소는 id가 nav,new-contents,foote 총 3개이다. 자바스크립트에서 DOM은 document 객체에 구현되어있다. 브라우저에서 작동되는지 확인 하려면 자바스크립트 코드에서 document 객체를 조회가 가능하다.(DOM구조에서 조회할 때는 console.dir가 객체 모습을 출력하기 때문에 console.log보다 유용하다.)
let 변수명 = document.body.children[1]
console.dir(변수명)
> div#news-contents (아래 첫번째 body의 자식요소가 불러온다.)

<html>
  <body>
    <div id="nav">
      <div class="logo"></div>
      <div class="menu-wrapper">
        <div class="menu"></div>
        <div class="menu"></div>
        <div class="menu"></div>
        <div class="profile-photo"></div>
      </div>
    </div>
    <div id="news-contents">
      <div class="news-content-wrapper">
        <div class="news-picture"></div>
        <div class="news-title"></div>
        <div class="news-description"></div>
      </div>
    </div>
    <div id="footer"></div>
    <script src="dom.js"></script>
  </body>
</html>

부모요소 속성 찾기!!

단순하게...변수에 document.body.parents를 넣고 콘솔을 찍었는데....안되네?
아래를 보면 아까 자식요소(newsContents)를 찾을 때 넣은 변수를 활용해서 let parent = newsContents.parentElement를 넣고 콘솔을 찍으니 됐다. 부모요소 찾는 방법은 여러가지가 있었다. 아래와 같이 쿼리 셀렉터를 이용해서 넣어주는 방법도 있다.

1. Create - Document 객체에 요소 만들기

document객체에 createElement 메서드를 이용해서 div 요소를 만드는 방법
document.createElement('div')

객체에 요소를 만들면 아래 사진처럼 생성된다. 연결을 시켜줘야 하는데 그건 밑에서 append를 사용해서 연결하는 방법을 알아보자!

3. Append

Create에서 생성한 tweetDiv를 트리 구조와 연결해보자. Create에서 생성한 div요소를 변수에 넣어보자!
const tweetDiv = document.createElement('div')
tweetDiv는 아직 "공중부양" 중이므로 append 메서드를 사용해서 변수 tweetDiv를 body에 넣어 보자. document.body.append(tweetDiv)
콘솔창에 아무것도 안보이겠지만 내용이 없을 뿐..개발자도구에서 elements를 눌러보면 들어있다!

위와 같이 콘솔창에 입력했을 때 엘리먼트 요소에 회색 배경의 텍스트가 아래 사진 처럼 트리 구조에 연결되어 있는 것을 볼 수 있다.

3. Read - HTML Element 조회하기!

DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(selector)를 전달하여 확인할 수 있다. 셀렉터로는 HTML 요소("div"), id("#변수명"), class(.변수명) 세 가지가 가장 많이 사용한다.

- querySelector 사용방법

querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.

const oneTweet = document.querySelector('.tweet')

자 이제 본격적으로 Create에서 생성한 div요소를 container에 넣어 보자!

아래 <div></div>라는 결과물을 확인 할 수 있다!

tweetDiv를 container의 마지막 자식 요소로 추가한 모습

4. Update

위에서 create,append,read를 통해 DOM 객체를
만들고, 객체를 붙이고 객체를 선택해서 조회하는 걸 했다. 이제는 위에서 만든 비어있는 div 태그를 업데이트해서 다양한 작업을 할 수 있게 만들어보자!

const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>
// oneDiv안에 <div>요소를 만들었다.

oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
// textContent로 문자열 dev를 입력하고

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
// css 스타일링을 적요하기 위해 class를 추가했다. 
// class를 추가하려면 classList라고 선언 해야 하나보다...

const container = document.querySelector('#container')
container.append(oneDiv)
// 택스트와 클래스를 추가해서 스타일링을 적용했다. 
// 이제 마지막으로 append를 이용해 container의 자식 요소로 추가하자!