[JS/브라우저] DOM

15924 단어 browserDOM코드스테이츠javascirptDOM

DOM이란?

  • Document Object Model의 약자
  • HTML요소를 Object(JavaScript Object)처럼 조작(Manipulation)할수 있는 Model이다.

HTML에 JavaScript 적용하기

  • HTML에 JavaScript를 적용하기 위해서는 <script>태그를 이용한다.
<script src ='myScriptFile.js'></script>
// HTML 파일과 같은 디렉토리에 존재하는 myScriptFile.js를 불러온다.
  • 웹 브라우저가 작성된 코드를 해석하는 과정에서 <script>요소를 만나면, 웹 브라우저는 <scirpt> 요소를 먼저 실행한다.
    (<script>요소는 등장과 함께 실행된다)

<script>태그 추가하는 방법 2가지

1.<head>안쪽에 <script>추가하기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!-- script 요소 삽입 위치 -->
      <script src="myScriptFile.js"></scirpt>
      </head>
    <body>
    </body>
 </html>

2.<body> 내의 최하단에 <script>추가하기

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8" />
   <title>Document</title>
     </head>
   <body>
     <!-- script 요소 삽입 위치 -->
     <script src="myScirptFile.js"></script>
   </body>
</html>

☑️ <script>의 좋은 위치

  • HTML 태그들 사이에 script 태그가 위치하면 발생하는 2가지 문제
    1.HTML을 읽는 과정에서 스크립트를 만나면 중단 시점이 생기고 그만큼 Display에 표시되는 것이 지연된다.
    2.DOM 트리가 생성되기전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있다.

위와 같은 상황을 막기 위해 script 태그는 body 태그 최하단에 위치하는 게 좋다.

🔍자식 엘리먼트 찾기

  • 자바스크립트에서 DOM은 document객체에 구현되어 있다.
    브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document객체를 조회할 수 있다.

Q. body 엘리먼트의 자식 엘리먼트(element)는 총 몇 개인가?

바로 조회

document.body.children

console.log로 조회

console.log(document.body)

console.dir로 조회

console.dir(document.body)

  • DOM구조를 조회할 때에는 console.dir이 유용하다
  • console.dir은 console.log와 달리 DOM을 객체의 모습으로 출력한다.

🔍부모 엘리먼트 찾기

Q. class의 이름이 new-contents 인 div 엘리먼트의 부모 엘리먼트는 무언인가요?

  • body의 첫 번째 자식 요소가 new-contents인지 알 수 있다.
  • 반대로, new-contents의 부모 요소는 body인 것을 알 수 있다.

body 엘리먼트의 자식요소를 변수에 할당

  • new-content 요소를 이용하기 위해 매번 document.body로부터 요소를 찾아가는 일은 번거로우므로 변수 선언을 통해 정보를 저장해두면 주소를 참조하므로 편리하게 접근이 가능하다.

☑️parentNode와 parentElement 차이

  • parentElement 프로퍼티는 부모요소 '요소 노드'를 반환하는 반면, parentNode 프로퍼티는 '종류의 상관없이 부모 노드'를 반환한다.
  • 즉 node가 element가 아니라면 parentElement은 null을 반환하지만, parentNode는 해당 Node를 반환한다.
  • 따라서, Node 타입의 반환이 필요한 경우라면 parentNode를 사용하고 element만 필요한 경우라면 parentNode를 사용할 필요가 없다.

DOM으로 HTML 조작하기

CREATE

  • DOM으로 새로운 element만들기

createElement

  • document 객체의 createElement 메소드를 이용하여 div element를 만든다.
    document.createElement('div')

  • DOM을 조작하기 위해서 변수를 선언하고 작업의 결과를 변수에 할당한다.

    화면에 어떤 변화도 나타나지 않는다. 그 이유는?

  • createElement 메소드로 새성된 엘리먼트는 공중에 떠있는 상태이다.

  • 공중에 더 있는 엘리먼트를 확인하기 위해서는 APPEND를 해야한다

