DOM

(Document Object Model)

HTML 엘리먼트 객체 얻어오는 방법

	var a = document.querySelector('.name');

	var b = document.querySelectorAll('.name');
	console.log(b[1]);

두개의 차이는 다가져오느냐 하나만 가져오느냐 인데
querySelectorAll 같은 경우 배열로 생각하면 편하다.

이번에는 클레스에다가 css 를 수정해주자

	var b = document.querySelectorAll('.name');
	b[0].style.border = '1px solid red';
	b[1].style.border = '1px solid red';
	b[2].style.border = '1px solid red';

클레스는 여러개닌깐 이럴 수 있다.
그런데 이렇게 해도 된다. 단.. 이렇게 하는 사람은 없을꺼다

	var b = document.querySelectorAll('.name');
	for(let i = 0; i<b.length; i++){
      b[i].style.border = '1px solid red';
    }

위 와 같이 하는게 더편하지 않을까 싶다

HTML 속성 가져오기

var link =document.querySelector('.name');
console.log(link.getAttribute('class'));

속성 세팅

link.setAttribute('href','https://naver.com');
console.log(link.getAttribute('href'));

class 다루기

	
	.s{
		background: black;
        }

	link.classList.add('s'); //추가
	link.classList.remove('s');//삭제

contains()

contains(); 있는지 없는지 판단하면 bool 형값을 준다.

console.log(link.classList.contains('s));

---

동적으로 생성하기

var elList = document.createElement('li');
elList.innerHTML = '<span>나는 스펜이야!</span>; 
//지금 만들 이친구를 만들기만 했지 붙여넣지 않았다. 
var elPapa =  document.querySelector('.papa'); //부모태그 
elPapa.appendChild(elList);

---

이벤트 사용

.btn{
	font-size: 2rem;
    }

<h1 id='i'>으아아악!</h1>
<button class="btn"> 클릭</button>

	var btn = document.querySelector('.btn');
	var mainTitle = document.querySelector('#i');
	function btnClickHandler()) {
    	mainTitle.style.background ='red';
   	 }
	
	 btn.addEventListener('click', btnClickHandler);
	

이벤트에 대하여 꼭보세여