-
저는 'All about dogs'라는 멋진 웹페이지를 가지고 있어요
-
물론 모든 사람들이 그러지는 않겠지만,
저는 고양이를 더 좋아하고
-
이 페이지를 'All about cats"로 바꾸고 싶어요
-
단순히 HTML을 고치는 대신에
JavaScript를 사용해보도록 하죠
-
이 방식을 사용하여
이 페이지를 고양이에 대한 것으로
-
바꾸어주는 브라우저 확장프로그램으로
변환할 수 있습니다
-
고양이에 대한 페이지이라니 놀랍지 않나요?
-
이 웹페이지는 머리글(heading), 본문(paragraph)
그리고 사진을 몇개로 이루어져있습니다
-
이제부터 배울 두 단계를 사용하면
머리글 부터 시작하여
-
각 부분별로 각각 바꾸어 볼 수 있을 것입니다.
-
첫번째 단계는 머리글에 포함되어 있는
DOM node를 찾는 것입니다
-
document.body전에 있는 DOM node를 찾는 방법이죠
-
하지만 저는 보다 특별한 무언가를 원해요
이 h1처럼 말이죠
-
그러니까 이 h1 은 ID를 가지고 있습니다
-
이것은 이 페이지에서 오직
이 태그값을 나타내는 ID를 의미하고
-
그리고 찾고자 하는 DOM 노드가
ID를 가지고 있으면 찾는것은 매우 쉽습니다
-
'getElementById'라는
document object의 메서드를 사용하면됩니다
-
태그 안에 바로 여기에서
-
`var headingEl` 를 입력하여
값을 저장할 변수를 만드는 것부터 시작해보죠
-
보통 저는 변수의 마지막부분이 El이나 Node가 되도록 만든답니다
-
그리고 나서 우리가 흔히 node라고 부르는 element를 하나 저장합니다
-
그리고 global document object에 이를 붙이는
메서드를 사용할 것입니다
-
우선 document를 입력하고 점을 입력한다음
getElementByID를 입력하세요
-
그리고 함수이므로 괄호를 입력합니다
다만 이것만으로는 어떠한 것을 찾을 수 없습니다
-
왜냐면 어떤 ID를 찾을지 알려주지 않았기 때문이죠
-
괄호안에서 우리가 찾기를 원하는 것을
-
따옴표를 포함하여 문자열의 형태로 입력합니다
즉, "heading"을 입력합니다
-
여러분이 수정을 하기전에
어떠한 element를
-
어떻게 찾아야 하는지 아시겠죠?
-
하나의 방법은 console.log 함수를 사용하는 것입니다
-
하던일을 잠시 멈추고 개발자도구를 열어볼게요
-
맥에서는 command키와 option키와 i키를
-
윈도우에서는 Ctrl키와 Shift키와 i키를 눌러보세요
-
콘솔 화면에서 h1이 사라진 것이 보이나요?
그렇다면 첫 단계는 완료한 것입니다
-
우리는 element를 찾았고
이제 그것을 변수에 저장하였습니다
-
두번째 단계로 우리가 이미 알고있는
innerHTML을 바꾸는 방법을 사용하여
-
해당 element를 조절해봅시다
우선 'headingEl.innerHTML ='을
-
입력하고 그 다음에 원하는 내용을 써보겠습니다
진실을 보여줄 시간이 오고있어요
-
우리가 수정한대로
"All about cats"가 되었네요
-
이렇게 우리는 고양이를 좋아하는 사람이 되어 보았습니다
-
지금부터는 이런 방식으로 다른 것도 수정해보도록 해보세요
