javascript 기초(html 조작, 변경)

<h1 id="hi">hello</h1>

<script>
 document.getElementById('hi').innerHTML = "안녕하세요";
</script>

다음과 같은 코드를 조작해보자.

<h1> 태그안에 hello란 글자를 '안녕하세요'라는 글자로 변경하려 할때 <script>안에 다음과 같은 코드를 작성하면 된다.

document.getElementById('hi').innerHTML = "안녕하세요";

그럼 <h1>태그에 hello 는 안녕하세요 라는 글자로 변경되는데 다음 코드를 간단히 해석해 보자,

 

document -> html 웹문서

.(마침표) -> ~의

getElementById('아이디명') - > 괄호 안에 있는 '아이디명' html요소를 찾아라

innerHTML -> 내부 HTML

=(등호) -> 오른쪽에 있는걸 왼쪽에 대입하라.

"안녕하세요"; -> 변경할 문자

 

해석하자면 html 문서안의 'hi'라는 아이디 요소를 찾아 내부 html을 "안녕하세요"로 바꿔달라.

document.getElementById('???').??? = '???';

다음과 같이 안에 요소만 바꿔주면 html의 모든걸 조작할수 있다.

document.getElementById('???').src = '???.jpg';

요소에 파일을 추가할수도 있다.

document.getElementById('???').style.color = 'red';

style color 변경