Changing attributes (Video Version)

자바스크립트를 사용해 보기 위해 강아지와 관련된 웹페이지를 가지고 돌아왔어요

웹페이지의 강아지를 전체적으로 고양이로 바꿔볼거에요

제가 무시했던 방 안에 코끼리가 있어요

음, 실제로는 방에 두 마리의 강아지가 있네요

제가 귀여운 고양이 사진을 가지고 있지 않아서요
사진을 바꿔야겠네요

그럼 getElementsByTagName을 이용해서 사진을 찾아볼게요

var imageEls =
document.getElementsByTagName("img");

이제, 여러 번 반복해야 하기 때문에

반복 동작을 하는 for 구문을 사용할 필요가 있어요
만들어 볼게요

var i = 0; i < imageEls.length; i++

for 구문 안에 뭐라고 써야 할까요?
사진 태그가 innerHTML을 가지고 있지 않기 때문에

사진을 바꿀 수 없어요
태그가 자동으로 닫히게 됩니다

대신에, 강아지처럼 보이게 사진에 변화를 줄 필요가 있어요

태그들의 각각에 src 속성을 나타낸

사진의 URL을 바꿔줄 필요가 있어요

점 표기를 이용해서 속성을 바꿔줄 수 있어요
보여드릴게요

먼저 괄호 표기를 이용하고

자바스크립트 이름처럼 HTML 속성 이름을 입력합니다

그러고 나서 새로운 값을 설정할거에요
빈 공간으로 두면 됩니다 src = " "

이미지가 사라진 것이 보이시죠

이것은 “” 공백이 이미지의 어느 점도 가리키지 않기 때문이에요

이 새로운 URL이 어떻게 동작하는지 이해하기 위해서는,
이전의 URL을 여기에 옮겨볼게요

그리고 고양이로 파일 이름을 바꾸고요

칸 아카데미에 이미 고양이 사진에 대한 URL이 있다는 것을
저는 이미 알고 있었기에 가능한 겁니다

강아지가 이제 고양이로 바뀌었어요
거의 다 끝나갑니다

강아지 사진에 대해 빠뜨린 것을 알아채셨나요?
아주 미묘한 건데요

아직 한 가지 할 일이 남았습니다
Wikipedia에 연결하는 일이죠

다른 사람이 연결하려고 하면, 그들은
저의 속임수에 걸려들게 됩니다

그래서 다른 사람에게 대신에 고양이 사진을 보내주려고 합니다
어떻게 자바스크립트에서 링크를 찾아낼 수 있을까요?

이 링크 ID를 주면 될거에요
혹은 혹은 getElementsByTagName을 사용하여

페이지의 링크를 변경하면 됩니다

정말 멋질거에요

그리고 강아지 관련 페이지로 연결될 링크를 찾습니다
CSS query selector를 이용해서요

여기 태그에 CSS query를 보여드릴게요

이제 CSS query는 강아지와 관련된 모든 링크들을
찾아낼 것입니다

먼저 a를 입력합니다
이것은 제가 링크를 찾기 위함이에요

그러고 나서 [href*="Dog"]를 입력합니다

이것은 CSS를 강아지가 있는
링크에 연결시킨다는 것을 말해요

그리고 색깔은 자주색으로 설정하겠습니다

좋아요, 이것이 attribute selector(속성 선택) 부분입니다

여러분들의 자료를 더 많이 찾을 수 있는
다양한 attribute selector가 있어요

이제 자바스크립트에서 해보기 위해,
document.querySelectorAll을 사용해볼 수 있습니다

var linkEls = document.querySelectorAll

selector 안에 붙여넣을게요
중복으로 쓰이지 않도록 조심하세요

이제 흘륭한 코드가 되었어요

이제 이것들을 반복동작 시켜줘야 해요

다시 한 번 for 구문이 사용됩니다

웹페이지 링크를 Wikipedia의 고양이에 관련된
웹페이지로 바꿔주려고 합니다

그래서 linkEls[i].href 입력해볼게요

이것은 우리가 바꾸고자 하는 속성 이름이기 때문에
다음으로 =을 입력하고

URL을 찾아 여기 아래에 써줍니다
그리고 고양이로 바꿔요

페이지의 URL을 확실히 알기 때문에 가능할거에요

이제 끝났네요
하지만 아직 자바스크립트를 이용하여

웹페이지를 바꾸는 방법을 못 배웠네요
움직이지 말고 계세요