Js 태그 관련 정리(part1)

공부내용

1. createElement()
2. append()
3. classList
4. setAttribute
5. removeAttribute
6. event.target
7. event.target.closest()
8. parentNode
9. childNodes
10. style (CSS)

---

1. createElement()

원하는 element를 만들어주는 역할

let ul = document.createElement('ul')
console.log(ul); //<ul></ul>

---

2. append()

필요한 부분을 붙이는 역할

ex)
A.append(B) //A와 B는 태그 or document.body

1. ul에 li태그 붙이기

    let ul = document.createElement('ul');
    let li = document.createElement('li');
    ul.append(li);
    console.log(ul);		//<ul><li></li></ul>

2. ul에 li태그 붙인 것을 html에 보이게 만들기

    let ul = document.createElement('ul');
    let li = document.createElement('li');
    ul.append(li);
	document.body.append(ul);

---

3.classList

Dom에 class 속성을 부여하거나 삭제등을 담당

1. classList.add()

    let ul = document.createElement('ul');
    let li = document.createElement('li');
    ul.append(li);

    ul.classList.add('ul-add');
    console.log(ul);		//<ul class="ul-add"><li></li></ul>

2. classList.remove()

    let ul = document.createElement('ul');
    let li = document.createElement('li');
    ul.append(li);

    ul.classList.add('ul-add');
    console.log(ul);		//<ul class=""><li></li></ul>
    ul.classList.remove('ul-add');
    console.log(ul);		//<ul class=""><li></li></ul>

위의 내용은 둘다 class가 없게 나오는데 이는 콘솔에 출력하는 시간보다 console.log 출력보다 아래 코드인 remove가 먼저 진행되기 때문에 둘다 결과가 같다.

let ul = document.createElement('ul');
    let li = document.createElement('li');
    ul.append(li);

    ul.classList.add('ul-add');
    console.log(ul);         //<ul class="ul-add"><li></li></ul>

    setTimeout(function(){
     ul.classList.remove('ul-add');
     console.log(ul);        //<ul class=""><li></li></ul>
    },1000)     

이와 같이 add를 확인하려면 setTimeout을 적용해보아도 된다.

---

4. setAttribute()

속성값을 필요대로 추가하는 것 (다양하게 적용되는 듯)
사용법 : Dom.setAttribute('속성', '속성값')

    let ul = document.createElement('ul');
    let li = document.createElement('li');
    ul.append(li);

    ul.setAttribute('class','ul-add');
    li.setAttribute('value',100);

    console.log(ul);	//<ul class="ul-add"><li value="100"></li></ul>

---

5. removeAttribute()

속성값을 필요대로 삭제하는 것
사용법 : Dom.removeAttribute('속성')

    let ul = document.createElement('ul');
    let li = document.createElement('li');
    ul.append(li);

    ul.setAttribute('class','ul-add');  
    li.setAttribute('value',100);

    ul.removeAttribute('class');
    console.log(ul);		//<ul><li value="100"></li></ul>

class속성이 사라진 것을 볼 수 있다.