DOM 기초 - DOM, Window, Array

728x90

1) DOM / BOM

1-1) 정의 및 구분
1-2) Window(전역객체)
1-3) window.document 내의 메서드

2) Javascript 배열

2-1) push / pop
2-2) splice / slice
2-3) 선형검색(완전탐색)
2-4) 코드 예시 - Lotto

1) DOM / BOM

1-1) 정의 및 구분

DOM(Document Object Model)

- 여기서 문서는 html을 의미함!!

- DOM 또한 Javascript로 조작하지만 대부분의 사람들은 이 둘을 구분하여 배우려 함!!

- DOM: Javascript로 HTML을 조작하는 기능을 '브라우저'로 구현한 것

- 브라우저는 HTML, CSS, Javascript를 해석해줌!

BOM(Browser Object Model)

- BOM: 브라우저가 문서 이외의 조작(뒤로 가기 등)을 하거나 데이터를 저장하는 것 등을 수행하기 위해 제공하는 추가 객체

- DOM과 BOM을 묶어서 일명, 'Web APIs'라 함!!

Web APIs(Application Programming Interface): Javascript로 브라우저를 조작하는 것을 만드는 것을 말함

DOM(Document Object Model)
BOM(Browser Object Model)

1-2) Window(전역객체)

console.log(this); // window(전역객체) 객체가 출력됨!!
console.log("hello world");

// Javascript가 실행되면 기본적으로 'window'라는 객체를 제공해 줌!!

console.log(this === window); // true
// >> this와 window가 동일함을 뜻함!!(함수 밖에서 쓰는 객체는 곧 window 객체임을 의미함!)

// 즉, 힙이라는 공간에 'window'가 생기고 시작함!

// alert은 메서드(함수)이기에 아래와 같은 방법으로 호출하여 사용 가능함!!
// window.alert("경고합니다!"); // 경고창

const a = window.prompt("give me a data");
console.log(a);


// time()
// timeEnd()
console.log(window.console);

// setTimeout
// setInterval

// DOM
console.log(window.document);
// 즉, DOM은 window.document 안에 들어가 있는 것들(메서드)이 전부 DOM이다!!

const title = window.document.getElementById("title");
// console.log(title);

title.innerHTML = "DOM에 오신 것을 환영합니다!";

// window라는 전역객체는 기본적으로 생략해서 사용 가능하다!!
// 우리 수업의 목적: document 안에 있는 메서드를 많이 알고, 이를 사용하기 위해 훈련하는 데에 초점을 맞춤!


// 요약
console.log(this); // window 객체 출력함!
console.log(this === window); // true

/*
	잘 쓰이는 window 메서드
	- console.log()
	- alert()
	- prompt()
*/

// window.document
// window는 생략이 가능하다!

console.log(document);
// >> document 안에 나오는 메서드들을 사용할 줄 알면 된다!!

1-3) window.document 내의 메서드

Javascript

// DOM

console.log(window.document);
// 즉, DOM은 window.document 안에 들어가 있는 것들(메서드)이 전부 DOM이다!!

const title = window.document.getElementById("title");
// console.log(title);

title.innerHTML = "DOM에 오신 것을 환영합니다!";

const sp = document.getElementsByTagName("span");
console.log(sp); // (중요!!) 결과를 배열로 받아서 출력함!!

const domTitle = document.getElementById("DOM-title");
const spList = domTitle.getElementsByTagName("span");

console.log(spList);
console.log(spList.length); // 3

/*
// 1. 0~2 까지 반복하는
// 2. spList Element를 각각 출력
// 3. span1-1 span1-2 span1-3
for (let i = 0; i < spList.length; i++) {
  spList[i].innerHTML = "span1-" + (i + 1);
}
*/

const spList2 = document.getElementsByClassName("sp");
for (let i = 0; i < spList2.length; i++) {
  spList2[i].innerHTML = "span1-" + (i + 1);
}

