Javascript 에서 html을 사용할 때
<script>
function hello() {
console.log('Hello');
}
hello();
</script><script src="hello.js"></script>첫 번째 코드와 두 번째 코드를 사용할 수 있습니다.
일반 적으로는 두 번째 방법을 많이 사용합니다. 재사용성 면에서 유리하고 코드가 길어지지 않기 때문입니다.
주의할 점으로는 script 태그를 가진 요소는 실제로 html에서 사용되는 태그보다 밑에 있어야합니다.
그래야 적용하려는 태그를 바꿔줄 수 있기 때문입니다.
<button onclick="hello()">click</button>
<script src="./hello.js"></script>
위와 같은 예시가 있습니다.
DOM
DOM이란 html 과 javascript를 연결하는데 있어서 필수 적인 개념입니다.
DOM은 Document Object Model이라는 말의 약어이며, 단순히 텍스트로 작성된 html 파일을 트리 형태로 표현한 객체를 말합니다.
DOM을 통해서 javascript와 html 파일이 연결되고, document의 객체는 DOM 트리의 최상단에 있는 객체에 접근하게 해줍니다.
DOM 사용
document.getElementById('header').innerHTML = "TITLE";
document.getElementsByTagName('div');javascript의 document 객체에 접근하여 사용할 수 있습니다.
위의 document 객체의 메소드 말고도 다양한 메소드 들이 있습니다.
태크, id, 클래스, name, 선택자 등 필요에 따라 사용할 수 있습니다.
