728x90
Document 객체
Document 객체는 웹 페이지 그 자체를 의미합니다.
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 합니다.
Document 메소드
Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공합니다.
- HTML 요소의 선택
- HTML 요소의 생성
- HTML 이벤트 핸들러 추가
- HTML 객체의 선택
HTML 요소의 선택
HTML 요소를 선택하기 위해 제공되는 메소드는 다음과 같습니다.
메소드설명
|
document.getElementsByTagName(태그이름) |
해당 태그 이름의 요소를 모두 선택함. |
|
document.getElementById(아이디) |
해당 아이디의 요소를 선택함. |
|
document.getElementsByClassName(클래스이름) |
해당 클래스에 속한 요소를 모두 선택함. |
| document.getElementByName(name속성값) | 해당 name 속성값을 가지는 요소를 모두 선택함. |
| document.querySelectorAll(선택자) | 해당 선택자로 선택되는 요소를 모두 선택함. |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div style="border : 1px">
<h1>배경색의 변경</h1>
<p>#다음 버튼을 클릭하면 홈페이지의 배경색을 변경 할 수 있습니다.</p>
<button type="button" onclick = "red()">빨강</button>
<button type="button" onclick = "green()">녹색</button>
<button type="button" onclick = "blue()">청색</button>
<button type="button" onclick = "or()">주황색</button>
<button type="button" onclick = "black()">검정색</button>
<button type="button" onclick = "white()">흰색</button>
</div>
<script type="text/javascript">
function red(){
document.bgColor = "red";
}
function green(){
document.bgColor = "green";
}
function blue(){
document.bgColor = "blue";
}
function or(){
document.bgColor = "#FE9A2E";
}
function white(){
document.bgColor = "white";
}
function black(){
document.bgColor = "black";
}
</script>
</body>
</html>
728x90
'JavaScript' 카테고리의 다른 글
| 35일차//Javascript//🎈 과제 3 : 입력을 받아 버튼 클릭시 정답/오답 여부 출력 (onclick, alert) (0) | 2021.03.03 |
|---|---|
| 35일차//Javascript//🎈 과제 2 : Date(), prompt로 현재시간 불러오기(날짜, 월, 일, 시간) , 생일까지 남은 일수 구하기 (0) | 2021.03.03 |
| 35일차//JavaScript - 입력값을 jsp 로 넘겨주기// 🎃중요 (0) | 2021.03.03 |
| 35일차//JavaScript - 화면전환// history.back() : 이전 , location.reload(): 새로고침 (0) | 2021.03.03 |
| 35일차//JavaScript - 배열 (0) | 2021.03.03 |
