Javascript 1분코딩 (ft.최소 자바스크립트 유목민..그래도 마지막)

https://www.youtube.com/watch?v=Y3_2BLb3hz8

자바스크립트 기초 Part 3: DOM 스크립트

1. DOM(Document Object Model)

• DOM은 문서에 있는 객체(text 들, 이미지, hyperlink 등) 즉 HTML 혹은 CSS Elements 들을 자바스크립트로 조작 하는 것임

• 조작할 element (ID/Class)를 객체로 선택하여 조작함

• 대표적인 DOM 코어 API는

  -getElementById
  -getElementsByTagName
  -getAttribute
  -setAttribute
  혹은
  -querySelector(CSS 선택자)

1.1 getElementById/getElementsByTagName 활용 법

//html code
<h1 id="main-title">DOM (Document Object Model)</h1>
<span>hello 0</span> 
<span>hello 1</span> 
<span>hello 2</span>

//javascript code 
    var title=document.getElementById('main-title');
  	console.log(title);
	var titleSpan = title.getElementsByTagName('span');
	console.log(titleSpan[0]);  
//하면 콘솔 창에 <span>hello</span> 이 출력됨 
	console.log(titleSpan[2]);
//하면 콘솔창에 <span>hello 2</span>

1.2 querySelector 활용 법(ID값)

<h1 id="main-title"> DOM(Document Object Model)</h1>
<small>small</small>
```css 
	 #main-title small { 
	}

	var mainTitle = document.querySelector('#main-title small');
	consoe.log(mailTitle); // 하면 <small>small</small> 출력 됨

1.3 querySelector 활용 법(class 값)

<li class="jojo"><img src="images/jojo.png"></li>
<li class="jojo"><img src="images/jojo.png"></li>
<li class="jojo"><img src="images/jojo.png"></li>

var jojo = document.querySelector(".jojo");
console.log(jojo); // 출력하면 첫번째 줄만 출력됨, 다 불러오고싶다면

var jojo=document.querySelectorAll(".jojo");
console.log(jojo);// 다 불러와짐, 리스트 세개중 두번째만 출력하고 싶다면?

var jojo=document.querySelectorAll(".jojo");
console.log(jojo[1]); //세개 리스트순서대로 0,1,2 중 두번째값 출력 가능 

1.4 javascript 에서 CSS효과 적용하기(이미지에 red border 적용)

• for 문을 사용하여 반복되는 효과를 세 이미지에 다 적용해보기

  var jojo=document.query SelectorAll(".jojo");
  for(var i=0; i < jojo.length; i++) {
  jojo[i].style.border= '1px solid red;
  };

1.5 속성값 Setting 및 얻어오기(getAttrivbute/setAttribute)

• getAttribute 사용
  - return 값이 있는 함수

<li class="jojo">
  <a class="link-google" href="https://google.com">Google</a>

var link=document.querySelector(".jojo a");
console.log(link.getAttribute('href');
//https.//google.com이 출력 됨 

• setAttribute 사용
  - return값이 없는 함수,console창에 출력 불가능(undefined로 뜸)

link.setAttribute ('href', 'https://studiomeal.com');
console.log(link.getAttribute('href'));
//이렇게 하면 https://studiomeal.com이 출력됨

1.5 HTML element 의 class 다루기

• classlist.add/.remove/.contains
• querySelector()에선 css그대로(점포함), classList.add()에선 클래스 이름만(점불필요)

.special {
background: pink;
}

.link-google {
color: red;
}

var link =  document.querySelector('.jojo a'); 
link.classList.add('speical') ; //classlist라는 객체를 사용, add라는 method 사용 이렇게 하면 pink background와 color red 모두 적용됨. 
없앨경우 아래와 같이 remove 사용 가능
link.classList.remove('link-google'); //그럼 default값인 파란색으로 변함
console.log(link.classList.contains('speical');
//true로 출력됨. 

1.6 javascript로 html 코드 더해서 출력하기

• createElement : 새로운 요소 생성(but, 단일사용 만으로 브라우저에 표시 x )
• appendChild :CreatElement와 함께 사용하면서 내용 추가 하는 것.

	var listElem = document.creatElement('li');//list 만들기
	console.log(listElem);
	///이렇게 하면 <li></li>가 출력됨, 그럼 사이에 text를 넣으려면?
	listElem.innerHTML='죠죠';
	console.log(listElem)// 하면<li>죠죠</li>로 스캔됨.이제 이걸 집어넣기


	<ul class="jojo-mom">

	var jojoMom= document.querySelector('.jojo-mom');
	var listElem = document.creatElement('li');
	listElem.innerHTML='죠죠';
	jojoMom.appendChild(listElem);//이렇게 하면 죠죠 리스트가 추가됨