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