[JavaScript/Web] Dom에 대한 추가 공부

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

DOM과 JavaScript

지난 학습 목표였던 'DOM과 JavaScript의 차이에 대해 이해할 수 있다.'가 미흡한것 같아서 Dom에 대한 추가 공부를 하였다.

자바스크립트는 Html을 조작하기 위해 만들어진 언어이다.

Dom은 document object model로 스크립트 언어로 Html요소를 제어할수 있도록 웹 문서를 객체화 한것이다.

html요소는 하나의 부모 태그와 n개의 자식 태그를 갖을수 있다.

이를 시각화 하면 나무 모양이 나오는데, 이를 dom tree라고 한다.

각가의 요소를 노드라고 한다.

웹문서 영역을 제어 할수 있게 제공하는 객체는 document객체이다

document는 앞에서 말한 dom tree의 최상이기 때문에 document를 통해 원하는 요소에 접근할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="nav">
    <div class="logo"></div>
    <div class="menu-wrapper">
        <div class="menu"></div>
        <div class="menu"></div>
        <div class="menu"></div>
        <div class="profile-photo"></div>
    </div>
</div>
<div id="news-contents">
    <div class="news-content-wrapper">
        <div class="news-picture"></div>
        <div class="news-title"></div>
        <div class="news-description"></div>
    </div>
</div>
<div id="footer">Hello!</div>
</body>
</html>

childrenNodes는 노드의 하위 노드를 보여준다.

document.childNodes는 NodeList(2) [<!DOCTYPE html>, html]를 반환 한다.

document의 하위 노드는 html인것을 알수 있다.

노드를 하나씩 접근해서 id가 footer인 노드에 접근해 'Hello!'라는 텍스트를 'World~'로 변경해보자

document.childNodes[1].childNodes[2].childNodes[5].textContent = 'World~'

아래와 같이 접근할 수 있다.

document.querySelector('#footer').textContent = 'World~'

Dom은 Html 코드를 해석해서 요소들을 트리 구조화해 표현한 형식이다

Dom은 자바스크립트를 사용해서 웹 화면의 콘텐츠를 추가, 수정, 삭제하거나 이벤트를 처리 할 수 있도록 프로그래밍 인터페이스를 제공한다.

++ 추가로 배운 내용

Dom은 javascript로 프로그램을 작성하여 html을 조작하고, Html의 구조가 자바스크립트 객체의 구조와 같이 트리구조로 되어있다.

Dom은 window 객체를 통해 Html에 접근하지 않는다.
Html구조와 javascript구조는 동일 하게 트리 구조입니다.

let aElement = document.createElement('a')
aElement.setAttribute('id', 'javascript')
aElement.textContent = 'awesome'

다음의 경우

첫줄은 a태그를 생성합니다.

두번째 줄은 변수에 setAttribute를 하여 id가 javascript로 지정해주었습니다.

마지막줄에 아이디가 javascript인 a태그에 awesome이라는 텍스트를 부여합니다.

appendChild() vs append()

둘다 부모 노드에 자식노드를 추가한다.

하지만 차이점이 있다.

	append	appendChild
노드객체	o	o
문자열	o	x
반환값 return	x	o
다중 값 허용	o	x

자세한 내용은 아래를 참고한다.

https://webruden.tistory.com/634

[Javascript] append vs appendChild 차이점 (초간단)

append와 appendChild 메서드는 모두 부모 노드에 자식 노드를 추가하는 메서드입니다. 하지만 두 메서드에도 몇 가지 차이점이 존재합니다. 이번 포스팅에서는 두 메서드의 차이점에

webruden.tistory.com

저작자표시 (새창열림)

'프론트엔드 > Codestates' 카테고리의 다른 글

[Git] github 사용 (0)	2022.09.15
[javaScript/Web] 유효성 검사를 하는 회원가입 페이지 (0)	2022.09.14
[JavaScript/Web] Dom다루기 (0)	2022.09.13
[Javascript/Web] DOM의 기초 (0)	2022.09.13
[JavaScript] Javascript Koans (0)	2022.09.13

DOM과 JavaScript

++ 추가로 배운 내용

'프론트엔드 > Codestates' 카테고리의 다른 글

티스토리툴바