JavaScript
JS | BOM and DOM
개발 공부
2022. 12. 29. 16:05
자바스크립트의 두번째 강력한 기능
BOM (Browser Object Model)
브라우저상의 동작
브라우저 객체 모델이라 하며, 자바스크립트 안에 들어있는 내장 함수들을 의미합니다.
window(생략가능), location, history, document등이 포함됩니다.
DOM (Document Object Model)
태그 핸들링
문서 객체 모델이라 하며, document객체를 의미합니다. (화면을 핸들링하는 객체)
화면에 있는 태그를 선택하고 삭제 생성등을 위해 사용합니다.
! BOM 안에 DOM 이 있음
- 모던 javascript 튜토리얼
이미지 찾아 넣기
document.으로 시작!
다양한 방법으로 태그를 선택할 수 있다.
Element( 태그 ) 노드 선택
element , node , tag 3개 다 태그라는 말
| 메서드 | 설명 |
| getElementById() //단일값 반환 (얘만 s없음) | 요소의 id 가 xx 인 태그를 선택 |
| getElementsByName() //배열형태로 반환 | 요소의 name이 xx 인 태그를 전부 선택 |
| getElementsByClassName() //배열형태로 반환 | 요소의 class가 xx 인 태그를 전부 선택 |
| getElementsByTagName() //배열형태로 반환 | 요소의 tag 명이 xx 인 태그를 전부 선택 |
| querySelector() //단일값 반환 | 요소 선택 방법이 css와 동일 첫번째 요소만 선택 |
| querySelectorAll() //배열형태로 반환 (ES6) | 요소 선택 방법이 css와 동일 모든 태그 선택 |
예제 1 )
<button id = "btn">버튼</button>
<input type="checkbox" name="inter" value="1"> java
<input type="checkbox" name="inter" value="2"> js
<input type="checkbox" name="inter" value="3"> css
<input type="checkbox" name="inter" value="4"> html
<script>
//element == node == 태그
var btn = document.getElementById("btn");
console.log(btn); //<button id = "btn">버튼</button>
//태그 자체를 갖고와야 삭제나 수정등이 가능하다.
var inter = document.getElementsByName("inter");//name이 inter인 태그 - 반환이 배열
console.log(inter);//배열
btn.onclick = function(){
for(var i = 0; i < inter.length; i++){
console.log(inter[i]);
}
}
</script>
<hr>
<button id = "btn2">버튼</button>
<input type="radio" name="aaa" class="hello" value="1"> 프로그램
<input type="radio" name="aaa" class="hello" value="2"> 디자인
<input type="radio" name="aaa" class="hello" value="3"> 네트워크
<input type="radio" name="aaa" class="hello" value="4"> 보안
<script>
var btn2 = document.getElementById("btn2");
var hello = document.getElementsByClassName("hello"); //class명이 hello인 태그 - 반환이 배열
console.log(hello);
btn2.onclick = function(){
for(var i = 0; i < hello.length; i++){
console.log(hello[i]);
}
}
</script>
<hr>
<button id = "btn3">버튼</button>
<ul id ="bye">
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
<script>
var btn3 = document.getElementById("btn3");
var bye = document.getElementById("bye"); //id가 bye인 태그
var li = bye.getElementsByTagName("li"); //bye인 태그에서 탐색
console.log(li);
btn3.onclick = function() {
for(var i = 0; i < li.length; i++){
console.log(li[i]);
}
}
</script>예제 2 )
<button id = "btn">버튼</button>
<ul class="box">
<li>hi</li>
<li>bye</li>
<li>good afternoon</li>
</ul>
<script>
var btn = document.querySelector("#btn"); //css선택자로 얻습니다.
console.log(btn);
//var li = document.querySelector(".box > li");//li태그를 얻습니다. (단일)
//console.log(li);
var lis = document.querySelectorAll(".box li"); //li태그를 모두 얻습니다.
console.log(lis);
btn.onclick = function(){
for(var i = 0; i <lis.length; i++){
console.log(lis[i]);
}
}
</script>예제 3 ) 입력한대로 출력
<h3>태그의 속성 제어하기</h3>
<!--태그는 하나의 객체이다.-->
<!--.속성명으로 접근할 수 있다.-->
<input type="text" value="" id="input" required>
<div class="msg"></div>
<button type="button" id="btn">확인</button>
<script>
//태그의 속성은 = .속성명으로 접근합니다.
var input = document.getElementById("input");
console.log(input.type); //text
console.log(input.id); //id
console.log(input.value); //value
console.log(input.required); //required속성 true/false
input.value = "변경"; //값 변경
//태그 사이값을 HTML형식으로 얻음 innerHTML
var btn = document.getElementById("btn");
console.log(btn.innerHTML);
var msg = document.querySelector(".msg");
//버튼을 누르면 사용자가 입력한 value가지고 와서 msg태그 사이에 출력.
btn.addEventListener("click", function(){
var a = input.value; //user가 입력한 value
msg.innerHTML = a;
})
퀴즈 1)
<h3>사용자가 버튼을 클릭하면 input태그의 공백여부, 체크박스의 체크여부를 확인</h3>
아이디:<input type="text" id="id">
기억하기:<input type="checkbox" class="remember">
<button id = "btn">확인</button>
<script>
var id = document.getElementById("id");
// var check = document.querySelector(".remember");
var check = document.getElementsByClassName("remember");
var btn = document.getElementById("btn");
/*
btn.onclick = function(){
if(id.value == "") {
alert("inout의 값을 확인하세요!");
}
if(remember.checked == false){
alert("기억하기를 체크하세요!")
}
}
*/
btn.addEventListener("click", function(){
if(id.value==""){
console.log('id 공백임');
} else {
console.log('id 공백아님');
}
console.log(check[0].checked);
if(check.checked==false){
console.log('unchecked');
} else {
console.log('checked');
}
})
</script>
<hr>
<h3>인라인이벤트 : 사용자가 체크박스를 클릭할때마다 경고창에 value값을 띄어주세요</h3>
<input type="checkbox" value="1" onclick="check(this)">조항1
<input type="checkbox" value="2" onclick="check(this)">조항2
<input type="checkbox" value="3" onclick="check(this)">조항3
<script>
function check(tag) {
//console.log(tag);
if(tag.checked==true){
alert(tag.value + '조항 선택');
}
}
</script>퀴즈 2) 선택되는 언어를 출력
<h5>change 이벤트</h5>
<h2 class="msg">
단어를 선택하세요
</h2>
<select name="" id="lang" >
<!--value에 값이 없으면 태그 사이의 값이 value값으로 들어가게된다.-->
<option value="none">선택</option>
<option value="eng">hello</option>
<option value="kor">안녕하세요</option>
<option value="chi">니하오</option>
</select>
<script>
var lang = document.getElementById("lang");
var msg = document.querySelector(".msg");
lang.onchange = function(){
console.log(lang.value);
if(lang.value=="eng"){
msg.innerHTML='영어입니다.';
} else if(lang.value=="kor"){
msg.innerHTML='한국어입니다.';
} else if(lang.value=="chi"){
msg.innerHTML='중국어입니다.';
} else {
msg.innerHTML='단어를 선택하세요';
}
}퀴즈 3) 한개 이상의 좌석이 체크 되어있지 않으면 경고창 띄우기
<input type="checkbox" name="seat" value="1">1번
<input type="checkbox" name="seat" value="2">2번
<input type="checkbox" name="seat" value="3">3번
<input type="checkbox" name="seat" value="4">4번
<input type="checkbox" name="seat" value="5">5번
<input type="checkbox" name="seat" value="6">6번
<input type="checkbox" name="seat" value="7">7번
<input type="checkbox" name="seat" value="8">8번
<input type="checkbox" name="seat" value="9">9번
<input type="checkbox" name="seat" value="10">10번
<button type="button" id="btn">출력</button>
<script>
//버튼 클릭시, 좌석이 적어도 한개이상 체크되어있지 않다면 경고창을 띄우세요.
//var seat = document.querySelectorAll("input[name='seat']");
var seat = document.getElementsByName("seat");
var btn = document.getElementById("btn");
btn.onclick = function(){
var cnt = 0;
for(var i =0; i < seat.length; i++){
if(seat[i].checked == false){
cnt++;
} else if(seat[i].checked){
console.log(seat[i].value);
}
}
if(cnt == 10){
alert('한개 이상의 좌석을 선택하세요.');
//return; //함수 종료
}
}퀴즈 4 ) 계산기 (+,-) 만들기
<h3>js 카운트 만들기 - this, innerHTML, value 속성을 사용하면 됩니다.</h3>
<input type="number" value="0">
<button class="btn1" onclick="calc(this)">+</button>
<button class="btn2" onclick="calc(this)">-</button>
<script>
var num = document.getElementsByTagName("input");
function calc(x){
console.log(x.innerHTML);
if(x.innerHTML=="+"){
num[0].value++;
} else if (x.innerHTML=="-"){
if(num[0].value==0){ }
else {
num[0].value--;
}
}
}
//스스로 여러가지 시도를 해봐야 늘 수 있다.
</script>