오늘은 dom이라는 개념에 대해서 알아보겠습니다.
Dom이란 Document Object Model의 약자이며
html을 java script가 이해할 수 있게 객체로 만드는 것을 말한다.
즉, html 문서의 구조와 관계를 객체로 표현한 모델 이다
dom의 장점은 자바스크립트를 이용해서 엘리먼트의 속성값을 얻어내거나 변경할 수 있다.
html 문서도, javascript 객체도 둘다 트리구조 로 되어 있고 여기서 트리구조란,
이런 자료 구조를 컴퓨터 공학에서는 트리 구조라고 합니다. 트리 구조의 가장 큰 특징은 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복되는 점입니다.
마지막으로, document 라는 전역변수로 접근이 가능합니다.
document 객체에는 많은 속성과 메소드가 존재합니다. CRUD(Create, Read, Update and Delete) 입니다. 우리가 앞으로 어떤 종류의 개발이나 컴퓨터 언어를 배우시더라도 가장 먼저 CRUD에 집중해야 합니다. CRUD를 먼저 이해하는 것이 새로운 언어를 가장 빠르게 학습하는 방법입니다.
HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 하는 방법을 학습합니다. DOM에는 HTML에 적용(APPEND)하는 메소드가 있습니다.
그렇게 오늘은 crub에 집중해보겠습니다.
첫번째 create
html에서 <a>라는 achor태그를 자바스크립트에서 만들기 위해선 다음과 같이 선언해주면 됩니다.
|
1
2
3
4
5
|
aElement.setAttribute('id', 'class6')
or
aElement.id = 'class6'
|
cs |
여기서 setAttribute는 태그들이 가지는 각각의 속성을 첫번째에 입력하고 두번째의 그에 맞는 값을 입력하면 됩니다. 예를 들어 img라는 태그 변수를 aElement처럼 imgElement를 만들었다면
imgElement.setAttribute('src', './assets/me.png') 처럼요!
다음으로 aElement 안에 'awesome students'라는 내용을 넣고 싶다면
|
1
2
3
4
5
|
aElement.textContent = 'awesome students'
or
aElement.innerHTML = 'awesome students'
|
cs |
만든 aElement태그를 'world'라는 텍스트 밑에 추가할 때
(html 파일-검정)
|
1
2
3
4
5
6
7
8
|
<body>
<div>
<div>hello</div>
<div id="world">world</div>
<span id="code">code</span>
<span>states</span>
</div>
</body>
|
cs |
밑에 문장을 추가하게 되면 world라는 텍스트 밑에 <a id="class6">awesome students</a>가 들어가게 됩니다.
|
1
|
document.getElementById('world').appendChild(aElement)
|
cs |
세번째 제거할때
둘중하나 사용하면 됩니다.
|
1
2
3
4
5
|
aElement.remove()
or
document.querySelector('world').removeChild(aElement)
|
cs |
밑에 코드에서 removeChild 대신에 remove를 사용하게되면 world라는 element 모두를 지우게 됩니다.
마지막 조회할때
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
1.
document.querySelector('div')
//최상단 div하나만 조회한다.
2.
document.getElementById('div')
// id가 div인 element 하나를 조회한다.
3.
document.getElementByClassName('div')
class가 div인 element 여러개를 조회한다.
4.
document.getElementByTagName('div')
//클래스가 div인 element 모두 조회
5.
document.querySelectorAll('div')
//4번과 같다
|
cs |
처음에 배우는데 너무 어렵다라는 생각을 했습니다. 그래서 든 생각이 이 네가지 메소드에만 집중하였습니다.
그러니 처음보다 훨씬 이해가 잘된다. 지금은 a 태그만을 만들어보았지만, 저 위치에 div, span, li, ul, ol, img 등등 html 태그들을 생성하여 값을 입력하고 조회와 제거도 할수있었습니다.
예시를 보며 이자리에는 키가 들어가고, 키값이 들어가고, 내용이 들어가고 변수가 들어가는거를 숙지해야합니다.
'개발 공부 > 웹개발' 카테고리의 다른 글
| 자바스크립트_화살표함수(arrow function) 개념정리 (0) | 2021.04.28 |
|---|---|
| 자바스크립트 객체 개념정리(1)_javascript_Object_객체접근,객체추가,객체삭제,객체만들기 (0) | 2021.04.27 |
| 자바스크립트(java script) 배열(Array) 정리(1) 배열의 순서,요소,pop,push,shift,unshift (0) | 2021.04.25 |
| HTML 필수 태그 정리(1)_제목_문단_강조_링크_이미지 태그_Heading, paragraph, anchor, image, emphasis, breakline (0) | 2021.04.21 |
| 변수, 데이터, 변수 선언, 데이터할당, 자료형 (1) | 2021.04.21 |
댓글