내 맘은 DOM도롬 DOMDOM
<html>
을 document object
라는 변수로 담아둔다이런 식으로 document object를 쓰는 형태라서 Document Object Model, 줄여서 DOM이라고 한다.
DOM 개념 설명 출처:
코딩애플 JS/JQuery 강의 내용 中 일부
https://nonipc.com/entry/DOM%EC%9D%B4%EB%9E%80
DOM 그림 출처: http://bioub.github.io/dom-visualizer/
(예시를 좀 더 크게 보고 싶거나 또는 나만의 html코드를 입력해보고 싶다면 출처 사이트 방문 추천)
그냥 html 파일은 정적인 코드이기 때문에 사용자와 상호작용이 어려움
(쉽게 생각하면 버튼 누르면 뿅!하고 알림창 뜨게 하는 거 html만으로는 안된다라는 뜻)
근데 정적이면 웹사이트가 재미가 없고 사용자가 별로 쓰고 싶지 않겠쥬?
설명 출처: https://nonipc.com/entry/DOM%EC%9D%B4%EB%9E%80
따라서 <script>
에서 조작할 html 태그가 <script>
보다 아래에 있는 경우 오류가 난다.
(오류 방지하려면 body 태그 끝나기 직전에 <script>
적는게 좋음)
<!--오류가 나는 예시-->
<body>
<script>
document.querySelector('.example').innerHTML = 'Hello';
</script>
<div class="example">안녕</div>
</body>
<p class="info"></p>
attribute = class
attribute.value = "info:
<body>
<p class="info" id="list"></p>
<script>
document.getElementsById("list").innerHTML = "coffee";
</script>
<body>
getElementById("list")
는 메서드(Method), innerHTML
는 속성(property)이다.
출처
http://jun.hansung.ac.kr/cwp/Javascript/JavaScript%20HTML%20DOM%20Methods.html
https://blog.jeongwoo.in/html-attribute%EC%99%80-property-%EC%9D%98-%EC%B0%A8%EC%9D%B4-d3c172cebc41