JavaScript(4)

zooyeong·2023년 3월 15일

JavaScript

7주차

목록 보기

5/7

💡브라우저 객체 모델

브라우저 객체 모델은 자바스크립트 언어 사양에 포함되지 않고 웹 브라우저에서 제공하는 객체이다.

🔽브라우저 객체 모델의 종류

window : 웹 브라우저가 열릴 때마다 생성되는 최상위 관리 객체
document : 웹 브라우저에 표시되는 HTML 문서 정보가 포함된 객체
location : 웹 브라우저에 현재 표시된 페이지에 대한 URL 정보가 포함된 객체
history : 웹 브라우저에 저장된 방문 기록이 포함된 객체
navigator : 웹 브라우저 정보가 포함된 객체
screen : 웹 브라우저의 화면 정보가 포함된 객체

✅window 객체의 속성과 메소드

주요 속성

innerWidth : 웹 브라우저 화면의 너비

innerHeight : 웹 브라우저 화면의 높이

outerWidth : 웹 브라우저 창의 너비

outerHeight : 웹 브라우저 창의 높이

screenTop/screenY : 웹 브라우저 위쪽 면과 모니터의 간격

screenLeft/screenX : 웹 브라우저 왼쪽 면과 모니터의 간격

scrollX : 웹 브라우저의 수평 스크롤 위치

scrollY : 웹 브라우저의 수직 스크롤 위치

주요 메서드

alert() : 알림창 표시

confirm() : 확인창 표시

prompt() : 입력창 표시

open() : 새로운 웹 브라우저 창 열기

colse() : 웹 브라우저 창 닫기

scrollTo() : 웹 브라우저의 스크롤을 특정 위치만큼 이동

scrollBy() : 웹 브라우저의 스크롤을 현재 위치에서 상대 위치로 이동

//alert()
alert('경고 메시지 팝업 메시지');

//confirm()
let isOk = confirm('진행하시겠습니까?'); //확인을 받는 것! 확인 or 취소 버튼
console.log(isOk); //확인->true / 취소->false를 반환

if(isOk == true){
  //진행
} else{
  //멈춤
} //과 같은 로직으로 쓸 수 있음

//prompt
let result = prompt('당신의 나이는?'); //입력을 받는 형태
console.log(result); //확인->입력받은값을 반환 / 취소->null

let result2 = prompt('진행하시겠습니까? (진행:예, 중지:아니오 입력)', '예'); //콤마(,) 뒤에 default값을 넣을 수 있다(답변유도)

behavior 속성
scrollTo() 메서드나 scrollBy() 메서드 사용 시 behavior 속성을 전달할 수 있으며, 값으로 smooth를 넣으면 스크롤이 부드럽게 이동한다.

💡문서 객체 모델(DOM)

문서 객체 모델(DOM : Document Object Model)은 웹 브라우저에 표시되는 문서를 자바스크립트가 이해할 수 있도록 객체화한 모델 구조이다.

📖속성으로 노드 선택하기

parentNode : 부모 노드를 반환
childNodes : 모든 자식 노드를 반환
firstChild : 첫 번째 자식 노드를 반환
lastChild : 마지막 자식 노드를 반환
previousSibling : 이전 형제 노드를 반환
nextSibling : 다음 형제 노드를 반환
parentElement : 부모 요소 노드를 반환
children : 자식 요소 노드를 반환
firstElementChild : 첫 번째 자식 요소 노드를 반환
lastElementChild : 마지막 자식 요소 노드를 반환
previousElementSibling : 이전 요소 노드를 반환
nextElementSibling : 다음 요소 노드를 반환

🔽childNodes

🔽childNodes[n]

🔽lastChild

📖메서드로 노드 선택하기

위 속성으로 노드 선택하기보다 메서드로 노드 선택하기가 주로 쓰인다. 속성값과 태그명 사용하기로 get 메서드를 이용할 수 있고, CSS 선택자 사용하기로 query 메서드를 이용할 수 있다.

✅get메서드

getElementById(id속성값) : id 속성값과 일치하는 요소 노드를 1개만 선택
getElementsByClassName(class속성값) : class 속성값과 일치하는 요소 노드를 모두 선택
getElementsByTagName(태그명) : 태그명과 일치하는 요소 노드를 모두 선택

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>p태그1</p>
  <p>p태그1</p>
  <div id="div1">고유아이디</div>
  <div class="divcls">클래스1</div>
  <div class="divcls">클래스2</div>

  <div class="container1">
    <div class="indiv"></div>
    <div class="indiv"></div>
    <div class="indiv"></div>
  </div>

  <div class="container2"></div>

  <script>
    const el1 = document.getElementById("div1"); //지정 아이디 이름의 요소
    const el2s = document.getElementsByClassName("divcls"); //지정 클래스 이름의 요소
    const el3s = document.getElementsByTagName("p"); //p태그인 요소
    console.log(el1);
    console.log(el2s);
    console.log(el3s);
  </script>
</body>
</html>

🔽console

✅query 메서드

