Nuke Olaf - Log Store
HTML 문서내에서 Java Script 다루는 방법 본문
1. HTML 안에서 자바스크립트를 사용하려고 한다.
자바 스크립트 코드는 HTML 문서의 <head> 태그나 <body> 태그 내에서 <script> 태그를 사용하여 삽입할 수 있다.
(외부의 자바스크립트를 가져와서 사용할 수도 있지만, 일단은 <script> 태그를 사용하는 방법부터 공부하기로 함)
HTML 요소를 다루기 위해서는 우선 어떤 요소를 사용할지 선택해야한다.
자바스크립트에서 특정 HTML 요소를 선택하는 방법은 다음과 같다.
document 객체(DOM)는 브라우저 창에 표시되는 내용에 해당하는 문서(document)를 나타내는 객체이다
(1) HTML 태그 이름(tag name)을 이용한 선택 = document.getElementsByTagName();
(2) 아이디(id)를 이용한 선택 = document.getElementsById();
(3) 클래스(class)를 이용한 선택 = document.getElementsByClassName();
(4) name 속성(attribute)을 이용한 선택 = document.getElementsByName();
(5) CSS 선택자(selector)를 이용한 선택 = document.querySelectorAll();
(6) HTML 객체 집합(object collection)을 이용한 선택 = document.title;
2. HTML DOM 을 이용하여 HTML 요소의 내용이나 속성값등을 변경할 수 있다.
var str = document.getElementById("text");
str.innerHTML = "이 문장으로 바뀌었습니다!";
3. 이미지를 클릭하면 이미지가 바뀌는 함수를 만들었다.
<div onclick="changeImg()">
<img id="olafImage" src="olaf.jpg"/>
</div><script>
let pic = document.getElementById("olafImage");
changeImg = () => {
pic.src = "hyejin.jpg"
}
</script>
참고 사이트 >>>
'Language > [PHP]' 카테고리의 다른 글
| CSS 분리할때, background-image url 주의할 점 (0) | 2020.02.03 |
|---|---|
| HTML 에서 CSS 와 JavaScript 분리하기 (1) | 2020.02.02 |
| HTML - 수평방향 타임라인 (Horizontal Timeline) 만들기 (0) | 2020.01.29 |
| PhpStorm 에서 Remote Host 의 파일을 다운로드 할 수 없다고 할때 (0) | 2020.01.29 |
| CSS - 그림위에 글자넣기 (0) | 2020.01.29 |
