웹 서비스 다뤄보기 (2) - JavaScript와 DOM

DOM (Document Object Model)

• 문서 객체 모델 : 트리 형태의 프로그래밍 도구 (위>아래로 노드 쌓임)
• HTML, XML을 프로그래밍적으로 다루기 위한 도구 (웹 페이지 문서를 표현, 저장, 조작함)
• 문서의 논리적 구조, 문서가 접근되고 조작되는 법을 정의
• 구조화된 노드(태그)와 속성, 기능(JS 함수)을 가진 객체로 표현

 

 

JS (JavaScript)

웹 페이지를 위한 프로그래밍 언어 (JIT 컴파일 PL)

DOM으로 HTML을 웹이 애플리케이션처럼 동작하는데 도움을 줌

비 브라우저 환경에서도 사용 (Node.js)

 

자바스크립트로 DOM 선택하기

• document.querySelector('선택자') : 선택자의 정보를 통해 요소를 집어내는 함수
• document.createElement('html요소') : 자바스크립트로 HTML 요소를 만드는 함수
• document.body.appendChild() : body 요소 내부에 새로운 요소를 넣는 함수

var element=
document.querySelector('Head');
console.log(element.nodeName); //Head

<script> //HTML 요소를 불러온 뒤에 아래 함수 실행됨
    window.onload=function(){ //h1 태그 가진 html 요소 생성
    var heading=document.createElement('h1')
    heading.innerText='Hello, world'
    document.body.appendChild(heading)
    }
</script>

 

 

---

Reference

실용적인 웹 프로그래밍 - 인프런 | 학습 페이지