문서 객체 모델(Document Object Model)
Html문서나 XML문서 등을 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
간단한 HTML 예를 들어보면
<html lang="en">
<head>
<title>초 간단한 HTML문서</title>
</head>
<body>
<h2>초 간단 HTML</h2>
<p id="subject">제목</p>
</body>
</html>
위 HTML의 트리구조를 살펴보자
document 객체
<html> - lang
<head> <body>
<title> <h2> <p>
초 간단한 HTML문서 초 간단 HTML 제목
트리구조를 접근하는 방법을 제공하는 것을 DOM이라고 한다.
document 객체
웹 페이지 그 자체를 의미하는 객체입니다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로부터 시작해야합니다.
메소드
getElementsByTagName() : 해당 태그 이름의 요소를 모두 선택합니다.
getElementById() : 해당 아이디의 요소를 선택합니다.
getElementsByClassName() : 해당 클래스에 속한 요소를 모두 선택합니다.
getElementsByName() : 해당 name 속성값을 가지는 요소를 모두 선택합니다.
querySelectorAll() : 해당 선택자로 선택되는 요소를 모두 선택합니다.
노드(node)
HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장합니다. HTML DOM은 노드들을 정의하고, 그 사이의 관계를 설명해주는 역할을 합니다. HTML 문서의 정보는 '노드 트리'라고 불리는 계층적 구조에 저장됩니다. '노드 트리'는 노드들의 집합이며, 노드간의 관계를 보여줍니다. '노드 트리'는 최상위 레벨인 '루트 노드'로부터 시작하고, 가장 낮은 레벨인 '텍스트 노드'까지 내려갑니다. HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근 할 수 있습니다.
노드종류
문서 노드(document node) : 문서 전체를 나타내는 노드
요소 노드(element node) : HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드입니다.(태그 노드를 말한다)
속성 노드(attribute node) : HTML 요소의 속성은 속성 노드이며(lang 같은 속성), 요소 노드에 관한 정보를 가지고 있습니다.
텍스트 노드(text node) : HTML 문서의 모든 텍스트는 텍스트 노드입니다.
주석 노드(comment node) : HTML 문서의 모든 주석은 주석 노드입니다.
노드 간의 관계
parentNode : 부모 노드
childNodes : 자식 노드 리스트(자식 태그들)
firstChild : 첫번째 자식 노드
lastChild : 마지막 자식 노드
nextSibling : 다음 형제 노드
previousSibling : 이전 형제 노드
노드가 트리 형식으로 되어 있다보니 이런 방식으로 다른 노드들을 찾을 수 있게된다.
* 빈 텍스트
익스플로러를 제외한 대부분의 브라우저는 요소와 요소 사이에 빈 공백 또는 개행이 이루어지면 텍스트 노드로 처리됩니다. 따라서 노드간의 관계에 텍스트 노드가 중간에 사용되면 노드 이동이 불명확해 질 수 있습니다.
<nav id="gnb">
<ul>
<li class="first">내용 1</li>
<li>내용 2</li>
<li>내용 3</li>
</ul>
</nav>
window.onload = () => { // 브라우저가 다 읽히면 그 다음 실행하라는 window 메소드
const gnb = document.getElementById('gnb');
console.log(gnb.children[0].firstElementChild); // 엘레멘트차일드는 태그를 말하는 것 첫번째 li태그가 출력된다.
console.log(gnb.children[0].firstChild);
// <ul>태그 뒤에 엔터가 들어갔기때문에 #text가 나온다. 위와 같은 값을 얻으려면 뒤의 공백을 없애야한다.
}
노드 추가
appendChild() : 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가합니다.
insertBefor() : 새로운 노드를 특정 자식 노드 바로 앞에 추가합니다.
insertData() : 새로운 노드를 텍스트 데이터에 새로운 텍스트로 추가합니다.
노드 생성
createElement() : 새로운 요소 노드를 만들 수 있습니다.
createAttribute() : 새로운 속성 노드를 만들 수 있습니다. 만약 같은 이름의 속성 노드가 이미 존재한다면, 기존 속성 노드는 새로운 속성 노드로 대체됩니다.
createTextNode() : 새로운 텍스트 노드를 만들 수 있습니다.
노드 제거
removeChild() : 자식 노드 리스트에서 특정 자식 노드를 제거합니다. 성공적으로 노드가 제거되면 노드를 반환합니다. 노드가 제거될 때에는 제거되는 노드의 모든 자식들도 다같이 제거됩니다.
removeAttribute() : 속성의 이름을 이용하여 특정 속성 노드를 제거합니다.
노드의 복제
cloneNode() : 기존의 존재하는 노드와 동일한 새로운 노드를 생성하여 반환합니다
* 복제할노드.cloneNode(자식노드 복제여부);
자식노드 복제여부 : 전달될 값이 true면 복제되는 노드의 모든 속성과 자식 노드도 같이 복제되고, false면 속성 노드만 복제하고 자식 노드를 복제하지 않습니다.
노드의 교체
replaceChild() : 기존의 요소 노드를 새로운 요소 노드로 교체할 수 있습니다.
* 교체된 노드 = 부모노드.replaceChild(새로운 자식노드, 기존 자식노드);
replaceData() : 텍스트 노드의 텍스트 데이터를 바꿀 수 있습니다.
* 텍스트 노드.replaceData(오프셋(인덱스), 교체할 문자수, 새로운 데이터);
폼(Form) 객체
일반적인 폼에 접근할 때 사용합니다. id 또는 name을 이용하여 접근합니다. 또한 documents.forms 컬렉션을 이용하여 접근할 수 도 있습니다.
<form name="myform" id="regform" method="post" action="regist.php">
아이디:<input type="text" name="userid" id="id"><br>
비밀번호:<input type="password" name="userpw" id="pw"><br>
<input type="submit" value="전송">
</form>
폼에 접근
const frm = document.myform;
const frm = document.getElementById('regfrom');
아이디 value 접근
const id = document.myform.userid.value; // input에 아이디를 적으면 value값으로 가져와 id에 저장
const id = frm.userid.value; // 위와 같은 문장이다.
const id = frm.elements[0].value // 위와 같은 문장이다.
const id = frm.elements['userid'].value; // 위와 같은 문장이다.
const id = document.getElementById('id').value // 위와 같은 문장이다.
이벤트(Event)
이벤트란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미합니다. 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있습니다. 따라서 자바스크립트를 비동기식 이벤트 중심의 프로그래밍 모델이라고 합니다.
이벤트 타입(Event Type)
이벤트 타입은 발생한 이벤트의 종류를 나타내는 문자열로 이벤트명이라고도 합니다. 가장 많이 사용하는 키보드, 마우스, HTML DOM, window 객체 등을 처리하는 이벤트가 폭 넓게 제공되고 있습니다.
이벤트 타겟(Event Target)
이벤트가 일어날 객체를 의미합니다.
이벤트 리스너(Event Listener)
이벤트가 발생했을 때 그 처리를 담당하는 함수를 의미합니다. 이벤트 핸들러라고도 부르며, 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행합니다.
<input type="button" onclick="sendit()" value="가입완료">
------ ------- --------
이벤트타겟 이벤트명 이벤트리스너
'Front-End > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 정규식 (0) | 2021.01.29 |
|---|---|
| [JavaScript] 이벤트 객체 (0) | 2021.01.25 |
| [JavaScript] 내장 객체 (0) | 2021.01.17 |
| [JavaScript] forEach문 도대체 이 녀석은 뭘까 ? (4) | 2021.01.15 |
| [JavaScript] 객체 (Object) (0) | 2021.01.13 |
댓글