JS 01 Intro

Seungju Hwang·2020년 12월 19일

JavaScript TIL

JavaScript

목록 보기

1/13

Intro

JavaScript의 개념과 이를 활용하여 간단한 DOM 조작을 알아봐요.

🔵 개념

파편화와 표준화의 역사

화면을 동적으로 만들고 싶어서 JavaScript를 사용.
그러나 브라우저 전쟁의 결과로 크로스 브라우징 이슈 발생
표준화가 필요해짐
node JS, jquery 등 다양한 JS의 발전
순수한 vanilla JS 이용합시다!

JavaScript로 할 수 있는 것!

DOM (document Object Model) 조작
BOM (Browser Object Model ) 조작
ECMAScript

DOM?

HTML, XML 등과 같은 문서를 다루기 위한 독립적인 문서 모델 인터페이스

모든 문서의 노드는 DOM Tree라고 불리는 트리 구조를 가진다.
window, document와 같은 객체들이 존재하는데, window는 브라우저의 최상위 객체를 의미하며 생략가능하다.

🔵 DOM 조작

문서 모델을 객체를 통해 조작

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic DOM Manipulation</title>
  <style>
    #king {
      color: red;
    }
  </style>
</head>
<body>
  <h1 id="header">DOM Manipulation</h1>
  <h2 id="langHeader">Programming Languages</h2>
  <ul>
    <li class="lang">Python</li>
    <li class="lang">Java</li>
    <li class="lang" id="specialLang">JavaScript</li>
  </ul>

  <h2 id="frameHeader">Frameworks</h2>
  <ul>
    <li class="framework" id="specialFrame">Django</li>
    <li class="framework">Spring</li>
    <li class="framework">Vue.js</li>
  </ul>
</body>
</html>

선택

단일노드
document.getElementById(id) : id만 활용하여 선택할 수 있다. (querySelector에 비해 유연성이 떨어진다.)
```
const mainHeader = document.querySelector('h1')
const langHeader= document.querySelector('#langHeader')  // 아이디로 가져오려면 #
const frameHeader= document.querySelector('.frameHeader')
```
document.querySelector(selector) : id, class, tag, 복합 선택자(자손, 자식 선택자) 등을 모두 활용하여 선택할 수 있다.
```
const langLis = document.querySelectorAll('.lang') 
```

여러 요소

HTMLCollection (LIVE : 실시간으로 변함)
document.getElementsByTagName(tagName),document.getElementsByClassName(class)

const selectSepcialLang = document.getElementById('specialLang')
const selectAllLangs = document.getElementsByClassName('framework')
const selectAllLiTags = document.getElementsByTagName('li')

NodeList (non-live)
document.querySelectorAll(selector)
```
const langLi = document.querySelectorAll('.lang')
```

변경, 조작

Delete

// removeChild
ul.removeChild(li1)
ul.removeChild(li2)

//remove
ul.remove()
body.remove()

Elemnet Styling

li1.style.cursor = 'pointer'
li2.style.color = 'blue'
li3.style.background = 'red'

// setAttribute
li3.setAttribute('id','king')

// getAttribute
const getAttr = li1.getAttribute('style')
const getAttr2 = li3.getAttribute('style')

Seungju Hwang

기록하는 습관은 쉽게 무너지지 않아요.

다음 포스트