/*
- getElementById(인자1) === window.document.getElementById()
>> 반환값이 객체(Object)이며, 만일 id를 잘못 기재할 시 'null'값을 반환함!!
>> 만일 동일한 id가 여러 개인 경우에는 맨 위에 태그만 출력해 줌(여러 태그를 한 번에 출력하려 하면 class를 사용해야 함!)
>> 인자1에 들어가는 값은 '태그의 id 명', 데이터 타입은 'string'이다!!
>> 복수 선택 안 됨!!

- getElementsByTagName(인자1) === window.document.getElementsByTagName()
>> 복수 선택 가능!!
>> 반환값은 배열이고, 배열 안에 들어간 값은 객체(Object)이다! => "Object[]"와 동일한 의미
>> 인자1에 들어가는 값은 '태그명', 데이터 타입은 'string'이다!!

- getElementsByClassName() === window.document.getElementsByClassName()
*/

/*
	document.getElementById();
	document.getElementsByClassName();
	document.getElementsByTagName();
*/

const gnb = document.querySelector("#gnb");
const list = document.querySelectorAll("#gnb > li");

/*
	바로 위의 list 변수에 'querySelectorAll' 결과를 담는 것을 나눠서 다른 방식으로 표현한 예시
	const gnb2 = document.getElementById('gnb');
	const list2 = gnb2.getElementsByTagName('li');
*/

console.log(gnb);
console.log(list);

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>
    <h1 id="title"></h1>
    <span>span2</span>
    <h2 id="DOM-title">
      DOM
      <span class="sp">span1</span>
      <span class="sp">span1</span>
      <span class="sp">span1</span>
    </h2>
    <script src="./public/js/index.js" type="text/javascript"></script>
  </body>
</html>

CSS

/* 모든 span 태그를 전부 선택함! */
span {

}

/* span 태그 중 class가 'sp'인 span 태그들만 선택함 */
.sp{

}

/* span 태그 중 id가 'DOM-title'인 h2 태그의 자식 태그에 해당하는 span 태그들만 선택함! */
#DOM-title > span {

}

2) Javascript 배열

2-1) push / pop

// Array(배열)
const arr = [
  {
    name: "ingoo",
  },
  {
    name: "ingoo2",
  },
  {
    name: "ingoo3",
  },
];

console.log(arr[2].name); // ingoo3

// #gnb > li:nth-child(2) => 'hello world!'로 텍스트 바꾸기
list[1].innerHTML = "hello world!";


// 배열(참조형)
// const arr2 = new Array(); // 배열 생성자 문법
const arr = ["apple", "banana", "orange"];
const arr2 = []; // 배열 리터럴 문법

console.log(arr === arr2); // false

console.log(arr[0]); // apple
console.log(arr[2]); // orange
console.log(arr[1]); // banana
console.log(arr.length); // 3

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// 새로운 요소를 만들어 값 추가하기
/*
기본적인 방법
arr[3] = "melon";
console.log(arr);
*/

// push 메서드 사용
arr.push("melon"); // push: 배열의 맨마지막 요소에 값이 추가됨!!
console.log(arr);

// 1 ~ 100까지의 숫자를 빈 배열을 만들어 순서대로 값 추가하기
const arr3 = []; // length : 0
/*
push 메서드를 사용하지 않은 기본적인 for 문을 사용한 방법
for (let i = 0; i < 100; i++) {
  arr3[i] = i + 1;
}
*/

for (let i = 1; i <= 100; i++) {
  arr3.push(i);
}
console.log(arr3);

// 과일을 0~3까지 출력
for (let i = 0; i, i < arr.length; i++) {
  console.log(arr[i]);
}

arr.pop(); // pop: 배열의 마지막 요소를 삭제함!!
console.log(arr);

2-2) splice / slice

// splice
const arr5 = [];
for (let i = 1; i <= 6; i++) {
  arr5.push(i);
}

// splice 인자값 >> 원본 배열을 변형시킴!!
// 인자1: 삭제할 인덱스 값
// 인자2: 삭제할 요소 개수
arr5.splice(2, 1);
console.log(arr5); // [1, 2, 4, 5, 6] => length: 5

// slice 인자값 >> 원본 배열을 변형시키지 않고, 수정사항을 반영한 새로운 배열을 반환함!!
// 인자1: 삭제를 시작할 인덱스 값
// 인자2: 삭제를 종료할 인덱스 값(해당 인덱스 값 미포함 === 해당 인덱스 값 미만)
const arr6 = arr5.slice(2, 4);
console.log(arr5); // [1, 2, 4, 5, 6] => 원본 배열을 변형시키지 않음!!
console.log(arr6); // [4, 5]

