0:00:01.287,0:00:07.387
저는 'All about dogs'라는 멋진 웹페이지를 가지고 있어요

0:00:07.387,0:00:12.583
물론 모든 사람들이 그러지는 않겠지만,[br]저는 고양이를 더 좋아하고

0:00:12.583,0:00:17.178
이 페이지를 'All about cats"로 바꾸고 싶어요

0:00:17.178,0:00:23.267
단순히 HTML을 고치는 대신에[br]JavaScript를 사용해보도록 하죠

0:00:23.267,0:00:26.431
이 방식을 사용하여[br]이 페이지를 고양이에 대한 것으로

0:00:26.431,0:00:32.096
바꾸어주는 브라우저 확장프로그램으로[br]변환할 수 있습니다

0:00:32.096,0:00:37.450
고양이에 대한 페이지이라니 놀랍지 않나요?

0:00:37.450,0:00:44.761
이 웹페이지는 머리글(heading), 본문(paragraph) [br]그리고 사진을 몇개로 이루어져있습니다

0:00:44.761,0:00:50.340
이제부터 배울 두 단계를 사용하면[br]머리글 부터 시작하여

0:00:50.340,0:00:53.909
각 부분별로 각각 바꾸어 볼 수 있을 것입니다.

0:00:53.909,0:00:59.268
첫번째 단계는 머리글에 포함되어 있는[br]DOM node를 찾는 것입니다

0:00:59.268,0:01:06.895
document.body전에 있는 DOM node를 찾는 방법이죠

0:01:06.895,0:01:12.492
하지만 저는 보다 특별한 무언가를 원해요[br]이 h1처럼 말이죠

0:01:12.492,0:01:14.700
그러니까 이 h1 은 ID를 가지고 있습니다

0:01:14.700,0:01:19.743
이것은 이 페이지에서 오직 [br]이 태그값을 나타내는 ID를 의미하고

0:01:19.743,0:01:24.980
그리고 찾고자 하는 DOM 노드가[br]ID를 가지고 있으면 찾는것은 매우 쉽습니다

0:01:24.980,0:01:30.342
'getElementById'라는 [br]document object의 메서드를 사용하면됩니다

0:01:30.342,0:01:33.198
태그 안에 바로 여기에서

0:01:33.198,0:01:38.527
`var headingEl` 를 입력하여 [br]값을 저장할 변수를 만드는 것부터 시작해보죠

0:01:38.527,0:01:42.299
보통 저는 변수의 마지막부분이 El이나 Node가 되도록 만든답니다

0:01:42.299,0:01:47.390
그리고 나서 우리가 흔히 node라고 부르는 element를 하나 저장합니다

0:01:47.390,0:01:52.743
그리고 global document object에 이를 붙이는[br]메서드를 사용할 것입니다

0:01:52.743,0:01:58.964
우선 document를 입력하고 점을 입력한다음[br]getElementByID를 입력하세요

0:01:58.964,0:02:04.753
그리고 함수이므로 괄호를 입력합니다[br]다만 이것만으로는 어떠한 것을 찾을 수 없습니다

0:02:04.753,0:02:07.733
왜냐면 어떤 ID를 찾을지 알려주지 않았기 때문이죠

0:02:07.733,0:02:12.011
괄호안에서 우리가 찾기를 원하는 것을

0:02:12.011,0:02:21.354
따옴표를 포함하여 문자열의 형태로 입력합니다[br]즉, "heading"을 입력합니다

0:02:21.354,0:02:24.098
여러분이 수정을 하기전에[br]어떠한 element를

0:02:24.098,0:02:26.537
어떻게 찾아야 하는지 아시겠죠?

0:02:26.537,0:02:31.770
하나의 방법은 console.log 함수를 사용하는 것입니다

0:02:31.770,0:02:36.202
하던일을 잠시 멈추고 개발자도구를 열어볼게요

0:02:36.202,0:02:40.896
맥에서는 command키와 option키와 i키를

0:02:40.896,0:02:48.029
윈도우에서는 Ctrl키와 Shift키와 i키를 눌러보세요

0:02:48.029,0:02:54.833
콘솔 화면에서 h1이 사라진 것이 보이나요?[br]그렇다면 첫 단계는 완료한 것입니다

0:02:54.833,0:03:00.255
우리는 element를 찾았고 [br]이제 그것을 변수에 저장하였습니다

0:03:00.255,0:03:06.359
두번째 단계로 우리가 이미 알고있는[br]innerHTML을 바꾸는 방법을 사용하여

0:03:06.359,0:03:10.679
해당 element를 조절해봅시다[br]우선 'headingEl.innerHTML ='을

0:03:10.679,0:03:17.627
입력하고 그 다음에 원하는 내용을 써보겠습니다[br]진실을 보여줄 시간이 오고있어요

0:03:17.627,0:03:22.721
우리가 수정한대로[br]"All about cats"가 되었네요

0:03:22.721,0:03:26.655
이렇게 우리는 고양이를 좋아하는 사람이 되어 보았습니다

0:03:26.655,0:03:32.320
지금부터는 이런 방식으로 다른 것도 수정해보도록 해보세요