document 직접 접근에 대해서 알아보도록 하겠습니다.
Jquery라는 라이브러리를 사용하시면 더 편하게 그리고 더 짧은 코드로 같은 접근을 할 수 있습니다.
하지만 제가 보여드리는건 Jquery를 사용하지않고,
자바스크립트를 처음 접근 하시는분들에게 알려드리기 위함 입니다.
html 부분
<html>
<head></head>
<body>
<h2 id="test-h2">테스트 코드</h2>
</body>
</html>-
원하는 아이디 타겟으로 잡기 (스크립트 부분)
<script> var target = document.getElementById('test-h2'); </script> -
타겟에 값 넣기
<script> var target = document.getElementById('test-h2'); target.innerHTML = '<span>타겟</span>'; </script> -
타겟 스타일 바꾸기
<script> var target = document.getElementById('test-h2'); target.style.color = 'red'; </script>
등...
javascript에서 직접 DOM을 접근해서 기본적인 DOM을 변경하고 다루는 작업들을 알아보았습니다.
'javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 참조 타입 (객체 타입) (0) | 2020.05.20 |
|---|---|
| [javascript] 자바스크립트 기본 타입 ( 숫자, 문자열, 불린값, null, undefined) (0) | 2020.05.19 |
| [javascript] substring(),indexOf() 문자열 추출과 문자열 찾기 (0) | 2020.05.18 |
| [javascript] 자바스크립트 for 문, for in 문, forEach 문 - 반복문 편 (0) | 2020.05.16 |
| [javascript] window 객체 (0) | 2020.05.12 |
