JavaScript | DOM & document
DOM (Document Object Model)
- 페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델
- 역할: HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 이어줌
JavaScript가 웹 페이지에 접근하고, 페이지 수정하는 것을 가능하게 함
document (전역객체)
-
JavaScript의 document 객체: DOM 구조를 접근하는 관문. HTML 문서를 나타낸다고 할 수 있음.
js가 html에 접근할 때 사용
-
DOM트리의 root node에 접근하게 해줌
요소(element) / 요소의 속성(attribute) / 요소의 내용(content) 에 접근 가능
- class, id 추가 & style 수정 가능
- 내용(content) : innerHTML으로 접근 / 수정
// 1.
document.body.innerHTML = '바꿀 값';
// 2.
let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';
// 3.
createElement(tagName)
//4.
const 변수명 = document.getElementsByClassName('클래스명')[0];
-
- body태그 내부 모든 요소를 '바꿀 값'으로 전부 교체
- 내용을 전부 대체 시켰다면 appendChild함수는 요소의 뒤쪽에 붙여줌
-
-
특정 element 접근 (css selector (class, id, tag 등)로 가능)
- JavaScript에서 style 수정할 때
hypen(-) 사용불가
camelCase 사용
-
- element 생성
- 아직 HTML의 어디에 들어가야 할지 지정해준 것 아님
- 생성 후 어딘 가의 element에 append시켜줘야 함.
-
- class로 요소 찾는 함수와 index
-
.getElementsByClassName('클래스명')
'클래스명'이 클래스이름인 요소를 찾음
-
[index]
앞의 함수가 요소들을 찾으면 배열로 반환 → 원하는 위치의 index 찾음
-
주의
-
함수가 찾은 요소 1개→ 요소로 return
함수가 찾은 요소들→ 배열로 return
Author And Source
이 문제에 관하여(JavaScript | DOM & document), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@katej927/JavaScript-DOM-document
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
JavaScript의 document 객체: DOM 구조를 접근하는 관문. HTML 문서를 나타낸다고 할 수 있음.
js가 html에 접근할 때 사용
DOM트리의 root node에 접근하게 해줌
// 1.
document.body.innerHTML = '바꿀 값';
// 2.
let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';
// 3.
createElement(tagName)
//4.
const 변수명 = document.getElementsByClassName('클래스명')[0];
- body태그 내부 모든 요소를 '바꿀 값'으로 전부 교체
- 내용을 전부 대체 시켰다면 appendChild함수는 요소의 뒤쪽에 붙여줌
-
특정 element 접근 (css selector (class, id, tag 등)로 가능)
- JavaScript에서 style 수정할 때hypen(-) 사용불가
camelCase 사용
- element 생성
- 아직 HTML의 어디에 들어가야 할지 지정해준 것 아님
- 생성 후 어딘 가의 element에 append시켜줘야 함.
- class로 요소 찾는 함수와 index
-
.getElementsByClassName('클래스명')
'클래스명'이 클래스이름인 요소를 찾음
-
[index]
앞의 함수가 요소들을 찾으면 배열로 반환 → 원하는 위치의 index 찾음
주의
-
함수가 찾은 요소 1개→ 요소로 return
함수가 찾은 요소들→ 배열로 return
Author And Source
이 문제에 관하여(JavaScript | DOM & document), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@katej927/JavaScript-DOM-document저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)