APPEND

append

  • append메소드를 사용해서, 변수 tweetDiv를 body에 넣기
    document.body.append(tweetDiv)

  • append 메소드를 이용하여 container의 자식요소로 tweetDiv 추가

    const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')

container.append(tweetDiv)

READ

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

querySelector

- class 이름이 tweet인 HTML 엘리먼트중 첫 번째 엘리먼트를 조회할 수 있도록, oneTweet변수 선언 및 할당

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

querySelectorAll

  • 여러 개의 엘리먼트를 한 번에 가져오기 위해서, querySelectorAll을 사용
  • 조회한 HTML 엘리먼트들은 배열처럼 for문을 사용할 수 있다.
  • 주의할 점은 앞서 조회한 HTML 엘리먼트는 배열이 아니다!
    이런 '배열 아닌 배열'을 유사 배열, 배열형 객체등 다양한 이름으로 불리며,
    정식 명칭은 Array-like Object이다.

-querySelectorAll로 클래스 이름이 tweet인 모든 HTML 엘리먼트를 유사 배열로 받아올 수 있도록 tweet 변수 선언 및 할당

const tweets = document.querySelectorAll('.tweet')

☑️getElementByID

  • querySelector와 비슷한 역할을 하는 오래된 방식

  • 만약 이번 버전의 브라우저(인터넷 익스플로러) 호환성을 신경 써야한다면, 이런 옛날 방식을 사용해야 할 수도 있다.

    const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')

console.log(getOneTweet === queryOneTweet) // true

UPDATE

textContent

  • 비어있는 엘리먼트에 문자열인 내용을 입력

-textContent 메소드를 이용하여 비어있는 oneDiv에 dev이라는 내용 입력하기

classList.add

  • CSS 스타일링이 적용될 수 있도록, div엘리먼트에 class를 추가한다.

-classList.add 메소드를 이용해 tweet 클래스를 추가하기

append

  • 생성한 엘리먼트에 텍스트를 채웠고, 클래스를 추가하여 스타일링을 적용했다.
  • append를 이용해 container의 자식 요소로 추가한다.

☑️다른 attribute 추가하기

  • setattribute 메소드 이용

DELETE

remove

  • 삭제하려는 엘리먼트의 위치를 알고 있는 경우에 사용하는 방법

-id가 container인 엘리먼트 아래에 tweetDiv를 추가하고, remove로 삭제한다.

removeChild

  • 자식의 엘리먼트를 지정해서 삭제하는 메소드
  • 모든 자식 엘리먼트를 삭제하기 위해서는 반복문을 활용할 수 있다.

-자식의 엘리먼트가 남아있지 않을 때까지, 첫 번째 자식 엘리먼트를 반복적으로 삭제

const container = document.quertSeletor('#container');
while (container.firstChild) {
 container.removeChild(container.firstChild);
}

-container의 자식 엘리먼트가 1개만 남을 때까지, 마지막 자식 엘리먼트를 삭제

 const container = document.querySeletor('#container');
 while (container.children.length > 1) {
  container.removeChild(container.lashChild);

-직접 class 이름이 tweet인 엘리먼트만 찾아서 삭제

const tweet = document.querySeletorAll('.tweet')
tweet.forEach(function(tweet){
 tweet.remove();
})
// or
const tweet = document.querySeletorAll('.tweet')

for (let tweet of tweet){
 tweet.remove()
}

innerHTML

  • innerHTML을 이용하면 간편하고 편리한 방식이지만, 보안에서 몇 가지 문제를 가지고 있기대문에 사용을 지양한다.

-innerHTML을 이용하면, 모든 자식 엘리먼트를 지울 수 있다.

doucment.querySeletor('#container').innerHTML = '';
[JSInfo] 코드 품질 향상을 위한 주석
이벤트 버블링, 캡처링, 위임

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage