티스토리 뷰

코드스테이츠(SEB_FE_42)

[HTML, JS] DOM

codeyun2 2022. 11. 10. 23:22

자바스크립트로 할 수 있는 일

https://www.youtube.com/watch?v=p5vI5OrLJU8&ab_channel=CodeStates 

- 모바일 앱개발(React)

- 비디오 앱(앱 설치하지 않고 브라우저에서 가능 WebRTC기술 사용)

- 오디오, 신디사이저

- 로봇 및 IOT디바이스 앱(Jonny-Five 라이브러리 이용)

- 챗봇

- 업무자동화(구글 스프레드시트에서 매크로 JS로 작성 가능)

- 웹 크롤링(puppeteer)

- 시각화(뉴욕타임즈/ D3.js 라이브러리)

- 머신러닝(Tensor Flow/ 가볍게 체험 Teachable Machine)

 

HTML에서 JS파일(<script>)을 불러올 때 주의점

웹브라우저는 HTML을 해석할 때 <script>를 만나면 HTML 파싱(해석)을 멈추고

<script>를 먼저 받아(Fetching: 이하F) 실행(Executing) 후 HTML을 마저 파싱함

 

1. <head> 안에 입력

JS파일이 무겁다면(내용이 많다면) HTML이 멈춘 채로 오래 유지될 수 있음(렌더링이 오래 걸릴 수 있음)

 

2. <body> 최하단에 입력

HTML 파싱이 완료된 후 JS파일을 받아서 실행하기 때문에

HTML의 내용이 많다면 JS가 포함된 의미있는 자료를 보는데 오래 걸림

 

3. <head async> async 속성 이용

HTML파싱과 JS 가져오기(F)가 동시에(병렬) 일어나며

JS 가져오기가 완료되면 HTML파싱이 중단, JS 실행- 완료 후 HTML 파싱이 다시 진행됨

다수의 JS를 다운로드(F) 받는 경우 다운로드가 완료되는 순으로 JS를 실행하기 때문에 순서에 의존적인 페이지라면 주의 필요

 

4. <head defer> defer 속성 이용

추천* HTML파싱과 JS 가져오기(F)가 동시에(병렬) 일어나고, HTML파싱이 완료되면 JS가 실행됨

 

 

브라우저의 시작 넷스케이프

내컴퓨터↔모뎀↔웹페이지서버

- 통신비가 비싸고 오래 걸려서

  모뎀을 거치지 않고 브라우저에서 통신이 가능하도록한 JavaScript가 탄생

- JS가 만들어진 후 여러 브라우저가 생겨났으나

  브라우저마다 코드가 호환되지 않아 같은 페이지를 브라우저에 맞게 여러개를 만들어야했음

이에 ECMAScript 규칙을 만듦(Web Build 표준)

DOM(Document Object Model)은 document 객체를 통해 HTML에 접근

BOM(Browser object model)은 window 객체를 통해 브라우저에 접근 

 

 

DOM(Document Object Model)

트리구조. HTML을 Object처럼 조작할 수 있는 모델

웹페이지에서 자바스크립트로 요소를 제어하는데 사용

Node가 API이기 때문에 자바스크립트로 웹페이지를 제어할 수 있음

 

브라우저가 HTML을 파싱(분석)하여 만든 시각적인 자료구조

 

DOM구조 조회 시 console.dir

-> DOM을 객체의 모습으로 출력

 

Element는 요소, Node는 요소+텍스트+주석

 

 

document 매서드 CRUD +APPEND

CREATE(만들기)

: 위치 지정이 안된 상태(트리 연결X)

const 변수이름 = document.createElement('요소 종류')
// 빈 공간(요소를 넣을 그룹) 만들기
document.createDocumentFragment()

 

APPEND(붙이기)

: 트리 연결

document.부모요소.append(변수이름)
// 부모요소의 자식요소로 연결

parentNode.insertBefore(newNode, 참조노드)
// 노드를 부모노드의 자식인 참조노드 앞에 삽입, 참조노드가 없다면 맨뒤에 삽입

element.prepend(노드)
// 노드를 요소의 첫번째 자식으로 삽입
node.appendChild() element.append()
노드 붙이기 노드/ 스트링 붙이기
하나 ,로 구분하여 여러개 붙일 수 있음
추가된 노드 리턴 리턴 값 없음

 

node.appendChild(노드)

: 트리 연결(노드 붙이기)

<div class="a">
    <span></span>
</div>
<div class="b"></div>
const span = document.querySelector(‘span’); 
const divB = document.querySelector(‘.b’); 
divB.appendChild(span);

div.a의 span을 appendChild를 이용해 div.b에 붙이면 복사되는 것이 아닌 이동됨(div.a에서는 없어지고, div.b에 생김)

appendChild의 규칙(자식요소가 기존 노드에 대한 참조인 경우 현재 위치에서 새 위치로 이동한다) 때문인데 규칙이 있는 이유는

- 노드는 두 부모요소를 가질 수 없기 때문에

- 같은 ID를 가진 두 값이 생길 수 있기 때문에

- 하위 트리가 있는 경우 객체 생성 비용이 비싸기 때문에

append inDepthDev

 

READ(조회하기)

const 변수이름 = document.querySelector('셀렉터')
// .클래스 #아이디 요소종류(div 등)가 많이 쓰임
// 셀렉터에 해당하는 요소가 여럿인 경우 첫 번째 하나만 저장됨
var el = document.querySelector("div.user-panel.main input[name=login]");
// user-panel과 main 클래스를 가지고 있는 div요소의 후손 중 name속성이 login인 첫번째 input

const 변수이름 = document.querySelectorAll('셀렉터')
// 셀렉터에 해당하는 요소를 유사배열 객체로 리턴

const 변수이름 = document.getElementById('아이디')
// DOM 조회 메서드 구버전

const 변수이름 = document.getElementsByClassName('클래스')
// 유사배열객체 리턴

Element.children

: 모든 자식 '요소'만 리턴

Node.childNodes

: 모든 자식 요소 리턴(요소+텍스트+주석)

document.element.parentElement 

: element의 부모요소 조회

 

UPDATE(추가/변경)

요소.textContent = '내용' // 문자열 조회/입력

요소.innerHTML = '내용' 
// '<div>hi</div>' 입력하여 태그도 붙일 수 있으나 보안에 취약하여 사용이 권장되지 않음

element.classList = '클래스명' // class 설정
element.classList.add() // class 추가(add)
element.classList.remove() // class 제거(remove)

요소.className = '클래스명' // class생성/변경/조회 // 기존 class 속성 초기화
요소.id = '아이디명' // id생성/변경/조회

 

DELETE(삭제하기)

요소.remove() // 요소 삭제
요소.innerHTML = '' // 요소의 자식 요소 전부 삭제

요소.removeChild(자식요소) // 자식요소 지우기. 제거된 요소(node) 리턴

.innerHTML는 XSS Attack(크로스 사이트 스크립팅 공격: <script>태그를 이용하여 강제로 스크립트를 실행시킴)에 취약하여 사용이 권장되진 않음(보안 문제)

 

// 반복문 이용하여 모든 자식요소 지우기

// 첫번째 자식 요소가 있다면 첫번째 자식요소 지우기 반복
while(요소.firstChild) {
    요소.removeChild(요소.firstChild)
}

// 자식 요소가 있다면 마지막 자식요소 지우기 반복
while (요소.children.length > 1) {
    요소.removeChild(요소.lastChild)
}

 

// 반복문 이용하여 해당하는 클래스 지우기
const tweets = document.querySelectorAll('.tweet')
for (let tweet of tweets){
    tweet.remove()
}

tweets.forEach(function(tweet){
    tweet.remove()
})

 

속성 조회/설정(변경)/삭제

요소.getAttribute() // 현재 속성값 얻기
요소.setAttribute(name,value) // 속성이름, 속성값 설정/변경
요소.removeAttribute(name) // 속성값 삭제

HTMLDataElement.value

: input, textarea 요소에 입력된 값을 조회하거나 변경

 

HTMLElement.offsetTop

: 부모요소 상단부터 현요소 상단까지의 픽셀을 정수로 리턴

 

HTMLElement.offsetWidth

: 요소의 레이아웃 너비를 픽셀(정수)로 리턴

 

이벤트

EventTarget.event = 함수

: EventTarget에 event가 발생하면 함수 실행

  • EventTarget: 요소, document, window 등
  • event: onkeyup(키를 눌렀다 놓았을 때), onkeyDown(키를 눌렀을 때), onkeyPress(ASCII가 입력됐을 때), onclick 등

 

EventTarget.addEventListener(event, 함수)

: EventTarget에 event가 발생하면 함수 실행

  • event: click(클릭), 드래그, 키보드입력, 요소로드 등
  • 함수: 이벤트핸들러evnetHandler라고 함. 실행시키지 말것. 선언만

 

EventTarget.removeEventListener(event, 함수)
: EventTarget의 event가 발생 시 실행되는 함수 제거

 

  이벤트 핸들러 프로퍼티 addEventListener
함수 하나만 실행 여러개 실행 가능
삭제 abort 코드 작성 removeEventListener

이벤트 입문 mdn

 

<template> 요소

: 페이지를 불러올 때 화면에 그려지지 않지만 나중에 사용할 데이터 구조를 담아놓은 컨테이너

// html 파일
<table>
    <tbody>
    </tbody>
</table>

<template id="productrow">
    <tr>
        <td class="record"></td>
        <td></td>
    </tr>
</template>
// JS

// 템플릿 요소가 존재한다면 아래코드 실행
if ('content' in document.createElement('template')) {

    // 기존 HTML tbody 와 템플릿 열로 테이블을 인스턴스화합니다
    var t = document.querySelector('#productrow');

    // 새로운 열을 복제하고 테이블에 삽입합니다
    var tb = document.querySelector("tbody");
    var clone = document.importNode(t.content, true);
    var td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";
    
    tb.appendChild(clone);
}

 

 

 

 

2022.11.10

코스 U1S11 진행중

'코드스테이츠(SEB_FE_42)' 카테고리의 다른 글

[CLI] GIT 사용  (0) 2022.11.14
[DOM] 메서드  (0) 2022.11.11
[JS] TDD, 얕은복사, 깊은복사, shorthand 등  (0) 2022.11.10
[JS] spread/rest, 구조분해할당  (0) 2022.11.08
[JS] 원시 자료형과 참조 자료형, 스코프, 클로저  (0) 2022.11.07
댓글
공지사항