5.1 문서.getElementById()
아시다시피 JavaScript는 HTML 페이지에 일부 애니메이션을 추가하기 위해 만들어졌습니다. 지금까지 우리는 그것에 대해 많이 말하지 않았습니다. 이 동일한 애니메이션을 추가하는 방법은 무엇입니까? 예를 들어 요소의 색상을 변경하려면 어떻게 해야 합니까?
요소의 색상을 변경하려면 먼저 이 요소를 찾아야 합니다. 이를 위해 원하는 요소 document.getElementById();에 HTML로 작성한 id다음 JavaScript에서 액세스하는 기능이 있습니다. 예:
<head>
<script>
function changeImage()
{
var image = document.getElementById("image123");
image.src = "new-image.png";
}
</script>
</head>
<body>
<img id="image123" scr="big-image.png" onclick="changeImage()">
</body>
사용자가 이미지를 클릭하면 함수가 호출됩니다 changeImge(). image내부 에서 요소를 가져온 ID다음 src 속성 값을 새 값으로 변경합니다. 그러면 요소가 img새 이미지를 로드하게 됩니다.
5.2 문서.createElement()
요소를 가져오는 것 외에도 새 요소를 만들고 기존 요소를 삭제할 수 있습니다.
요소 생성은 매우 쉽습니다. 이렇게 하려면 다음 두 가지 작업을 수행해야 합니다. a) 요소 만들기 , b) 문서의 올바른 위치에 추가합니다 . 일반적으로 다음과 같습니다.
<head>
<script>
window.onload = function () {
var image = document.createElement("IMG");
var image.src = "big-image.png";
document.body.addAfter(image);
}
</script>
</head>
<body>
</body>
5.3 window.navigate() 메서드
또 다른 매우 유용한 방법은 window.navigate(). 이를 통해 브라우저가 현재 페이지 대신 새 페이지를 로드하도록 강제할 수 있습니다. 이 메서드에 전달 URL하고 호출하면 됩니다. 예:
<body>
<img scr="big-image.png" onclick="window.navigate('https://google.com');">
</body>
위의 예에서 사용자가 이미지를 클릭하면 google.com 페이지가 현재 탭에 로드됩니다.
5.4 현재 URL
그리고 한 가지 더 유용한 것. 때때로 스크립트는 현재 페이지 URL을 알아야 합니다. 예를 들어 동일한 스크립트를 다른 페이지에 추가할 수 있습니다. 그것을하는 방법?
이를 위한 특별한 속성이 있습니다.document.location.href
var currentURL = document.location.href;
GO TO FULL VERSION