45일차[JavaScript](2)-JavaScriptDocument객체
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함수가 실행됐을 때(불을 꺼주세요를 클릭했을 때)
