HTML에 JS 적용하기
<script>가 <head> 안쪽에 삽입하는 경우
: 웹 브라우저는 <script>를 만나면 HTML 해석을 멈추고 <script>를 먼저 실행한다 그로 인해 웹 사이트를 보는데까지 많은 시간이 소요된다.
<script>가 <body> 끝에 삽입 하는 경우
: 웹 브라우저는 HTML를 먼저 모두 읽은 다음 <script>를 실행하기 때문에 웹 사이트를 빨리 볼 수 있다. 하지만 HTML 코드가 JS에 의존적인 웹사이트라면 사용자가 의미 없는 화면을 볼 수 있어, 의미있는 화면을 보기까지에는 똑같이 오랜 시간이 걸릴 수 있다.
<head> 안에 defer 속성 추가
: defer 속성을 넣게 될 경우 웹 브라우저는 HTML 파싱과 JS를 병렬로 실행 하기 때문에 가장 추천하는 <script> 태그 방법이다.
console.dir
: console.dir()를 사용하게 되면 HTML의 객체의 모습을 볼 수 있다.
ex) console.dir(document.body) --> 웹 사이트의
<body>태그에 속해 있는 엘리먼트들이 객체로 나타내준다.
이로 인해 자식 요소를 찾을 때도 사용할 수 있다.
document.body.children -->
<body>의 자식 요소들을 객체로 나타내준다.
DOM (Document Object Model)
HTML 요소를 Object처럼 조작할 수 있는 모델이다.
즉, JS를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다.
CREATE
const '변수명' = documnet.createElement('요소')
'변수명'에 '요소'라는 엘리먼트를 생성해 할당함
만약 'div'를 했다면 'div'라는 요소가 생성됨
APPEND
document.'부모요소'.append('변수명')
위에 생성된 변수는 어느 곳에 정착하지 못해 공중에 붕 뜬 상태라 보이지 않는다.
그래서 append를 사용해 부모요소로 집어 넣어준다.
READ
cocnst '변수명' = document.querySelector('요소')
querySelector 는 특정 요소를 조회한다.
id = #'이름' , class= .'이름'
UPDATE
element.setAttribute('속성', '값')
setAttribute로 엘리먼트의 속성과 값을 바꾸어 줄 수 있다.
DELETE
'변수명'.remove()
append 했던 변수를 삭제할 수 있다.
document.querySelector('요소').innerHTML = ' ';
innerHTML을 사용하면 모든 자식요소를 삭제 할 수 있다.
편리한 방식이지만 innerHTML은 보안에서 몇 가지 문제를 가지고 있어 추천하지는 않는 방법이다.
innerHTML의 문제
: 크로스 사이트 스크립팅(Cross-site scripting aka XSS) 관리자가 아닌 사람이 웹페이지에 악성 스크립트를 삽입하는 공격 방식을 의미한다. 즉 innerHTML 속성은 문자열 자체를 수정할 수 있기 때문에 <script> 태그를 사용해 JS코드를 작성한 뒤 실행되도록 만들 수 있다.
