웹 브라우저에서 전체 화면을 Window라고 해요, 객체이죠. 객체에요. 그 안에는 DOM, BOM, Element 등 이 있어요. 그리고 우리가 알아야 할 부분은 DOM
즉, document
에요.
HTML
은 정적인 아이에요. 그 아이를 동적으로 만들어주려면 JavaScript
가 필요하죠. 그러면 이 친구들을 연결해 주려면 어떻게 할까요? JavaScript
가 HTML
에 접근해야 합니다. 그것을 도와주는게 querySelector
에요.
위코드는 제가 작성한 HTML
코드에요 그리고 아래 코드는 JavaScript
로 만든 코드이지요.
JavaScript
를 작성하지 않으면, 아마 화면에는 Hello World
만 나타날거에요. 여기에 저는 Nice to meet you
를 추가 하고 싶어요. 이럴 때 어떻게 하는지 보면, introduceBox
를 변수 선언해주어요. 근데, document.querySelector
를 사용한게 보일 거에요. 그리고 그 안에는 '.introduceBox'
가 보일거에요. 이 것은HTML
에 있는 class="introduceBox"
에 접근 하겠다는 의미에요. 그리고 아래 코드는 span
이라는 태그
를 만들어주겠다는 거에요. 만들어놓은 span
이라는 변수
, 즉 태그
에 setAttribute
를 통해서 class
라는 속성을 부여하고 class
이름을 title
이라고 하겠다는 의미에요.
자 그러면 이제 저는 <span class="title"></span>
까지 만들었어요. 그러면 이제 여기에 내용을 넣어볼게요. 이 때 사용하는 것이 textContent
입니다. 최종적으로 <span class="title">Nice to meet you</span>
를 만들었어요. 그러면 이제, 화면에 나타날 수 있도록 보여주어야 되겠죠. 이 때 사용하는 것이 appendChild
랍니다. introduceBox
에 span
을 추가해주면, Hello Wordl Nice to meet you
가 추가된 것을 확인 할 수 있을 거에요.
이 기능은 앞으로 댓글추가기능
같은 것을 만들 때 사용하게 될 거에요. 흐름에 따라서 조금씩 생각을 해보면, 어렵지 않게 하실 수 있답니다.
JavaScript
를 처음 공부할 때는 책으로 공부를 했는데, 위에 부분을 잘 이해를 못했답니다. 하지만 코드의 흐름
을 잘 생각해 보고 하면 쉽게 이해할 수 있답니다. HTML에 있는 내가 원하는 태그에 접근을 해서 그 안에 내가 원하는 태그를 만들어주고, 속성을 부여해서 CSS 요소를 추가한 다음에, 내가 원하는 문구를 넣고 마지막으로 넣고 싶은 곳에 넣어준다.
흐름을 갖고 코드를 작성해 보세요~