[JavaScript] DOM이란 무엇인가?

웹페이지

html, css : 보여지는 것

javascript: 보여지는것 컨트롤 하기 위함

html

<!DOCTYPE html>

<head></head>

<body>
    <div class="parent">
        <div>child1</div>
        <div>child2</div>
        <div>child3</div>
    </div>
</body>
</html>

javascript

const child1 ={
    nonType:1,
    nodeName: 'div'
    childNode=[],
    arrtibutes:[]
}

const parent = docuemnt.querySelector('parend')

parent.firstchild // #text
parent.childNodes // [div]
prenth.firstElementHild; // <div>child1</div>

html은 javascript 에게 그저 문자일 뿐! ->

❖ DOM ( Document Object Model )

html을 javascript 가 이해할 수 있는 object 형태로 변경한 것

그렇게 저장된 정보 = DOM Tree

node 객체로 바꾸어 추가적인 작업을 할 수 있게 함

조작하고 싶은 속성을 고치는데 필요한 메서드, 프로퍼티를 제공하는 것

트리구조 마크업언어이기 때문에 관계적인 성격이 유사함 (ex lastChild...)

parse

: 문자를 의미있는 객체로 바꾸는 것

node

: html이라면 하나하나 요소(?)라고 볼 수 있음 -> 여러개의 타입이 있음

❖ Document Node

document 로 element 찾고, 만들고 ...

html 문서 전반에 대한 정보

document.body

doctype : doctype이 뭔지

root node 부터 사용할 수 잇는 그러한 것들

∙ docuemnt.querySelector

∙ document.create....

❖ Element Node

element = html tag = 요소

∙getAttribute() : 값 얻기

∙setAttribute() : 값 지정

∙removeAttribute() : 값 제거

⭐️ classList()

: 메소드 제공

: toggle, add, remove

∙ parent.classList.toggle('bye')

'bye'라는 class 가 있으면 빼고 없으면 넣기

∙ parent.innerHTML = '<div> bye </div>'

❖ node 탐색 API

selector 문법을 이용하여 원하는 엘리먼트 찾기

getElementById()

id 정보를 이용하여 찾기

document.getElementById("search__button")
document.getElementById("search__button").id;
document.getElementById("search__button").className;

// 하위에 있는 객체 display 삭제
document.getElementById("search__button").style.display="none";

// 하위 객체 display : block 형태로
document.getElementById("search__button").style.display="block";

// 하위 객체에 text 넣기
document.getElementById("search__button").innderText="변화";

querySelector()

//class 검색
document.querySelector(".search__button");

//id 검색
document.querySelector("#search__button");

//body 태그 안의 a_button class
document.querySelector("body .a_button);

//a_button class 바로 안의 aaa_btn class 
document.querySelector(".a_button > .aaa_btn);

❖ node 탐색 API

<body>
	<div>hi</div>
</body>

var body = document.querySelector('body');

body.nodeType ; // 1


var div = document.querySelector('body > div');
div.nodeType ; //1

body.firstChild.nodeType ; //3

element_node: 1

text_node : 3

element 의 어떠한 text

❖ DOM 탐색

❖DOM 탐색

childNodes
firstChild
firstElementChild
parentElement
nextSibling
nextElementSibling

❖DOM 조작

elem

removeChild()
appendChild()
insertBefore()
cloneNode()
replaceChild()
closest() //상위로 올라가면서 근접 엘리먼트 찾기

❖ appendChild 메서드

var div = docuemnt.createElement('div');
var str = document.TextNode('오늘 하루 짱이야');
var p = document.querySelector('p');

//div 에 str 넣기
div.appendChild(str);

// p 태그에 div  넣기 
p.appendChild(div);

❖ innerHTML 메서드

getter & setter 역할 동시 가능

search__box class 내  3번쨰 자식
var base = docuemnt.querySelector("search__box tr:nth-child(3))");
serch__box class 내 table
var t = docuemnt.querySelector("search__box table");


//div 생성 
div.appendChild(str);

// t내의 base자리 앞에 div 삽입
t.insertBeford(div,base)

❖ innerText 메서드

getter & setter 역할 동시 가능

div의 text에 abc text 추가
div.innderText += "abc";

❖ innerAdjacentHTML 메서드

∙ brforebegin

∙ afterbegin

∙ beforeend

∙ afterend

var base = document.querySelector('div');
base.insertAdjacentHTML('afterbegin','<h1>hi</h1>);

❖ template 문법을 이용한 html 문자열 만들기

${ }

JSON + HTML => 새로운 HTML 문자열 만들기

-> appendchild

const data = {
	name: new Date().getDay();
}

const str = `<div><span>hi today is {data.name} </span></div>`

'📒 JavaScript' 카테고리의 다른 글

Node.JS express로 서버 구성하기 (5)	2021.02.23
자바스크립트의 객체 (0)	2021.02.22
이벤트 버블링, 이벤트 캡쳐링 - DOM의 이벤트 핸들링 (0)	2021.02.22
[JavaScript ] 이벤트핸들링 (0)	2021.02.16
자바스크립트, 함수형 프로그래밍 (0)	2021.02.08

[JavaScript] DOM이란 무엇인가?

❖ DOM ( Document Object Model )

❖ node 탐색 API

❖ node 탐색 API

❖ DOM 탐색

❖ template 문법을 이용한 html 문자열 만들기

'📒 JavaScript' 카테고리의 다른 글

댓글

티스토리툴바

[JavaScript] DOM이란 무엇인가?

❖ DOM ( Document Object Model )

❖ node 탐색 API

❖ node 탐색 API

❖ DOM 탐색

❖ template 문법을 이용한 html 문자열 만들기

'📒 JavaScript' 카테고리의 다른 글

관련글

댓글

티스토리툴바