querySelector(CSS 선택자) : 매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 1개만 선택
querySelectorAll(CSS 선택자) : 매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 모두 선택

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>p태그1</p>
  <p>p태그1</p>
  <div id="div1">고유아이디</div>
  <div class="divcls">클래스1</div>
  <div class="divcls">클래스2</div>

  <div class="container1">
    <div class="indiv"></div>
    <div class="indiv"></div>
    <div class="indiv"></div>
  </div>

  <div class="container2">
    <div class="indiv"></div>
  </div>

  <script>
    const qs1 = document.querySelector("#div1");
    const qs2s = document.querySelectorAll(".divcls");
    const qs3s = document.querySelectorAll(".indiv");
    const qs4s = document.querySelectorAll(".container1 .indiv");
    console.log(qs1);
    console.log(qs2s);
    console.log(qs3s);
    console.log(qs4s);
  </script>
</body>
</html>

🔽console

📖노드 조작하기

✅콘텐츠 조작하기

textContent : 노드 요소의 모든 텍스트에 접근
innerText : 노드 요소의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근
innerHTML : 노드 요소의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p id="title">pTag문자, <span style="display:none;">span태그</span></p>
</body>
</html>

🔽console

✅스타일 조작하기

스타일을 조작하기 위한 형태는 노드.style.css속성명 = 속성값;와 같다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p id="t1"></p>
  <p id="t2"></p>
  <p id="t3"></p>
  <script>
    document.querySelector('#t1').textContent = '<strong>textContent</strong> 속성';
    document.querySelector('#t2').innerText = '<strong>textContent</strong> 속성';
    document.querySelector('#t3').innerHTML = '<strong>textContent</strong> 속성';

	//스타일 조작하기
	document.querySelector('#t1').style.color = 'red';
    const pt2 = document.querySelector('#t2');
    pt2.style.color = 'blue';
    const pt3 = document.getElementById('t3');
    pt3.style.fontSize = '30px';
  </script>
</body>
</html>

🔽실행 결과

✅클래스 속성 조작하기

클래스 속성을 통해 추가와 삭제를 조작할 수 있다.

추가 : 노드.classList.add(class속성값);
삭제 : 노드.classList.remove(class속성값);
추가와 삭제 반복 : 노드.classList.toggle(class속성값);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }
    .redbox{
      background-color: red;
    }
    .bluebox{
      background-color: blue;
    }
    .greenbox{
      background-color: green;
    }
    button{
      margin-top: 10px;
      color: white;
      background-color: black;
    }
  </style>
</head>
<body>
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <div id="box3" class="box"></div>
  <div id="box4" class="box redbox"></div>
  <button onclick="box4toggle()">네번째박스토글</button>

  <script>
    document.getElementById('box1').classList.add('redbox');
    document.querySelector('#box2').classList.add('bluebox');
    document.querySelector('#box3').classList.add('greenbox');

    document.getElementById('box4').classList.remove('redbox');

	function box4toggle(){
    	document.getElementById('box4').classList.toggle('redbox');
    }
  </script>

</body>
</html>

🔽실행 결과

=> '네번째박스토글'버튼을 누르면서 웹 브라우저의 개발자도구를 살펴보았다. 네번째박스토글 버튼을 누를 때마다 Elements > body > div id="box4"의 클래스에 redbox 클래스가 추가되었다가 삭제되기를 반복한다.

✅메서드로 속성 조작하기

속성값 가져오기 : 노드.getAttribute("속성명");
속성값 설정 : 노드.setAttribute("속성명", "속성값");
속성 삭제 : 노드.removeAttribute("속성명");

<body>

  <a href="https://www.naver.com" target="_blank">누르면사이트이동</a>

  <script>

    const atag = document.querySelector('a');
    console.log(atag.getAttribute("href"));
    console.log(atag.getAttribute("target"));
    atag.setAttribute("href", "https://www.daum.net"); //속성값을 바꿈
    console.log(atag.getAttribute("href"));

  </script>

</body>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    button{
      margin-top: 10px;
      color: white;
      background-color: black;
    }
  </style>
</head>
<body>

  <a href="https://www.naver.com" target="_blank">누르면사이트이동</a>
  <br>
  <button onclick="changeUrl()">네이버를다음으로</button>

  <script>

    const atag = document.querySelector('a');
    console.log(atag.getAttribute("href"));
    console.log(atag.getAttribute("target"));

    function changeUrl(){
      atag.setAttribute("href", "https://www.daum.net");
    }
  </script>

</body>
</html>

📖노드 추가/삭제

노드 생성

요소 노드 생성 : createElement()

텍스트 노드 생성 : createTextNode()

속성 노드 생성 : createAttribute()

노드 연결

자식 노드 연결 : 기준노드.appendChild(자식노드);

속성 노드 연결 : 기준노드.setAttributeNode(속성노드);

노드 삭제

자식 노드 삭제 : 부모노드.removechild(자식노드);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="container">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
  </div>

  <script>
    const newE1 = document.createElement("a"); //요소 노드 생성

    const linkText = document.createTextNode("링크글자"); //텍스트 노드 생성
    const linkHref = document.createAttribute("href"); //속성 노드 생성
    linkHref.value = "https://www.naver.com"; //속성값 넣기

    const linkTarget = document.createAttribute("target");
    linkTarget.value = "_blank";

    newE1.appendChild(linkText);
    newE1.setAttributeNode(linkHref);
    newE1.setAttributeNode(linkTarget);

    document.body.appendChild(newE1); //노드 연결

    const p2 = document.querySelector("#p2");
    p2.parentNode.removeChild(p2); //노드 삭제

  </script>
</body>
</html>