코딩이란 무엇일까

45일차[JavaScript](2)-JavaScriptDocument객체 본문

국비지원수업

45일차[JavaScript](2)-JavaScriptDocument객체

둥구는 지굴다 2022. 12. 27. 21:54

document 객체

웹 페이지 자체를 의미하는 객체

웹 페이지에 존재하는 HTML 요소에 접근할 때 반드시 document 객체로부터 시작

DOM 요소의 선택

자바스크립트에서 특정 HTML요소를 선택하는 방법입니다.

document.getElementById( )

→ ( ) 안의 아이디를 가지고 있는 요소를 선택해서 가져옴

ex) <div id=”banner”> <div>

document.getElementById(”banner” ) //이렇게 하면 banner라는 id를 갖고 있는 요소를 가져온다.

document.getElementsByClassName( )

→ ( ) 안의 클래스를 가지고 있는 요소를 모두 선택한 후 가지고 옴

ex) < div class=”menu_item”> </div>

document.getElementByClassName(”menu_item)// 이거는 위의 id와는 다르게 class를 가져온다.

documents.querySelector( )

→ ( ) 안의 CSS선택자로 선택되는 요소를 선택해서 가져옴

ex) <div class=”menu_item”>

<a>

<img/>

</a>

</div>

document.queryselector(”. menu_item> a> img”) // CSS의 선택자인 자식선택자로 img를 가져온다.

document.querySelectorAll( )

→ ( ) 안의 CSS 선택자로 선택되는 요소들을 모두 선택 후 배열로 가져옴

document.getElementsByTagName( )

→ ( ) 안의 태그 이름의 요소들을 모두 선택 후 배열로 가져옴

DOM요소의 스타일 변경

위의 방법으로 가져온 객체의 style을 변경해 줄 수 있습니다.

<body>
<div id="content">안녕하세요</div>	

</body>
<script type="text/javascript">
	const content=document.getElementById('content')
	content.style.color="red"
</script>

innerHTML

innerHTML은 html요소ㅗ의 내용을 변경하고 싶은 경우 사용하는 Element오브젝트의 프로퍼티입니다.

innerHTML사용방법

document.getElementById([id명]).innerHTML=변경하고싶은 내용

innerHTML사용해 보기

html

<div style="margin: 20px; border: 1px solid gray;">
      <h4>현재 상태 : <span id='state'>OFF</span></h4>
      <button onclick="lightOn()">불을 켜주세요.</button>
      <button onclick="lightOff()">불을 꺼주세요.</button>
   </div>

JavaScript

      const light = document.getElementById('light');     
      const state = document.getElementById('state');
      function lightToggle(){
    	  if(state.innerHTML=='ON'){ //켜져있는 상태->off
    		  lightOff();
    	  }else { //꺼져있는 상태 ->on
    		  lightOn();
    	  }
      }
      function lightOn(){
         state.innerHTML = 'ON';             
         state.style.color = 'lime';             
      }
      function lightOff(){
         state.innerHTML = 'OFF';
         document.getElementById('state').style.color='red';
      }

실행결과

lightoff함수가 실행됐을 때(불을 꺼주세요를 클릭했을 때)

저작자표시

'국비지원수업' 카테고리의 다른 글

49일차[JavaScript] (1)-form태그 요소 js로 가져오기  (0) 2023.01.02
46일차[JavaScript]배열  (0) 2022.12.28
45일차[JavaScript] -(1)변수와 상수  (0) 2022.12.27
41일차[HTML/CSS] FORM,INPUT,SELECT,OPTION태그  (0) 2022.12.21
40일차[HTML/CSS] (3)-box-sizing:border-box  (0) 2022.12.19
'국비지원수업' Related Articles more
Comments