2-3) 선형검색(완전탐색)

// 선형 검색(Linear search) or 완전탐색
// length : 10
// [10, 6, 3, 8, 21, 5, 8, 12, 99, 7]
// 위의 배열에서 값이 5에 해당하는 요소의 index 찾기
// 단, 해당 값이 없을 경우에는 '-1'을 출력할 것!!
function linearSearch(array, target) {
  const length = array.length;
  for (let i = 0; i < length; i++) {
    if (array[i] === target) {
      return i;
    }
  }
  return -1;
}

const search1 = linearSearch([10, 6, 3, 8, 21, 5, 8, 12, 99, 7], 21);
const search2 = linearSearch([10, 6, 3, 8, 21, 5, 8, 12, 99, 7], 99);
const search3 = linearSearch([10, 6, 3, 8, 21, 5, 8, 12, 99, 7], 8);
const search4 = linearSearch([10, 6, 3, 8, 21, 5, 8, 12, 99, 7], 100);
console.log(search1); // 4
console.log(search2); // 8
console.log(search3); // 3
console.log(search4); // -1

2-4) 코드 예시 - Lotto

Javascript

console.log(Math.random() * 10); // Math.random(): 0.0 ~ 0.9의 범위 내에서 랜덤 값을 뽑아줌!!

// 로또
console.log(Math.floor(Math.random() * 45))

// 1. 1 ~ 45까지 배열에 담음
// 2. 랜덤 숫자로 6개를 뽑을 예정
// 2-1. 랜덤 숫자를 6번 뽑기
const lottoNum = []; // 1 ~ 45
const result = []; // 랜덤 6개
const lottoBox = document.querySelectorAll("#gnb > li");

for (let i = 1; i <= 45; i++) {
  lottoNum.push(i);
}

for (let i = 0; i < 6; i++) {
  const number = Math.floor(Math.random() * 45) + 1;
  //   lottoNum[number - 1]
  lottoNum.splice(number - 1, 1);
  result.push(number);
}
console.log(result);

for (let i = 0; i < result.length; i++) {
  lottoBox[i].innerHTML = result[i];
}

※ 위의 로또 번호 구하는 코드는 현재 에러(중복 숫자 추출 등)를 포함하고 있는 코드이므로 추후 수정하여 다음 게시글에 재업로드할 예정!!

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>
    <style>
      #gnb > li {
        display: inline-block;
        font-size: 40px;
        background: black;
        color: #fff;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        text-align: center;
        line-height: 80px;
        margin: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Logo</h1>
    <ul id="gnb">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <script src="./public/js/array.js" type="text/javascript"></script>
  </body>
</html>

+) 어림수 관련 내장함수

Math.floor
// 소수점 첫째 자리에서 내림(버림).
// ex) 3.1은 3, -1.1은 -2가 됨.

Math.ceil
// 소수점 첫째 자리에서 올림.
// ex) 3.1은 4, -1.1은 -1이 됨.

Math.round
// 소수점 첫째 자리에서 반올림.
// ex) 3.1은 3, 3.6은 4, -1.1은 -1이 됨.

Math.trunc (Internet Explorer에서는 지원하지 않음)
// 소수부를 무시.
// 3.1은 3이 되고 -1.1은 -1이 됨.

+) 객체(참조형) 생성 방법

const obj = {}; // 객체 리터럴 문법
const obj2 = new Object(); // 객체 생성자 문법

저작자표시

'DOM' 카테고리의 다른 글

DOM 기초(6) - 메뉴 / 서브메뉴, 이미지 슬라이드, 로또 (0)	2022.11.14
DOM 기초(5) - 이미지 슬라이드, preview / next 버튼 구현 (0)	2022.11.11
DOM 기초(4) - setTimeout, setInterval, single thread, event loop (0)	2022.11.10
DOM 기초(3) - DOMContentLoaded, Form 태그 이벤트, Element 생성 (0)	2022.11.09
DOM 기초(2) - Event, 코드 실습(Lotto) (0)	2022.11.08

CodeTraveler

DOM 기초 - DOM, Window, Array

'DOM' 카테고리의 다른 글

티스토리툴바

DOM 기초 - DOM, Window, Array

'DOM' 카테고리의 다른 글

'DOM' Related Articles

티스토리툴바