DOM (Document Object Model)
문서 객체 모델. 객체지향 모델로서 구조화된 문서를 표현하는 형식.
HTML,XML문서의 프로그래밍 인터페이스와 문서의 구조화된 표현을 제공한다. 구조화된 표현을 통해 문서의 구조와 스타일,내용 등을 변경할 수 있다.
Document
Document 객체는 웹 페이지를 의미한다. 웹페이지 내의 HTML 요소에 접근하고자 할 때는 Document 객체를 통해야 한다.Document 메소드
• HTML 요소의 선택 (getElement/querySelector)
• HTML 요소의 생성 (createElement/write)
• HTML 이벤트 핸들러 추가 (요소.onclick=function(){})
• HTML 객체의 선택
HTML 요소의 선택
document.getElementById('apple') //apple이라는 id의 요소를 선택
document.getElementsByClassName('fruit') //fruit class의 요소 선택
document.getElementsByName() //name 속성값을 가지는 요소를 모두 선택
//CSS에서 사용하는 것과 동일.
document.querySelectorAll()
//해당 선택자로 선택되는 요소들을 모두 선택
document.querySelector() //해당 선택자로 선택되는 요소를 한 개 선택
getElementById에서 Element인 이유는 Id는 한 개만 있을 수 있기 때문이다.
getElement~들과 달리, querySelector는 id와 클래스를 선택할 때 선택자(#id .class)를 사용해야 한다.
querySelectorAll()은 노드 리스트를 반환하고, querySelector는 해당 노드만을 반환한다.
HTML 요소의 생성과 변경
document.createElement() //지정된 HTML요소를 생성. HTML 오브젝트를 출력.
document.write() //출력 스트림을 통해 텍스트를 화면에 출력
var apple=document.getElementById('apple');
apple.innerHTML='apple is red';
apple.style.color='red';
createElement(
요소를 선택한 다음 innerHTML로 내용을 바꾸거나 style을 변경할 수 있다.
HTML 이벤트 핸들러 추가
button.onclick=function(){}이벤트 발생시 함수 실행
DOM의 트리 구조
이미지 출처: 엘리스
head 아래 title, title 안에 자바스크립트 기초.
body 아래 article,article 아래에 header,section. section아래에는 header1을 담은 header.
자바스크립트와 DOM
// HTML <li> 요소를 선택
var selectedItem = document.getElementsByTagName("li");
// 아이디가 “id"인 요소를 선택
var selectedItem = document.getElementById(“id");
// 클래스가 "odd"인 모든 요소를 선택
var selectedItem = document.getElementsByClassName("odd");
// name 속성값이 "first"인 모든 요소를 선택
var selectedItem = document.getElementsByName("first");요소를 선택 후, 변수에 집어넣어두면 편하다.
// 아이디가 "even"인 요소를 선택
var selectedItem = document.getElementById("even");
// 선택된 요소의 텍스트 색상을 변경
selectedItem.style.color = "red";
// 아이디가 "text"인 요소를 선택
var str = document.getElementById("text");
// 선택된 요소의 내용을 변경
str.innerHTML ="요소의 내용을 바꿉니다";
특정 요소를 담고 있는 변수를 활용해 style을 변경하거나 내용을 변경할 수 있다.
NODE
이미지 출처: 엘리스
노드: HTML DOM에서 정보를 저장하는 계층적 단위
노드 트리는 노드들의 집합으로, 노드간의 관계를 나타낸다.(위 이미지 참고)
자바스크립트에서 HTML DOM을 이용해 노트 트리에 포함된 모든 노드에 접근할 수 있다.
<title> 자바스크립트 기초</title>title 태그로 묶인 자바스크립트 기초도 노드에 해당한다.
이미지 출처: 엘리스
모든 노드는 서로 계층적 관계를 맺고 있다.
루트 노드인 html은 head와 body의 부모 노드이고, head와 body는 서로 형제 노드이다.
노드의 종류
<div class='hello'>World</div>
//div는 요소 노드, class='hello'는 속성노드, world는 텍스트 노드, 이 주석은 주석노드• 문서 노드(document node) : HTML 문서 전체를 나타내는 노드
• 요소 노드(element node): 모든 HTML요소는 요소 노드이다. 속성 노드를 가질 수 있는 유일한 노드.
• 주석 노드: HTML문서의 모든 주석은 주석노드에 해당한다. 잘 사용하지 않는다.
• 속성 노드(attribute node) :모든 HTML 요소의 속성은 속성 노드이며,
요소 노드에 관한 정보를 가진다. 하지만 해당 요소 노드의 자식 노드(child node)에는
포함되지 않는다.
• 텍스트 노드(text node) :HTML 문서의 모든 텍스트는 텍스트 노드이다. (p태그 내의 텍스트 등)
노드의 값
// HTML 문서의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택
document.childNodes[0].nodeName;
// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 노드값을 선택
document.getElementById("heading").firstChild.nodeValue;
// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 타입을 선택
document.getElementById("heading").firstChild.nodeType;
//아이디가 heading인 요소의 노드 타입. 숫자로 표현된다.
document.getElementById("heading").nodeType;childNodes와 firstChild는 Node의 프로퍼티 중 하나인데, 이외에도 lastChild,nextSibling,parentNode 등이 있다.
이벤트
웹브라우저가 알려주는 HTML 요소에 대한 사건의 발생. 자바스크립트는 발생한 이벤트(클릭,호버)에 반응해 특정한 동작을 수행할 수 있다.
이벤트 타입
// 마우스 클릭 이벤트 예시
<p onclick="changeText(this)">여길 클릭하세요!</p>
<script>
function changeText(element) {
element.innerHTML = "내용이 바뀌었습니다!";
}
</script>이벤트의 종류 (폼, 키보드, 마우스, HTML DOM, Window 객체 등)를 나타내는 문자열.
약 200여가지의 이벤트 종류가 있고 모두 기억할 필요는 없다.
주로 사용되는 것은 (click,dbclick-더블클릭,mousedown-마우스버튼눌렀을 때,mouseup-마우스 버튼 떼었을 때,keydown-키를 눌렀을 때 실행) 정도가 있다.
이벤트 핸들러
// 이 함수는 HTML 문서가 로드될 때 실행됨.
window.onload = function() {
// 아이디가 "text"인 요소를 선택함.
var text = document.getElementById("text");
text.innerHTML = "HTML 문서가 로드되었습니다.";
}이벤트가 발생했을 때 그 처리를 담당하는 함수.
지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킨다.
예를 들어 버튼을 누르는 이벤트가 발생하면, 'Say Hello'를 표시해야한다고 하면
이때 'Say Hello'를 표시한다 는 이벤트 핸들러다.
위 코드에서 객체는 window, Event는 onload, Event Handler는 function(){}부분.
e.preventDefault();e태그의 기능을 정지시키는 메서드
이벤트 리스너
DOM 객체에서 이벤트가 발생할 경우, 이벤트 처리 핸들러를 추가할 수 있는 오브젝트다.
DOM객체.addEventListner(이벤트타입,실행할 함수명(생략가능),옵션(생략가능))
button.addEventListenr('click',DarkMode,이벤트 타입: click,mousedown 등
실행할 함수: 이벤트가 발생할 때 실행할 함수의 이름
옵션: 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션
- type: 수신할 이벤트의 유형을 나타내는 대소문자 구분 문자열
- listener: 지정한 이벤트로 수신할 객체. 함수여야 한다.
실습하면서 배운 것들!
1-1
//특정 태그가 갖고 있는 속성값 가져옴
xx.getAttribute('href');
//href="ㅁㅁ" ㅁㅁ부분에 오는 속성값을 가져옴!
//특정 지점으로 스크롤
window.scrollTo({
'behavior':'smooth',
'top': xx.offsetTop });
//behavior에 smooth라는 값을 줘 부드럽게 이동하게 함
// top: xx 요소가 갖고 있는 현재 좌표값
//offsetTop():선택된 영역의 상단까지의 거리를 절대 좌표로 반환하는 메서드2-1 부드러운 내비게이션바~
document.document.querySelectorAll('a');
//여기서 aTags의 타입은 Object고 length도 출력할 수 있다.
//aTags[i]로 각각의 a태그를 갖고 올 수 있다.
window.scrollTo({
'behavior':'smooth',
'top': xx.offsetTop });
// 여기서 'top'은 스크롤이 끝났을 때, 화면의 최상단에 어떤 좌표 값이 위치할지를 의미한다.3-1 이미지 자동 스크롤~
//setInterval함수는 첫번째 인자로 함수를 받고, 두번째 인자로는 지정할 간격(ms)를 입력받는다.
setInterval(function(){
console.log('a');
},3000);//3초 간격으로 실행됨
//3초 간격으로 a를 출력함
//animate 함수로 애니메이션을 줄 수 있음
xxx.animate({
marginLeft:['0px','1024px']},
//왼쪽 마진을 0에서 1024로
{
duration:300, //0.3초동안
easing:'ease',//easing:속도
iterations:1,//반복:1회
fill:'both'; //어떻게 채울지
})
4-1 탭 버튼 구현~
xxx.classList.remove('.클래스명') // 요소에서 특정 클래스 제거
xxx.classList.add(',클래스명') // 요소에 클래스명 추가
nodeList.forEach(function(item) { // 배열의 모든 요소에 코드 적용
console.log(item)
})
