자바스크립트를 사용해 보기 위해 강아지와 관련된 웹페이지를 가지고 돌아왔어요
웹페이지의 강아지를 전체적으로 고양이로 바꿔볼거에요
제가 무시했던 방 안에 코끼리가 있어요
음, 실제로는 방에 두 마리의 강아지가 있네요
제가 귀여운 고양이 사진을 가지고 있지 않아서요 사진을 바꿔야겠네요
그럼 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을 확실히 알기 때문에 가능할거에요
이제 끝났네요 하지만 아직 자바스크립트를 이용하여
웹페이지를 바꾸는 방법을 못 배웠네요 움직이지 말고 계세요