저는 '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"가 되었네요
이렇게 우리는 고양이를 좋아하는 사람이 되어 보았습니다
지금부터는 이런 방식으로 다른 것도 수정해보도록 해보세요