다시 오신 것을 환영합니다.
그래서이 비디오는 조금 달라질 것입니다.
우리는 돔을 조작하는 새로운 방법을 소개하지는 않겠지 만 우리가 배운 것을 취하고 코드를 약간 수행 할 것입니다.
그래서 Google의 홈 페이지를 가지고 놀 것입니다.
그래서 나는 당신이 비디오를 본 후에 나 자신과 함께이 일을하거나 구글을 열 것을 권한다.
그리고 우리는 로고 변경과 같은 재미있는 일을 할 것입니다.
우리는 고양이 애호가가 모든 링크를 변경하여 그들이 닷컴이나 그와 비슷한 곳으로 간다는 것을 알기 위해 이번에 새끼 고양이의 사진을 찍을 것입니다.
이 단원에서 강조하고 싶은 한 가지 점은 루프를 사용하여 여러 요소를 조작 할 수 있으므로 항상 한 가지를 선택하고 색상을 변경하거나 이미지를 하나 선택하고 소스를 변경하지 않아도된다는 것입니다.
우리는 모든 이미지를 선택하고 그리스트를 반복 할 수 있으며 각각의 이미지를 소스로 바꿀 수 있습니다.
그래서 여기서 어떻게 할 수 있는지 보여 드리겠습니다.
그래서 우리는 간단하게 시작할 것입니다.
이 로고를 선택하여 시작하겠습니다.
이 일반 로고 대신 Google 기념일 로고가있는 날에 Google에있는 경우 빠른 쪽지입니다.
여기에는 이미지가 없을 수도 있습니다.
때때로 그들은 멋진 애니메이션이나 대화 형 게임을 가지고 있습니다.
그리고 그 경우 캔버스 요소와 같은 것일 수 있습니다.
그래서 당신이 검사 할 때 그것을 만난다면 괜찮습니다. 당신은이 부분을 볼 수 있습니다.
우리는 이미 이미지 소스를 변경하는 방법을 보았습니다.하지만 다른 사람들의 웹 사이트에서 그렇게 할 수 있다는 것을 보여주고 싶습니다.
이미지이고 ID가있어서 쉽게 만들 수 있습니다.
HP 로고.
이제 우리의 로고가 쿼리 선택기 HP 로고와 동일한 문서라는 것을 선택하겠습니다.
물론 ID별로 요소를 사용할 수도있었습니다.
그래서 우리는 그것과 동등한 로고로 끝납니다.
그래서 우리는 그것을 선택했습니다.
그리고 우리가 이미지를 바꾸고 싶다면 소스를 바꿀 것입니다.
우리는 set 속성을 사용할 필요가 있고 여기에 이미지 만 있습니다.
좋은 새끼 고양이.
너는이 기단을 가져갈거야.
나는 그것을 복사 할 것이고, 나는이 로고의 출처를 업데이트 할 것이다.
공포 대신 로고 도트 속성을 설정합니까?
우리는 근원을 쓰려고합니다.
그리고 두 번째 논쟁은 새로운 소식통입니다. 그리고 저는 enter를 치고 멋진 작은 고양이 Roquette가 나타납니다.
이런 메시지가 나타날 수 있습니다.
사용하는 이미지에 따라 다릅니다.
그래서 간단히 설명하겠습니다.
우리가 볼 수있는 것처럼 TTP가로드 된 페이지에 있고 B에 소스를 설정 한 이미지가 H TTP임을 언급하는 것입니다.
그리고 그것을 짧게하기 위해 HTP는 HGP보다 더 안전합니다.
그래서 모든 HTP가되어야한다는 불평입니다. 그렇습니다.
그건 정말 간단한 버전이지만 여전히 우리가 할 수 있습니다.
우리가 여기에서하려고하는 것이 Google을 가지고 노는 것에 대한 거대한 문제는 아닙니다.
그것은 당신이 당신 자신의 응용 프로그램에서 이와 같은 일을한다면 그것은 문제가 될 것이라고 생각하고 싶을지라도 무언가입니다.
그래서 여기에 내용으로 돌아갑니다.
이 고양이의 너비와 높이가 원래 Google 로고와 동일한 공간을 차지하도록 변경되었습니다.
나는 실제로 그 높이가 원래 92이고 2 백 72이 있음을 볼 수있다.
그리고 그것이 바로 여기서 일어나는 일입니다.
당신은 내가 이것을 바꿀 수 있는지, 로고 도트 스타일의 점을 찍을 수 있고 문자열을 가져 와서 단지 500 픽셀이되도록 변경할 수 있는지 알 수 있습니다.
당신은 그것이 펼쳐지는 것을 볼 수 있고 나는 똑같은 일을 할 수 있습니다.
1,000 픽셀로 변경하십시오.
멋진 스트레치 키티를 얻고 너비를 바꿀 수 있습니다.
나는 높이를 의미하고 500이나 가난한 고양이를 만들자.
그것은 단지 온통 뻗어 가고 있습니다.
그러니 조금 더 적절한 것으로 높이를 재설정하십시오.
높이를 약 100 픽셀로, 폭을 약 200으로합시다.
좋아, 이제는 더 많은 연습을 위해 우리를 위해 일할 것이다.
이미지 테두리 주위에 테두리를 두어 스타일 테두리가 같고 2 픽셀의 단색 보라색 테두리를 만들고 그 이미지 주위에 훌륭한 파트너가 있습니다.
이제는 여러 요소를 한꺼번에 선택하고 루프를 사용하여 개별적으로 조작하지 않고이를 조작하는 비디오의 시작 부분에서 소개 한 내용으로 넘어 갑시다.
그래서 우리가 할 일은 페이지의 모든 앵커 태그를 선택하는 것입니다.
이 페이지에는 많은 링크가 있습니다.
우리는 각각 하나씩 가지고 ref 속성을 변경하여 그들이가는 곳 이라기보다는 다른 웹 사이트로 이동합니다.
시작하려면 모든 앵커 태그를 선택해야합니다. 이렇게하려면 여러 가지 방법이 필요합니다.
나는 그것을 링크라고 부르 겠고 링크는 우리가 문서를 할 것입니다.
우리는 질의 문자를 모두 할 수 있지만 태그 이름 앵커 태그로 요소를 가져오고 링크를 보면이 페이지에서 꽤 많은 것을 볼 수 있으므로이 과정을 반복 할 것입니다.
우리는 링크를 할 수 없습니다. 존재하지 않는 도트 집합 속성은 링크가 속성이 아닌 함수에서 시작한다는 것을 알려줍니다.
그리고 그 속성은 개별 요소와 링크에만 존재하기 때문입니다.
이 노드 집합입니다.
그래서 나는 객체와 같은 다른 배열을 통해 반복하는 것처럼 반복해야합니다.
따라서 실제 어레이가 아니기 때문에 각각 사용할 수는 없습니다.
그래서 for 루프를 사용해야하거나 기술적으로 while 루프를 사용할 수 있습니다.
대부분의 사람들은 for 회 돌이를 사용합니다.
그래서 equals가 0 인 것은 길이보다 작은 링크이고 1을 더하고 루프 내에서 각 개별 링크에 액세스 할 것입니다. 안녕하세요.
그리고 텍스트 콘텐츠를 인쇄 해 봅시다.
따라서 텍스트 콘텐츠를 링크하면 해당 로그가 취소됩니다.
이것은 많은 요소들을 반복하면서 콘솔에서 출력하는 것이 아니라 어쨌든 그것을 디스플레이하거나 색상을 바꾸는 것에 대해 뭔가를 바꾸는 일반적인 패턴입니다.
따라서 enter를 누르면 페이지의 모든 링크의 텍스트 콘텐츠임을 알 수 있습니다.
따라서 사진과 같은 것들을 알게되고 구글 플러스 드라이브를 재생하십시오.이 모든 링크는이 페이지의 어딘가에 있습니다. 그것은 구글의 홈페이지입니다.
따라서 위쪽 화살표를 치면 곧바로 사물을 인쇄하고이 루프로 돌아가서 실제로 스타일을 변경하여 시작하여 길이를 더 쉽게 볼 수있게 만들어 보겠습니다. 다른 색상으로 만들어서 주변에 테두리를 만들어 보겠습니다. .
그래서 나는 로그를 쓰고 나는 lynx 스타일로 할거야, 그리고 우리는 백그라운드를 바꾸어서 분홍색으로 만들겠다고 내 콘솔을 제거 할 것입니다.
그리고 엔터를 누르면 콘솔을 닫을 수 있습니다.
페이지의 모든 링크가 이제 분홍색입니다.
배경이 핑크색입니다.
여기이게 바로 링크입니다.
이 모든 사람들은 로그인 버튼에있는 항목입니다.
그것은 또한 링크입니다.
그러니 한 가지 더 해보 죠.
다시 반복하자.
위쪽 화살표를 치고 몇 가지 일을 해보고 스타일을합시다.
테두리는 하나의 픽셀과 같으며 보라색을 나타냅니다.
그리고 다음 줄 링크에서 나는 스타일을 만들고 오렌지색으로 색을 바꾸자.
그래서 그 두 명은 진입합니다.
그리고 우리는 우리 페이지에서 분홍색 배경 작은 보라색 테두리뿐만 아니라 일반 테두리가 정말 아름 다운 링크를 얻을 것을 볼 수 있습니다.
그것은 아주 멋지다.
그리고 우리는 거기에 오렌지색 텍스트도 넣습니다.
그러나 우리가 그들을 클릭하면 트랩이 아직 변경되지 않았 음을 알 수 있습니다. 왜냐하면 우리가 트랩을 변경하지 않았기 때문입니다.
그래서 나는 그들 모두를 WDW로 바꾸기를 원합니다.
닷컴이된다는 것은 사기범에게 가야합니다. 이미 내 링크를 선택했습니다.
이 거대한 콜렉션과 저는 이미 루프를 작성하여 재사용 할 것입니다.
그리고 이것을 반복하면 많은 일을하게 될 것입니다.
그래서 우리가 각각을 사용할 수없는 4 개의 루프를 작성할 수 있다면 편안해질 것입니다.
그래서 for 루프를 사용해야합니다.
우리는 항상 이것을합니다.
그리고 여기부터 우리가 Jey 쿼리에 도달 할 때까지이 유형의 라인을 많이 작성하게 될 것입니다.
그래서 나는 우리를 연결시킬거야.
그리고 우리는 시작할 것입니다. 그러나 모든 빛이 어디로가는 지 밖으로 인쇄하면 그 로그를 취소 할 것입니다.
그리고 우리는 atra의 log get 속성을 취소 할 것입니다.
그냥 그렇게.
그리고 우리는 기술적으로 그것을 발명 할 필요는 없지만, 당신이보기가 더 쉽습니다.
그리고 우리는 여기에서 볼 수 있도록 끊임없이 로그를 닫는 인쇄본을 놓치고 있습니다. 이제 모든 링크 목록을 얻었습니다. 흥미로운 점은 그 중 일부를 볼 수 있다는 것입니다.
이것은 자바 스크립트 앞으로 0 또는 아니오이 일에 대한 링크입니다.
그래서 그들 중 일부는 비어 있습니다. Tref가없는 곳도 있습니다. Tref 중 일부는 웹 사이트를 분리하거나 일부는 여기 같은 상대 경로이고 일부는 절대적인 것입니다.
승인.
그럼 지금 바꾸자.
Compton-Rock 블로그 링크 나는 속성을 설정 했으므로 속성을 지속적으로 기록 할 필요가 없습니다.
그리고 우리가 우리가 HPF를 W.W로 바꾸고 싶은 HGF를 원하는 것으로 바꾸어 봅시다.
저것은 HTP 콜론 슬래시 BW 도트 Bing 점 com을 다만 그 같이한다.
그리고 우리는 엔터를 쳤다.
그것은 변화된 것처럼 보이지 않습니다.
우리가 링크를 입력하면 우리가 가지고있는 것을 보게됩니다.
모든 사람은 이제 닷컴이되고 우리는 또한 하나를 검사 할 수 있고 요소 검사관에서 볼 수 있습니다 그것은 닷컴이되는 것입니다.
마지막으로 테스트 할 것은 클릭하는 것입니다.
빨리 로그인 버튼을 누르거나 Gmail을 끝내자. 그러면 나를 위해 열리는 것을 볼 수 있습니다.
요약하자면, 우리는 일련의 것들을 링크 컬렉션으로 선택한 다음 for 루프를 사용하여 해당 컬렉션을 반복 한 다음 루프 내에서 각각의 개별 요소에 대해 무언가를 수행 할 수 있습니다. 그러면 각 요소가 모두 반복됩니다.
그래서 배경색을 경계선으로 바 꾸었습니다. 글꼴 색을 변경 했으므로 몇 줄을 써야했고,이 페이지에서 20 ~ 30 개의 다른 길이를 모를 때 적용되었습니다.
이것이 바로 다음 몇 가지 비디오에서 우리가 많이 사용할 패턴입니다.