한주가 아주 빠르게 지나갔다. 어떻게든 주어진 문제를 해결했고 그답이 왜나왔는지 말 할 수 있었다.
코드를 보고 왜저렇게 동작하는지도 알게됬다.. 그러나!!
뭔가 모를 찝찝함이 같이 따라왔다 이해는한거같은데 뭔가 부족한...그래서 다시한번 개념정리를 해보기로 했다.
Node?, Element?
구글링을 하다보니 node와 element의 차이가 무엇인지에 대한 글들이 많이 있었다. 그중 위의 도식도가 가장 직관적이게 그차이를 보여준다고 생각한다.
1. Node는 DOM API(Documnet Object Model-Appication Programming Interface)상에 전부를 말한다.
2. element는 Node 하위 특정 타입중의 하나이다. 그중 HTML의 tag들은 HTMLElement의 자식이기 때문에 HTMLElement의 속성을 가지고 있다. 또한 각 태그마다의 속성을 가지고 있다.
** 3. Node는 문서의 실시간 상태가 반영되기때문에 순간순간 요소를 변화시켜 동적인 문서를 구현 할 수 있다.
특정 버튼 클릭시 이벤트 구현
미션! 버튼 클릭시 특정 스타일이 적용되도록한다!
<!-- html -->
<body>
<button class="button">Push!!</button>
</body>해당 버튼이 클릭되었을때 javascript를 이용해 class가 추가 되도록 한다.
//javascript
const button = document.querySelector('.button'); // html <button> 접근할 변수를 선언한다.
const buttonClassList = button.classList; // <button>의 classList에 접근할 변수를 선언한다.
//DOM을 확인해보면 button의 하위 항목에 classList가 있고, 내부에는 해당 class가 object형태의 속성으로 나와있음을 확인 할 수 있다.
button.onclick = push; // 버튼이 클릭되었을때 push 함수가 실행되도록 했다.
// onclick은 해당 요소를 클릭했을때 이벤트를 발생시킨다.
//동작할 함수를 만들었다.
function push() { //함수선언식
if (buttonClassList[1] === undefined) { // button의 classList는 Object이고 key값은 인덱스 형태로 되어있다.
//key값 1이 아무것도 없다면 true, 있다면 false를 반환하도록 했다.
buttonClassList.add('pushed'); //class에 'pushed'를 추가한다
} else {
buttonClassList.remove('pushed'); //class에 'pushed'를 제거한다
}
}css는 class별 다음의 속성을 추가하였다.
.button {
font-weight: 700;
background-color: white;
width: 100px;
height: 50px;
border: 3px solid green;
transition: 0.1s;
}
.pushed {
background-color: greenyellow;
border: 3px solid green;
box-shadow: 0 0 3px 1px green;
}위와 같이 특정 조건에서 동적으로 변하는 버튼을 구현하였다.
!!!! 코드를 구현하던 도중 위의 push 함수를 함수 표현식을 이용하여 만들게되면 정상적으로 동작하지 않는다.
이유는 함수 선언식은 호이스팅에 javascript의 최상단에 있는것처럼 사용되지만, 함수 표현식은 변수의 선언과 마찬가지로 순서대로 동작하기 때문에button.onclick = push이전에 함수표현식이 있어야 동작할 수 있다.!!
간과하고 있었던 개념인데 실습을 통해 개념 재확립의 기회가 됬다.
원하는 위치에 js를 이용하여 html tag 구현또는 내용추가
목표! 버튼을 클릭해서 인풋창의 내용을 list에 추가시킨다.
우선 아래의 구조를 만든다
<!-- html -->
<body>
<section>
<input type="text" class="submitText" />
<input type="submit" value="submit" class="submit" />
</section>
<ol class="list">
make child
<li>origin</li>
</ol>
</body>
이 상태에서 input창에 내용을 넣고 submit을 누르면 2.내용으로 추가되도록 만든다!
//javascript
const list = document.querySelector('.list'); //<ol> tag내부에 list를 추가하기 위해 선택자생성.
const newList = document.createElement('li'); //새로운 <li> tag 생성 변수 생성.
const submitText = document.querySelector('.submitText'); //input창에 접근하기위한 선택자생성.
const submit = document.querySelector('.submit'); //submit 클릭시 이벤트 실행을 위해 submit에 접근자 생성
submit.onclick = set; //summit click시 set 함수 실행.
function set() {
newList.textContent = `${submitText.value}`; //input창에 입력된 값에 접근하여 그 내용을 생성된 list에 추가
// newList.classList.add('ok'); class 추가방법 1
newList.setAttribute('class', 'ok'); //class 추가방법 2
list.append(newList);// 내용과 class가 추가된 새로운 <li></li>를 <ol> 내부에 생성한다.
submitText.value = ''; //생성 후 input창은 지워준다.
}input창에 내용을입력한다.
submit을 클릭하면 내용이 추가되고 input창의 내용이 없어진다.
그리고 내용을또 추가하려고 했는데.. 2. 내용이 새로 덮어씌어지고 추가되지않는문제가 발생했다!!
코드를 수정해본결과 문제의 원인을 찾아낼 수 있었다. 새로운 newList가 함수 외부에 위치하기 때문에 그값만 봐끼게되는 것이었다.!! 해결방법은 함수가 실행될때마다 newList도 다시 실행되도록 함수안으로 이동시켰더니 정상적으로 추가되는것을 확인했다!!
function set() {
const newList = document.createElement('li'); // <<<<<<<<해결!!
newList.textContent = `${submitText.value}`;
// newList.classList.add('ok');
newList.setAttribute('class', 'ok');
list.append(newList);
submitText.value = '';
}
내일은 삭제 버튼을 반들어 볼 예정이다. 기타 개념들도 정리해야되는데 시간이 너무 빠르다.
