DOM BOM
1. DOM
- 문서 객체 모델 (Document Object Model)은 HTML, XML 문서의 프로그래밍 interface이며,
JavaScript로 html을 조작하는 기능을 '브라우저'가 구현한 것이다.
브라우저는 기본적으로 HTML, CSS, JS를 해석하는 능력이 있는데 JS를 이용해서 HTML, CSS를 조작할 수 잇는 기능을DOM이라고 한다.
2. BOM
- 브라우저 객체 모델 (Browser Object Model)은 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체
navigator 객체는 브라우저와 운영체제에 대한 정보를 제공한다.
location 객체는 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경(redirect)할 수 있게 해 준다.
alert/confirm/prompt 역시 BOM의 일부입니다. 문서와 직접 연결되어 있지 않지만, 사용자와 브라우저 사이의 커뮤니케이션을 도와주는 순수 브라우저 메서드이다.
이런 DOM과 BOM을 합쳐서 Web APIs라고 부른다.
Web APIs(Application Programming interface) : 비동기로 돌아간다.
DOM을 잘 다루려면 객체와 메서드, 함수를 잘 다룰줄 알아야한다.
JS는 browser에서는 window라는 전역 객체를 만들어 주는데,
console.log(this) // result : window ...
console.log(window)
console.log(this === window) // truethis를 출력 해보니 window가 나온다. 즉 윈도우객체 안에서 실행 된다고 생각해도 된다.
window 객체를 봐보니
console.log(), alert(), prompt() 등이 있다.
점 표기법으로 내장 메서드들을 불러올 수 있지만 window객체 내에서 실행하고 있기 때문에 window를 생략할 수 있다.
console.log(Documnet) // window.document
document안에 있는 메서드를 사용할 줄 알아야 html의 태그 속성에 접근할 수 있다.
getElementById() : 아이디값을 찾아 엘리먼트에 접근한다.
getElementsByTagname() : 태그 이름을 찾아 접근한다.
getElementsByClassName() : 클래스 이름을 찾아 접근한다.
window.document.getElementById()
- 복수 선택이 안된다. 무조건 1개만.
id의 이름이 중복된다면 먼저 나온거에 실행된다.
getElementById(인자)
<div id='header'>
</div>document.getElementById('header2') //null
const header = document.getElementById('header') //object인자1에 들어가는 값은 "header"로 데이터 타입은 String형이다.
return
//objectwindow.document.getElementsTagName()
복수 선택이 가능하다.
문법
getElementsTagName(인자1)
return
//object[] => 배열로 반환함. 배열 안에 들어있는 값들은 객체이다.Array
객체 생성방법 (두 방법은 동일한 의미)
const obj2 = new Object()
const obj = {}
// 객체는 중괄호
배열 생성방법도 똑같다
const arr2 = new Array()
const arr = []
// 배열은 대괄호
console.log(arr === arr2) // > false (참조)
(1,2,3..../'a','b','c'...)const arr = ["apple", "banana", "orange"]
// apple
console.log(arr[0])
// orange
console.log(arr[2])
// banana
console.log(arr[1])
// 총배열갯수
console.log(arr.length) > 3배열에 요소추가
arr[3] = 'melon' // 방법1.
arr.push('melon') // 방법2. 맨 마지막 요소 바로 뒤에 새로운 요소를 추가.방법2(push 메서드 사용)가 더 간편하다.
배열에서 요소를 빼고 싶을 때는
arr.pop() // 배열의 마지막요소를 삭제한다.
배열 추가 .push() : 괄호 안에 추가할 요소 이름 기입
배열 삭제 .pop() : 괄호를 비우면 마지막 요소 삭제
const arr5 = [1,2,3,4,5,6]
arr5.push(7)
console.log(arr5) // > [1, 2, 3, 4, 5, 6, 7]
arr5.pop() // 마지막 요소 반환
console.log(arr5) // > [1, 2, 3, 4, 5, 6]배열 중간에 요소를 삭제하거나 반환하는 방법
splice(A,B)
인자1(A): 삭제할 인덱스값
인자2(B): 삭제할 요소 갯수 (인자1을 시작점으로 차례대로 삭제됨)
arr5.splice(2,1)
console.log(arr5) // > [1, 2, 4, 5, 6] (3, 4 삭제)
slice(A,B)
-인자1(A): 삭제를 시작할 인덱스값
-인자2(B): 삭제를 종료할 인덱스값 (미만)
const arr6 = arr5.slice(2, 4)
// slice는 선택한 만큼 자르고 새로운 배열(참조)을 만들어서 리턴.
console.log(arr6) // > [4, 5] 출력
slice는 잘 쓰지 않는다...
++)
// menu
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}선형 검색 (Linear search) (= 완전 탐색)
length : 10인 배열
[10, 6, 3, 8, 21, 5, 8, 12, 99, 7]
값이 21인 요소의 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) // > 4 출력
// const search1 = linearSearch([10, 6, 3, 8, 21, 5, 8, 12, 99, 7], 99) // > 8 출력
// const search1 = linearSearch([10, 6, 3, 8, 21, 5, 8, 12, 99, 7], 8) // > 3, 6 출력
const search1 = linearSearch([10, 6, 3, 8, 21, 5, 8, 12, 99, 7], 100) // > -1 출력 (없음)