7장 선택자

tag, id, 클래스명, css 선택자 사용

또한 클래스명, css, tag 들은 배열로 저장된다.

id

getElementById 메서드를 Element 단수로 사용하는 데, 다른 메서드들은 Elements 로 복수를 사용함.

var firstTitle = document.getElementById('title');

클래스명

var myList = document.getElementsByClassName('list');

Tag

var paragraphs = document.getElementsByTagName('p'); 

상위 하위 클래스 선택

<div class="container">
	<ul id="list3" class="list">
		<li class="red" name="red">li 1</li>
		<li>li 2</li>
		<li>li 3</li>
		<li>li 4</li>
		<li id="list3_5">li 5</li>
		<li>li 6</li>
	</ul>
</div>

myList2 = document.querySelector('.list .red');

8장 스타일 변경하기

스타일을 변경할 수 있는 2가지 방법이 있다.

• 변수를 사용
• 변수를 사용하지 않고 메서드 사용
  그러면 2가지 방법에는 어떤 차이가 존재할까?
  변수를 사용하며 DOM에서 element를 바로 찾을 수 있어 처리 속도가 빠르다.
  그러나 메서드로만 사용할 경우 DOM의 처음부터 끝까지 element를 찾아야해서 처리 속도가 느리다.
  다시 말해,
• 변수 사용 -> 처리 속도 빠름
• 메서드 그대로 사용 -> 처리 속도 느림(왜냐하면 처음부터 끝까지 찾아야해서)

document.getElementById('title').style.color = 'red'; 

var firstTitle = document.getElementById('title');
firstTitle.style.color = 'red';

배열에 대한 스타일 변경

배열 스타일 변경은

• 배열 요소 중 하나만 변경할 경우

paragraphs[0].style.color = 'red';

• 배열 요소 전체 변경할 경우

for(var i = 0; paragraphs.length;i++){
		paragraphs[i].style.color = 'red';
	}

출처 : Rock's Easyweb 유튜브(https://www.youtube.com/watch?v=Mga3LXPnWdc)