Browser APIs
: 웹 브라우저에 내장된 API로, 웹 브라우저가 현재 컴퓨터 환경에 관한 데이터를 제공 하거나, 오디오를 재생하는 등 여러가지 유용하고 복잡한 일을 수행할 수 있게 함
종류
- DOM
- Geolocation API : 지리정보
- WebGL : 그래픽
DOM (Document Object Model)
: 문서 객체모델 API
문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공
- 문서 구조, 스타일, 내용 등을 쉽게 변경
- HTML 콘텐츠를 추가, 제거, 변경하고, 동적으로 페이지에 스타일을 추가하는 등 HTML/CSS를 조작할 수 있음
- HTML 문서를 구조화 하여 각 요소를 객체 취급
- 단순한 속성 접근, 메서드 활용 뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작이 가능
웹 페이지는 일종의 문서 (document)
- 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 코드 자체로 나타나기도 함
- DOM은 동일한 문서를 표현, 저장, 조작하는 방법 제공
DOM은 웹 페이지의 객체 지향 표현이며 JavaScript와 같은 스크립트 언어를 사용하여 DOM을 수정할 수 있음
DOM 의 주요 객체
1) window
: DOM을 표현하는 창, 가장 최상위 객체 (작성 시 생략 가능)
- 탭 기능이 있는 브라우저에서는 각각의 탭을 각각의 window 객체로 나타냄
2) document object
: 브라우저가 불러온 웹 페이지
- 페이지 컨텐츠의 진입점의 역할을 하며, <body> 등과 같은 수많은 다른 요소들을 포함하고 있음
- window의 하위 속성 (window는 기본적으로 생략하기 때문에 document)
[참고]
Parsing (파싱)
: 구문 분석, 해석
- 브라우저가 문자열을 해석하여 DOM Tree로 만드는 과정
DOM 조작
1) Select (선택)
document.querySelector(seletor)
: 제공한 선택자와 일치하는 element 한 개 선택
- 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환 (없다면 null)
document.querySelectorAll(seletor)
: 제공한 선택자와 일치하는 여러 element를 선택
- 매칭 할 하나 이상의 셀렉터를 포함하는 유요한 CSS selector를 인자로 받음
- 제공한 CSS selector를 만족하는 NodeList를 반환
사용 예시)
<body>
<h1 id="title">DOM 조작</h1>
<p class="text">querySelector</p>
<p class="text">querySelectorAll</p>
<ul>
<li>Javascript</li>
<li>Python</li>
</ul>
<script>
console.log(document.querySelector("#title"))
console.log(document.querySelector(".text"))
console.log(document.querySelectorAll(".text"))
console.log(document.querySelectorAll("ul > li"))
</script>
</body>
-> NodeList에 querySelector를 사용하면 가장 첫번째 원소를 반환한다.
[참고] NodeList
- index로만 각 항목에 접근 가능
배열의 forEach 메서드 및 다양한 배열 메서드 사용 가능
querySelectorAll()에 의해 반환 되는 NodeList는 DOM의 변경사항을 실시간으로 반영하지 않음
ex) forEach 사용
liTags = document.querySelectorAll("ul > li")
liTags.forEach(element => {
console.log(element)
});
2) Manipulation (조작) - 생성, 추가, 삭제 등
document.createElement(tagName)
: 작성한 tagName의 HTML 요소를 생성하여 반환
Node.innerText
: Node 객체와 그 자손의 텍스트 컨텐츠를 표현
- 사람이 읽을 수 있는 요소만 남김
- 즉, 줄 바꿈을 인식하고 숨겨진 내용을 무시하는 등 최종적으로 스타일링이 적용된 모습으로 표현
Node.appendChild()
: 한 Node를 특정 부모 Node의 자식 NodeList 중 마지막 자식으로 삽입
- 한번에 오직 하나의 Node 만 추가할 수 있음
- 추가된 Node 객체를 반환
- 만약 주어진 Node가 이미 문서에 존재하는 다른 Node를 참조한다면 현재 위치에서 새로운 위치로 이동
Node.removeChild()
: DOM에서 자식 Node를 제거
- 제거된 Node를 반환
메서드 사용 예시)
// 요소 만들기
const title = document.createElement('h1')
// innerText 추가하기
title.innerText = "DOM 조작하기"
// 선택자로 div 태그 가져오기
const div = document.querySelector('div')
// 자식 요소로 추가하기
div.appendChild(title)
// 요소 삭제
div.removeChild(title)
속성 조회 및 설정
Element.getAttribute(attributeName)
: 해당 요소의 지정된 값을 반환
- 인자는 값을 얻고자 하는 속성의 이름
Element.setAttribute(name, value)
: 지정된 요소의 값을 설정
- 속성이 이미 존재하면 값을 갱신, 존재하지 않으면 지정된 이름과 값으로 새 속성을 추가
속성 설정 예시)
<head>
... 생략
<style>
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<h1 class="red">안녕하세요</h1>
<div></div>
<script>
const aTag = document.createElement("a")
// 속성 값 추가
aTag.setAttribute('href', 'https://google.com')
// innerText 추가하기
aTag.innerText = '구글'
// div 태그에 삽입
const div = document.querySelector('div')
div.appendChild(aTag)
const h1Tag = document.querySelector('h1')
// 이미 속성이 존재 하므로 blue 로 덮어 쓰기
h1Tag.setAttribute("class", "blue")
</script>
</body>
'Web > JavaScript' 카테고리의 다른 글
| JavaScript - 동기와 비동기 (0) | 2022.10.26 |
|---|---|
| JavaScript 심화 - Event (0) | 2022.10.24 |
| JavaScript 기초- Object (0) | 2022.10.19 |
| JavaScript 기초 - Array (0) | 2022.10.19 |
| JavaScript 기초 (0) | 2022.10.19 |
댓글